feat: update-layout & add uuid tool (#4)

Co-authored-by: typist <git@mail.typist.cc>
Reviewed-on: #4

src/components/sidebar/index.tsx

@@ -1,22 +1,32 @@
-import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar";
 import { tools } from "@/components/tool";
+import { Link } from "react-router-dom";
 
 export const AppSidebar = () => (
   <Sidebar>
-    <SidebarHeader>
+    <SidebarHeader className="text-2xl font-bold flex justify-center items-center">
       Lite Kit
     </SidebarHeader>
     <SidebarContent>
-      {
-        tools.map((tool) => (
-          <SidebarMenuItem key={tool.name}>
-            <SidebarMenuButton>
-              {tool.icon}
-              {tool.name}
-            </SidebarMenuButton>
-          </SidebarMenuItem>
-        ))
-      }
+      <SidebarGroup>
+        <SidebarGroupLabel>
+          Tools
+        </SidebarGroupLabel>
+        <SidebarGroupContent>
+          {
+            tools.map((tool) => (
+              <SidebarMenuItem key={tool.name}>
+                <SidebarMenuButton asChild>
+                  <Link to={`/tool/${tool.path}`} title={tool.description}>
+                    {tool.icon}
+                    {tool.name}
+                  </Link>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            ))
+          }
+        </SidebarGroupContent>
+      </SidebarGroup>
     </SidebarContent>
     <SidebarFooter>
       <a href="mailto:litek@mail.typist.cc">contact us</a>