refactor: update layout and sidebar components

frontend/app/dashboard/layout.tsx

@@ -3,6 +3,7 @@
 import { cn } from "@/lib/utils";
 
 import DashboardSidebar from "@/components/layout/DashboardSidebar";
+import { ScrollArea } from "@/components/ui/scroll-area";
 
 export default function DashboardLayout({
   children,
@@ -12,15 +13,15 @@ export default function DashboardLayout({
   return (
     <div
       className={cn(
-        "rounded-md flex flex-col md:flex-row bg-gray-100 dark:bg-neutral-800 w-full flex-1 mx-auto border border-neutral-200 dark:border-neutral-700 overflow-hidden",
+        "flex flex-col md:flex-row bg-gray-100 dark:bg-neutral-900 w-full flex-1 mx-auto border border-neutral-200 dark:border-neutral-700 overflow-hidden",
         "h-screen"
       )}
     >
       <DashboardSidebar />
-      <div className="flex flex-1">
-        <div className="p-2 md:p-10 rounded-tl-2xl border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 flex flex-col gap-2 flex-1 w-full h-full">
+      <div className="flex flex-1 overflow-auto">
+        <ScrollArea className="p-2 md:p-10 rounded-tl-2xl border border-neutral-200 dark:border-neutral-900 bg-white dark:bg-neutral-900 flex flex-col gap-2 flex-1 w-full h-full">
           {children}
-        </div>
+        </ScrollArea>
       </div>
     </div>
   );

frontend/components/layout/DashboardSidebar.tsx

@@ -4,6 +4,7 @@ import { Sidebar, SidebarBody, SidebarLink } from "@/components/ui/sidebar";
 import { links } from "@/constants/data";
 import { SignOutButton, UserButton, useUser } from "@clerk/nextjs";
 import { useState } from "react";
+import DashboardThemeSwitch from "./ThemeToggle/dashboard-theme-switch";
 
 const DashboardSidebar = () => {
   const [open, setOpen] = useState(false);
@@ -28,18 +29,34 @@ const DashboardSidebar = () => {
               if (link.label === "Logout") {
                 return (
                   <SignOutButton key={idx}>
-                    <SidebarLink key={idx} link={link} />
+                    <SidebarLink
+                      key={idx}
+                      link={link}
+                      openNav={open}
+                      setOpenNav={setOpen}
+                    />
                   </SignOutButton>
                 );
               } else {
-                return <SidebarLink key={idx} link={link} />;
+                return (
+                  <SidebarLink
+                    key={idx}
+                    link={link}
+                    openNav={open}
+                    setOpenNav={setOpen}
+                  />
+                );
               }
             })}
           </div>
         </div>
-        <div className="flex items-center gap-3">
-          <UserButton />
-          {open && <p className="text-sm font-semibold">{user?.fullName}</p>}
+        <div className="flex flex-col gap-4">
+          <DashboardThemeSwitch />
+
+          <div className="flex items-center gap-3">
+            <UserButton />
+            {open && <p className="text-sm font-semibold">{user?.fullName}</p>}
+          </div>
         </div>
       </SidebarBody>
     </Sidebar>

frontend/components/layout/ThemeToggle/dashboard-theme-switch.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import type { RadioGroupProps, RadioProps } from "@nextui-org/react";
+
+import { cn } from "@/lib/utils";
+import { Icon } from "@iconify/react";
+import {
+  RadioGroup,
+  VisuallyHidden,
+  useRadio,
+  useRadioGroupContext,
+} from "@nextui-org/react";
+import { useTheme } from "next-themes";
+import React from "react";
+
+const ThemeRadioItem = ({ icon, ...props }: RadioProps & { icon: string }) => {
+  const {
+    Component,
+    isSelected: isSelfSelected,
+    getBaseProps,
+    getInputProps,
+    getWrapperProps,
+  } = useRadio(props);
+
+  const groupContext = useRadioGroupContext();
+
+  const isSelected =
+    isSelfSelected ||
+    Number(groupContext.groupState.selectedValue) >= Number(props.value);
+
+  const wrapperProps = getWrapperProps();
+
+  return (
+    <Component {...getBaseProps()}>
+      <VisuallyHidden>
+        <input {...getInputProps()} />
+      </VisuallyHidden>
+      <div
+        {...wrapperProps}
+        className={cn(
+          wrapperProps?.["className"],
+          "pointer-events-none h-8 w-8 rounded-full border-black border-opacity-10 ring-0 transition-transform group-data-[pressed=true]:scale-90",
+          {
+            "bg-default-200 dark:bg-default-100": isSelected,
+          }
+        )}
+      >
+        <Icon className="text-default-500" icon={icon} width={18} />
+      </div>
+    </Component>
+  );
+};
+
+const DashboardThemeSwitch = React.forwardRef<
+  HTMLDivElement,
+  Omit<RadioGroupProps, "children">
+>(({ classNames = {}, ...props }, ref) => {
+  const { setTheme } = useTheme();
+
+  return (
+    <RadioGroup
+      ref={ref}
+      aria-label="Select a theme"
+      classNames={{
+        ...classNames,
+        wrapper: cn("gap-0 items-center", classNames?.wrapper),
+      }}
+      defaultValue="dark"
+      orientation="horizontal"
+      {...props}
+    >
+      <ThemeRadioItem
+        icon="solar:moon-linear"
+        value="dark"
+        onClick={() => setTheme("dark")}
+      />
+      <ThemeRadioItem
+        icon="solar:sun-2-linear"
+        value="light"
+        onClick={() => setTheme("light")}
+      />
+      <ThemeRadioItem
+        icon="solar:monitor-linear"
+        value="system"
+        onClick={() => setTheme("system")}
+      />
+    </RadioGroup>
+  );
+});
+
+DashboardThemeSwitch.displayName = "DashboardThemeSwitch";
+
+export default DashboardThemeSwitch;