improve sidebar

irsyadadl · Oct 23, 2024 · 03e43b7 · 03e43b7
1 parent 092dc6c
commit 03e43b7
Show file tree

Hide file tree

Showing 25 changed files with 187 additions and 926 deletions.
diff --git a/app/blocks/navbar/navbar-01/app-navbar.tsx → app/blocks/navbar/app-navbar.tsx b/app/blocks/navbar/navbar-01/app-navbar.tsx → app/blocks/navbar/app-navbar.tsx
@@ -3,33 +3,51 @@
 import { ThemeSwitcher } from "@/components/theme-switcher"
 import {
   IconBag2,
+  IconBasket,
   IconBrandApple,
   IconChevronLgDown,
   IconCommandRegular,
+  IconCube,
   IconDashboard,
   IconHeadphones,
   IconLogout,
+  IconMacbook,
   IconSearch,
   IconSettings
 } from "justd-icons"
+import { usePathname } from "next/navigation"
 import { Avatar, Button, Menu, Navbar, Separator } from "ui"
 
 export function AppNavbar({ children, ...props }: React.ComponentProps<typeof Navbar>) {
+  const isUsingIcon = usePathname().includes("navbar-05")
   return (
     <Navbar {...props}>
       <Navbar.Nav>
         <Navbar.Logo href="/docs/components/layouts/navbar">
           <IconBrandApple className="size-5" />
         </Navbar.Logo>
         <Navbar.Section>
-          <Navbar.Item isCurrent href="/blocks/navbar/navbar-01">
+          <NavbarItem isCurrent href="/blocks/navbar/navbar-01">
+            {isUsingIcon && <IconBasket />}
             Store
-          </Navbar.Item>
-          <Navbar.Item href="/blocks/navbar/navbar-02">Mac</Navbar.Item>
-          <Navbar.Item href="/blocks/navbar/navbar-03">iPad</Navbar.Item>
-          <Navbar.Item href="#">iPhone</Navbar.Item>
-          <Navbar.Item href="#">Watch</Navbar.Item>
-          <Navbar.Item href="#">Vision</Navbar.Item>
+          </NavbarItem>
+          <NavbarItem href="/blocks/navbar/navbar-02">
+            {isUsingIcon && <IconMacbook />}
+            Mac
+          </NavbarItem>
+          <NavbarItem href="/blocks/navbar/navbar-03">
+            {isUsingIcon && <IconCube />}
+            iPad
+          </NavbarItem>
+          <NavbarItem href="/blocks/navbar/navbar-04">
+            {isUsingIcon && <IconCube />}
+            iPhone
+          </NavbarItem>
+          <NavbarItem href="/blocks/navbar/navbar-05">
+            {isUsingIcon && <IconCube />}
+            Watch
+          </NavbarItem>
+          <NavbarItem href="#">Vision</NavbarItem>
           <Navbar.Item href="#">Entertainment</Navbar.Item>
           <Navbar.Item href="#">Accessories</Navbar.Item>
           <Navbar.Item href="#">Support</Navbar.Item>
@@ -160,3 +178,8 @@ export function AppNavbar({ children, ...props }: React.ComponentProps<typeof Na
     </Navbar>
   )
 }
+
+function NavbarItem(props: React.ComponentProps<typeof Navbar.Item>) {
+  const pathname = usePathname()
+  return <Navbar.Item {...props} isCurrent={pathname === props.href} />
+}
diff --git a/app/blocks/navbar/navbar-01/layout.tsx b/app/blocks/navbar/navbar-01/layout.tsx
@@ -1,4 +1,4 @@
-import { AppNavbar } from "./app-navbar"
+import { AppNavbar } from "../app-navbar"
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return <AppNavbar isSticky>{children}</AppNavbar>

diff --git a/app/blocks/navbar/navbar-02/app-navbar.tsx b/app/blocks/navbar/navbar-02/app-navbar.tsx
diff --git a/app/blocks/navbar/navbar-02/layout.tsx b/app/blocks/navbar/navbar-02/layout.tsx
@@ -1,5 +1,5 @@
-import { AppNavbar } from "./app-navbar"
+import { AppNavbar } from "../app-navbar"
 
 export default function Layout({ children }: { children: React.ReactNode }) {
-  return <AppNavbar>{children}</AppNavbar>
+  return <AppNavbar intent="floating">{children}</AppNavbar>
 }