[Admin] Sidebar navigation

apps/web/@/components/ui/collapsible.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

apps/web/@/molecules/nav/index.tsx

@@ -17,8 +17,8 @@ export default async function Nav() {
   const t = await getTranslations()
 
   return (
-    <header className="mx-auto flex items-center border-b p-2 sm:px-6 lg:px-8">
-      <div className="container flex items-center justify-between">
+    <header className="mx-auto items-center border-b p-2 sm:px-2 lg:px-2">
+      <div className="flex items-center justify-between">
         <Logo />
 
         <div className="flex items-center gap-8">

apps/web/@/molecules/nav/search-bar.tsx

@@ -102,7 +102,7 @@ export default function SearchBar() {
                   "bg-dark-50 flex h-6 items-center gap-1 rounded-sm border p-2 text-gray-500 dark:border-gray-50"
                 )}
               >
-                {navigator?.userAgent?.toLowerCase()?.includes("mac") ? (
+                {/* {navigator?.userAgent?.toLowerCase()?.includes("mac") ? (
                   <>
                     <span className="text-xs">⌘</span>
                     <span className="text-xs">K</span>
@@ -111,7 +111,7 @@ export default function SearchBar() {
                   <>
                     <span>CRL K</span>
                   </>
-                )}
+                )} */}
               </kbd>
             </button>
           )}

apps/web/@/molecules/sidebar-item/index.tsx

@@ -1,25 +1,99 @@
 "use client"
+import * as React from "react"
 
 import Link from "next/link"
 import { usePathname } from "next/navigation"
 
 import { buttonVariants } from "@/components/ui/button"
 import { cn } from "@/lib/utils"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible"
+import { ChevronUp, ChevronDown, StickyNote, TagIcon, Settings } from "lucide-react"
 
 import Typography from "../typography"
 
+type SidebarItemChildrenProps = {
+  label: string
+  link: string
+  icons: React.ReactElement
+}
+
 export type SidebarItemProps = {
   label: string
   link: string
   icons: React.ReactElement
+  children: Array<SidebarItemChildrenProps>
 }
 
-export default function SidebarItem({ label, link, icons }: SidebarItemProps) {
+export default function SidebarItem({ label, link, icons, children }: SidebarItemProps) {
   const currentPathname = usePathname()
+  const [open, setOpen] = React.useState(false);
 
   const isActive =
     currentPathname === "/" ? link === "/" : currentPathname.startsWith(link) && link !== "/"
 
+  if (children) {
+    return (
+      <Collapsible open={open} onOpenChange={setOpen}>
+        <div className="flex justify-between">
+          <div
+            className={cn(
+              buttonVariants({ variant: "ghost", size: "sm" }),
+              "flex items-center justify-start dark:text-white dark:hover:bg-muted dark:hover:text-white",
+              {
+                "bg-accent": isActive,
+              }
+            )}
+          >
+            {icons && <div className="mr-2 flex h-6 w-4 items-center justify-center">{icons}</div>}
+            <Typography
+              variant="span"
+              className={cn({
+                "font-bold": isActive,
+              })}
+            >
+              {label}
+            </Typography>
+
+          </div>
+          <CollapsibleTrigger asChild>
+            <button className="IconButton">{open ? <ChevronUp strokeWidth={3} size={18} /> : <ChevronDown strokeWidth={3} size={18} />}</button>
+          </CollapsibleTrigger>
+        </div>
+
+        <CollapsibleContent>
+          {children?.map((item, key) => {
+            return (
+              <Link
+                href={item?.link}
+                key={key}
+                className={cn(
+                  buttonVariants({ variant: "ghost", size: "sm" }),
+                  "ml-5 dark:text-white dark:hover:bg-muted dark:hover:text-white",
+                  {
+                    "bg-accent": isActive,
+                  }
+                )}
+              >
+                <Typography
+                  variant="span"
+                  className={cn({
+                    "font-bold": isActive,
+                  })}
+                >
+                  {item?.label}
+                </Typography>
+              </Link>
+            )
+          })}
+        </CollapsibleContent>
+      </Collapsible>
+    )
+  }
+
   return (
     <Link
       href={link}

apps/web/app/[lang]/(protected)/layout.tsx

@@ -1,25 +1,46 @@
 import SidebarItem, { SidebarItemProps } from "@/molecules/sidebar-item"
+import { User, HomeIcon, StickyNote, TagIcon, Settings } from "lucide-react"
 
-const SIDE_BAR = [
-  {
-    label: "Profile",
-    link: "/user/profile",
-  },
-  {
-    label: "Posts",
-    link: "/user/posts",
-  },
-  {
-    label: "Password",
-    link: "/user/change-password",
-  },
-  {
-    label: "Setting",
-    link: "/user/settings",
-  },
-] as Array<SidebarItemProps>
 
 export default async function ProtectedLayout({ children }: { children: React.ReactNode }) {
+
+  const SIDE_BAR = [
+    {
+      label: "Dashboard",
+      link: "/user/profile",
+      icons: <HomeIcon size={16} />,
+    },
+    {
+      label: "Posts",
+      link: "/user/posts",
+      icons: <StickyNote size={16} />,
+    },
+    {
+      label: "Tags",
+      link: "/user/tags",
+      icons: <TagIcon size={16} />,
+    },
+    {
+      label: "Users",
+      link: "/user/user",
+      icons: <User size={16} />,
+    },
+    {
+      label: "Setting",
+      icons: <Settings size={16} />,
+      children: [
+        {
+          label: "Permission and Role",
+          link: "/user/Permission",
+        },
+        {
+          label: "Configuration",
+          link: "/user/configuration",
+        },
+      ]
+    },
+  ] as Array<SidebarItemProps>
+
   return (
     <div className="grid w-full grid-cols-12 gap-8">
       <div className="col-span-2 flex flex-col gap-1">

apps/web/app/[lang]/(public)/layout.tsx

@@ -1,4 +1,4 @@
-import { BookCopy, HomeIcon, Smartphone, TagIcon } from "lucide-react"
+import { BookCopy, HomeIcon, StickyNote, TagIcon } from "lucide-react"
 import { useTranslations } from "next-intl"
 
 import SidebarItem, { SidebarItemProps } from "@/molecules/sidebar-item"
@@ -10,25 +10,21 @@ export default function PublicLayout({ children }: { children: React.ReactNode }
 
   const SIDE_BAR = [
     {
-      label: t("home"),
+      label: 'Dashboard',
       link: "/",
       icons: <HomeIcon size={16} />,
     },
+    {
+      label: 'Posts',
+      link: "/posts",
+      icons: <StickyNote size={16} />,
+    },
     {
       label: t("tags"),
       link: "/tags",
       icons: <TagIcon size={16} />,
     },
-    {
-      label: t("contact"),
-      link: "/contact",
-      icons: <Smartphone size={16} />,
-    },
-    {
-      label: t("about"),
-      link: "/about-us",
-      icons: <BookCopy size={16} />,
-    },
+
   ] as Array<SidebarItemProps>
 
   return (

apps/web/package.json

@@ -14,6 +14,7 @@
     "@formatjs/intl-localematcher": "^0.5.4",
     "@hookform/resolvers": "^3.3.1",
     "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-label": "^2.0.2",