✅ Good looking sidenav

Author: ariflogs

app/(docs)/docs/layout.tsx

@@ -0,0 +1,10 @@
+import SideNav from '@/components/SideNav'
+import React from 'react'
+
+export default function layout() {
+  return (
+    <div>
+        <SideNav />
+        layout</div>
+  )
+}

app/(docs)/docs/page.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function page() {
+  return (
+    <div>page</div>
+  )
+}

components/SideNav.tsx

@@ -1,27 +1,24 @@
+import { navConfig } from "@/config/navigation";
+import { H6 } from "@/packages/ui";
 import Link from "next/link";
 
-const navItems = [
-  { title: "Getting Started", route: "/components" },
-  { title: "Accordions", route: "/components/accordions" },
-  { title: "Avatars", route: "/components/avatars" },
-  // { title: "Badges", route: "/components/badges" },
-  { title: "Buttons", route: "/components/buttons" },
-  { title: "Cards", route: "/components/cards" },
-  { title: "Inputs", route: "/components/inputs" },
-  { title: "Textareas", route: "/components/textareas" },
-  { title: "Typography", route: "/components/typography" },
-];
-
 export default function SideNav() {
   return (
     <div
       className={`fixed top-16 left-0 border-r-2 border-black h-full transition-transform transform md:translate-x-0 w-64 bg-white z-50`}
     >
-      <nav className="flex flex-col items-start p-6 space-y-2">
-        {navItems.map((item) => (
-          <Link key={item.route} href={item.route}>
-            {item.title}
-          </Link>
+      <nav className="flex flex-col items-start p-6 space-y-4">
+        {navConfig.sideNavItems.map((item) => (
+          <div key={item.title}>
+            <H6>{item.title}</H6>
+            <div className="flex flex-col space-y-2">
+              {item.children.map((child) => (
+                <Link key={child.title} href={child.href}>
+                  {child.title}
+                </Link>
+              ))}
+            </div>
+          </div>
         ))}
       </nav>
     </div>

components/TopNav.tsx

@@ -3,6 +3,7 @@ import Link from "next/link";
 import { GitBranchIcon, GithubIcon } from "lucide-react";
 import HamburgerMenu from "./HamburgerMenu";
 import { Button } from "@/packages/ui";
+import { navConfig } from "@/config/navigation";
 
 export default function TopNav() {
   return (
@@ -26,18 +27,15 @@ export default function TopNav() {
 
           {/* Navigation Links */}
           <div className="hidden md:flex space-x-8">
-            <a
-              href="/components"
-              className="hover:text-primary-500 transition-all"
-            >
-              Documentation
-            </a>
-            <a
-              href="/components/buttons"
-              className="hover:text-primary-500 transition-all"
-            >
-              Components
-            </a>
+            {navConfig.topNavItems.map((item) => (
+              <Link
+                key={item.title}
+                href={item.href}
+                className="hover:text-primary-500 transition-all"
+              >
+                {item.title}
+              </Link>
+            ))}
           </div>
 
           <div className="flex items-center space-x-4 lg:hidden">
@@ -46,7 +44,7 @@ export default function TopNav() {
               target="_blank"
               rel="noopener noreferrer"
             >
-                <GithubIcon />
+              <GithubIcon />
             </Link>
             <HamburgerMenu />
           </div>

config/navigation.ts

@@ -0,0 +1,29 @@
+import { INavigationConfig } from "@/types";
+
+const componentsRoute = "/docs/components";
+
+export const navConfig: INavigationConfig = {
+  topNavItems: [
+    { title: "Documentation", href: "/docs" },
+    { title: "Components", href: `${componentsRoute}/button` },
+  ],
+  sideNavItems: [
+    {
+      title: "Getting Started",
+      children: [{ title: "Introduction", href: "/docs" }],
+    },
+    {
+      title: "Components",
+      children: [
+        { title: "Accordion", href: `${componentsRoute}/accordion` },
+        { title: "Avatar", href: `${componentsRoute}/avatar` },
+        { title: "Badge", href: `${componentsRoute}/badge` },
+        { title: "Button", href: `${componentsRoute}/button` },
+        { title: "Card", href: `${componentsRoute}/card` },
+        { title: "Input", href: `${componentsRoute}/input` },
+        { title: "Textarea", href: `${componentsRoute}/textarea` },
+        { title: "Typography", href: `${componentsRoute}/typography` },
+      ],
+    },
+  ],
+};

packages/ui/Typography/H6.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react";
 
 export function H6({ children }: { children: ReactNode }) {
-  return <h6 className="font-head text-lg font-medium">{children}</h6>;
+  return <h6 className="font-head font-medium">{children}</h6>;
 }

types/index.d.ts

@@ -0,0 +1,14 @@
+export interface INavItem {
+  title: string;
+  href: string;
+}
+
+export interface INavItemWithChildren {
+  title: string;
+  children: INavItem[];
+}
+
+export interface INavigationConfig {
+  topNavItems: INavItem[];
+  sideNavItems: INavItemWithChildren[];
+}