Merge pull request #83 from Akash-pugazh/Aakash

Added the feature : Added the clickable titles which collapse and expand on side bar nav
FrontendFreaks · Oct 2, 2023 · 8acb0a3 · 8acb0a3
2 parents 7592f50 + 6588c55
commit 8acb0a3
Showing 1 changed file with 59 additions and 46 deletions.
diff --git a/components/layout/sidebar-nav.tsx b/components/layout/sidebar-nav.tsx
@@ -1,66 +1,79 @@
-"use client";
+"use client"
 
-import Link from "next/link";
-import { usePathname } from "next/navigation";
+import Link from "next/link"
+import { usePathname } from "next/navigation"
 
-import { cn } from "@/lib/utils";
-import { NavItem, SidebarNav, SidebarNavItem } from "@/types";
+import { cn } from "@/lib/utils"
+import { NavItem, SidebarNav, SidebarNavItem } from "@/types"
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from "../ui/accordion";
+} from "../ui/accordion"
 
 export interface DocsSidebarNavProps {
-  items: SidebarNav[];
+  items: SidebarNav[]
 }
 
 export function DocsSidebarNav({ items }: DocsSidebarNavProps) {
-  const pathname = usePathname();
+  const pathname = usePathname()
 
   return items.length ? (
     <div className="w-full text-slate-800 ">
       {items.map((item, index) => (
-        <div key={index} className={cn("pb-8")}>
-          <h4 className="mb-1 rounded-md py-1 text-base font-medium dark:text-white">
-            {item.title}
-          </h4>
-          {item.items ? (
-            <div className="dark:text-gray-400">
-              {item.items.map((item) => (
-                <>
-                  {item.href ? (
-                    <DocsSidebarNavItem item={item} pathname={pathname} />
-                  ) : (
-                    <Accordion type="single" collapsible>
-                      <AccordionItem className="border-b-0" value="item-1">
-                        <div>
-
-                          <AccordionTrigger className="py-2 hover:no-underline"> {item.title}</AccordionTrigger>
-                        </div>
-                        <AccordionContent className="pb-[-1rem]">
-                          <DocsSidebarNavItems
-                            items={item.items}
-                            pathname={pathname}
-                          />
-                        </AccordionContent>
-                      </AccordionItem>
-                    </Accordion>
-                  )}
-                </>
-              ))}
-            </div>
-          ) : null}
+        <div key={index} className={cn("pb-4")}>
+          <Accordion type="single" collapsible>
+            <AccordionItem className="border-b-0" value="item-title">
+              <div>
+                <AccordionTrigger className="mb-1 rounded-md py-1 text-base font-medium dark:text-white hover:no-underline">
+                  {item.title}
+                </AccordionTrigger>
+              </div>
+              <AccordionContent>
+                {item.items ? (
+                  <div className="dark:text-gray-400">
+                    {item.items.map(item => (
+                      <>
+                        {item.href ? (
+                          <DocsSidebarNavItem item={item} pathname={pathname} />
+                        ) : (
+                          <Accordion type="single" collapsible>
+                            <AccordionItem
+                              className="border-b-0"
+                              value="item-1"
+                            >
+                              <div>
+                                <AccordionTrigger className="py-2 hover:no-underline">
+                                  {" "}
+                                  {item.title}
+                                </AccordionTrigger>
+                              </div>
+                              <AccordionContent className="pb-[-1rem]">
+                                <DocsSidebarNavItems
+                                  items={item.items}
+                                  pathname={pathname}
+                                />
+                              </AccordionContent>
+                            </AccordionItem>
+                          </Accordion>
+                        )}
+                      </>
+                    ))}
+                  </div>
+                ) : null}
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
         </div>
       ))}
     </div>
-  ) : null;
+  ) : null
 }
 
 interface DocsSidebarNavItemsProps {
-  items: NavItem[] | undefined;
-  pathname: string | null;
+  items: NavItem[] | undefined
+  pathname: string | null
 }
 
 export function DocsSidebarNavItems({
@@ -72,15 +85,15 @@ export function DocsSidebarNavItems({
       {items.map((item, index) => {
         return (
           <DocsSidebarNavItem key={index} item={item} pathname={pathname} />
-        );
+        )
       })}
     </div>
-  ) : null;
+  ) : null
 }
 
 interface DocsSidebarNavItemsrops {
-  item: NavItem | SidebarNavItem;
-  pathname: string | null;
+  item: NavItem | SidebarNavItem
+  pathname: string | null
 }
 
 export function DocsSidebarNavItem({
@@ -100,5 +113,5 @@ export function DocsSidebarNavItem({
     <span className="flex w-full cursor-not-allowed items-center rounded-md p-2 opacity-60">
       {item.title}
     </span>
-  );
+  )
 }