#IMP-024: update sidebar (#74)

* Install shadcn's accordion * Style: accordion's animations * Imp: update sidebar with new accordion * Feat: add contributing section to sidebar
Pet3r1512 · Nov 13, 2024 · 8113379 · 8113379
1 parent c077ab1
commit 8113379
Show file tree

Hide file tree

Showing 5 changed files with 228 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "@mdx-js/react": "^3.1.0",
     "@next/bundle-analyzer": "^15.0.3",
     "@next/mdx": "^15.0.1",
+    "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-navigation-menu": "^1.2.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/Layouts/Header/Sidebar/_index.tsx b/src/components/Layouts/Header/Sidebar/_index.tsx
@@ -1,10 +1,73 @@
 import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";
 import { Menu } from "lucide-react";
-import { BadgePattern, navs } from "../Navigations";
 import Link from "next/link";
 import Logo from "../Logo";
 import ThemeToggle from "../../ThemeToggle";
 import Github from "../Github";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import Image from "next/image";
+
+const navlinks = [
+  {
+    name: "Getting Started",
+    index: "item-1",
+    sublinks: [
+      {
+        name: "Introduction",
+        href: "/docs/introduction",
+      },
+      {
+        name: "Overview",
+        href: "/docs/get_started",
+      },
+      {
+        name: "Installation",
+        href: "/docs/installation",
+      },
+    ],
+  },
+  {
+    name: "Template Structure",
+    index: "item-2",
+    sublinks: [
+      {
+        name: (
+          <div className="flex items-center gap-x-2.5">
+            <Image
+              src="/images/templates/nextjs-deviniter.png"
+              width={32}
+              height={32}
+              alt="nextjs-deviniter"
+              className="size-5"
+            />
+            <p>Next.js</p>
+          </div>
+        ),
+        href: "/docs/template_structure/nextjs",
+      },
+      {
+        name: (
+          <div className="flex items-center gap-x-2.5">
+            <Image
+              src="/images/templates/vite-deviniter.png"
+              width={32}
+              height={32}
+              alt="vite-deviniter"
+              className="size-5"
+            />
+            <p>Vite</p>
+          </div>
+        ),
+        href: "/docs/template_structure/vite",
+      },
+    ],
+  },
+];
 
 export default function Sidebar() {
   const handleNavClick = () => {
@@ -17,21 +80,38 @@ export default function Sidebar() {
         <Menu size={24} />
       </DrawerTrigger>
       <DrawerContent className="lg:hidden h-[100dvh] w-2/3 flex flex-col p-5 gap-y-10">
-        <Logo className="h-auto w-2/3" />
-        <aside className="flex flex-col gap-y-2.5 px-5 flex-1">
-          {navs.map((nav, index) => {
+        <Logo className="h-auto w-2/3 md:w-1/2" />
+        <aside className="flex flex-col gap-y-2.5 px-2 md:px-5 flex-1">
+          {navlinks.map((nav, index) => {
             return (
-              <Link
-                key={index}
-                onClick={() => handleNavClick()}
-                href={nav.href}
-                className="font-semibold"
-              >
-                {nav.name}
-                {nav.status && BadgePattern[nav.status]}
-              </Link>
+              <Accordion key={index} type="single" collapsible>
+                <AccordionItem value={nav.index}>
+                  <AccordionTrigger className="font-bold text-lg">
+                    {nav.name}
+                  </AccordionTrigger>
+                  {nav.sublinks.map((sub, index) => {
+                    return (
+                      <AccordionContent className="ml-5 text-base" key={index}>
+                        <Link onClick={() => handleNavClick()} href={sub.href}>
+                          {sub.name}
+                        </Link>
+                      </AccordionContent>
+                    );
+                  })}
+                </AccordionItem>
+              </Accordion>
             );
           })}
+          <Link
+            className="py-4"
+            onClick={() => handleNavClick()}
+            target="_blank"
+            href={
+              "https://github.com/Pet3r1512/DevIniter/issues/new?labels=enhancement&template=feature-request---.md"
+            }
+          >
+            <p className="font-bold text-lg">Contributing</p>
+          </Link>
         </aside>
         <div className="flex items-center gap-x-5">
           <ThemeToggle />

diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
@@ -0,0 +1,50 @@
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "@radix-ui/react-icons";
+import { cn } from "@/utils/utils";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item ref={ref} className={className} {...props} />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all text-left [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon className="h-4 w-4 shrink-0 text-neutral-500 transition-transform duration-200 dark:text-neutral-400" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -51,6 +51,28 @@ const config: Config = {
         md: "calc(var(--radius) - 2px)",
         sm: "calc(var(--radius) - 4px)",
       },
+      keyframes: {
+        "accordion-down": {
+          from: {
+            height: "0",
+          },
+          to: {
+            height: "var(--radix-accordion-content-height)",
+          },
+        },
+        "accordion-up": {
+          from: {
+            height: "var(--radix-accordion-content-height)",
+          },
+          to: {
+            height: "0",
+          },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
     },
   },
   variants: {