Use of Accordion within Sidebar

[jlorezz]

Has anyone of you guys used the Accordion for like a dropdown navigation menue?

really not sure if this is the best approach..

  mainNav: [
    {
      title: "Home",
      href: "/",
      icon: LayoutDashboard,
    },
    {
      title: "Calendar",
      href: "/calendar",
      icon: Calendar,
    },
    {
      title: "Fahrlehrer",
      href: "/driving-instructors",
      icon: Briefcase,
    },
    {
      title: "Fahrschüler",
      href: "/driving-students",
      icon: Backpack,
    },
    {
      title: "Fahrzeuge",
      href: "/vehicles",
      icon: Truck,
    },
    {
      title: "Theorie",
      href: "/theory",
      icon: GraduationCap,
    },
    {
      title: "Büro",
      href: "/office",
      icon: Building,
      children: [
        {
          title: "Büro",
          href: "/office",
        },
        {
          title: "",
          href: "/office",
        },
      ],
    },
    {
      title: "Einstellungen",
      href: "/settings",
      icon: Settings,
    },
  ],

import * as React from "react"
import Link from "next/link"

import { NavItem } from "@/types/nav"
import { siteConfig } from "@/config/site"
import { cn } from "@/lib/utils"
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
import { buttonVariants } from "@/components/ui/button"
import { Icons } from "@/components/icons"

interface MainNavProps {
  items?: NavItem[]
}

export function MainNav({ items }: MainNavProps) {
  return (
    <div className="flex w-full flex-col gap-6 md:gap-10">
      <Link href="/" className="flex items-center space-x-2">
        <Icons.logo className="h-6 w-6" />
        <span className="inline-block font-bold">{siteConfig.name}</span>
      </Link>
      {items?.length ? (
        <nav className="flex flex-col gap-6">
          {items?.map((item, index) =>
            item.children ? (
              <Accordion type="single" collapsible>
                <AccordionItem value={item.title} className="border-b-0">
                  <AccordionTrigger
                    className={cn(
                      buttonVariants({
                        size: "sm",
                        variant: "ghost",
                      }),
                      "justify-between",
                      item.disabled && "cursor-not-allowed opacity-80"
                    )}
                  >
                    <div className="flex items-center justify-start">
                      {item.icon && (
                        <item.icon
                          className="mr-2 h-4 w-4 shrink-0"
                          aria-hidden="true"
                        />
                      )}
                      {item.title}
                    </div>
                  </AccordionTrigger>
                  <AccordionContent>
                    <div className="ml-7 flex flex-col space-y-1">
                      {item.children.map((child, index) => (
                        <Link
                          key={index}
                          href={child.href || "/"}
                          className={cn(
                            buttonVariants({
                              size: "sm",
                              variant: "ghost",
                            }),
                            "justify-start",
                            child.disabled && "cursor-not-allowed opacity-80"
                          )}
                        >
                          {item.title}
                        </Link>
                      ))}
                    </div>
                  </AccordionContent>
                </AccordionItem>
              </Accordion>
            ) : (
              item.href && (
                <Link
                  key={index}
                  href={item.href}
                  className={cn(
                    buttonVariants({
                      size: "sm",
                      variant: "ghost",
                    }),
                    "justify-start",
                    item.disabled && "cursor-not-allowed opacity-80"
                  )}
                >
                  {item.icon && (
                    <item.icon
                      className="mr-2 h-4 w-4 shrink-0"
                      aria-hidden="true"
                    />
                  )}
                  {item.title}
                </Link>
              )
            )
          )}
        </nav>
      ) : null}
    </div>
  )
}

[NikharPandya]

I tried on my end and it works well, a nice idea @florianbress

[Janaka-Steph]

Does that work without client-side JS?