add switch to sidebar to toggle dark mode

Author: irsyadadl

Diff for: app/blocks/sidebar/app-sidebar-nav.tsx

@@ -6,10 +6,10 @@ import { Menu } from "@/components/ui/menu"
 import { Separator } from "@/components/ui/separator"
 import { SidebarNav, SidebarTrigger } from "@/components/ui/sidebar"
 
+import { Switch } from "@/components/ui/switch"
 import {
   IconCommandRegular,
   IconDashboard,
-  IconDeviceDesktop,
   IconLogout,
   IconMoon,
   IconSettings,
@@ -34,7 +34,7 @@ export default function AppSidebarNav() {
 }
 
 function UserMenu() {
-  const { resolvedTheme, setTheme } = useTheme()
+  const { theme, setTheme } = useTheme()
   return (
     <Menu>
       <Menu.Trigger className="ml-auto md:hidden" aria-label="Open Menu">
@@ -60,29 +60,18 @@ function UserMenu() {
           <IconCommandRegular />
           <Menu.Label>Command Menu</Menu.Label>
         </Menu.Item>
-        <Menu.Submenu>
-          <Menu.Item>
-            {resolvedTheme === "light" ? (
-              <IconSun />
-            ) : resolvedTheme === "dark" ? (
-              <IconMoon />
-            ) : (
-              <IconDeviceDesktop />
-            )}
-            <Menu.Label>Switch theme</Menu.Label>
-          </Menu.Item>
-          <Menu.Content>
-            <Menu.Item onAction={() => setTheme("system")}>
-              <IconDeviceDesktop /> System
-            </Menu.Item>
-            <Menu.Item onAction={() => setTheme("dark")}>
-              <IconMoon /> Dark
-            </Menu.Item>
-            <Menu.Item onAction={() => setTheme("light")}>
-              <IconSun /> Light
-            </Menu.Item>
-          </Menu.Content>
-        </Menu.Submenu>
+        <Menu.Item className="[&>[slot=label]+[data-slot=icon]]:right-4 [&>[slot=label]+[data-slot=icon]]:bottom-3">
+          {theme === "dark" ? <IconMoon /> : <IconSun />}
+          <Menu.Label>Theme</Menu.Label>
+          <span data-slot="icon">
+            <Switch
+              className="ml-auto"
+              isSelected={theme === "dark"}
+              onChange={(e) => setTheme(theme === "dark" ? "light" : "dark")}
+              aria-label="Toggle theme"
+            />
+          </span>
+        </Menu.Item>
         <Menu.Separator />
         <Menu.Item href="#contact-s">
           <Menu.Label>Contact Support</Menu.Label>

Diff for: app/blocks/sidebar/sidebar-01/app-sidebar.tsx

@@ -18,7 +18,9 @@ import {
   SidebarRail,
   SidebarSection,
   SidebarSectionGroup,
+  useSidebar,
 } from "@/components/ui/sidebar"
+import { Switch } from "@/components/ui/switch"
 import {
   IconArchive,
   IconArrowDown,
@@ -29,7 +31,6 @@ import {
   IconChevronLgDown,
   IconCircleQuestionmark,
   IconClock,
-  IconCommandRegular,
   IconCreditCard,
   IconDashboard,
   IconDotsHorizontal,
@@ -38,16 +39,22 @@ import {
   IconListBullets,
   IconLogout,
   IconMessage,
+  IconMoon,
   IconNotes,
   IconPackage,
   IconPlus,
   IconSettings,
   IconShield,
   IconShoppingBag,
+  IconSun,
   IconTicket,
 } from "justd-icons"
+import { useTheme } from "next-themes"
+import { twMerge } from "tailwind-merge"
 
 export default function AppSidebar(props: React.ComponentProps<typeof Sidebar>) {
+  const { theme, setTheme } = useTheme()
+  const { state } = useSidebar()
   return (
     <Sidebar {...props}>
       <SidebarHeader>
@@ -210,7 +217,10 @@ export default function AppSidebar(props: React.ComponentProps<typeof Sidebar>)
               className="absolute right-3 size-4 transition-transform group-pressed:rotate-180"
             />
           </Menu.Trigger>
-          <Menu.Content placement="bottom right" className="sm:min-w-(--trigger-width)">
+          <Menu.Content
+            placement="bottom right"
+            className={twMerge(state === "expanded" ? "sm:min-w-(--trigger-width)" : "sm:min-w-60")}
+          >
             <Menu.Section>
               <Menu.Header separator>
                 <span className="block">Kurt Cobain</span>
@@ -231,9 +241,17 @@ export default function AppSidebar(props: React.ComponentProps<typeof Sidebar>)
               Security
             </Menu.Item>
             <Menu.Separator />
-            <Menu.Item>
-              <IconCommandRegular />
-              Command Menu
+            <Menu.Item className="[&>[slot=label]+[data-slot=icon]]:right-4 [&>[slot=label]+[data-slot=icon]]:bottom-3">
+              {theme === "dark" ? <IconMoon /> : <IconSun />}
+              <Menu.Label>Theme</Menu.Label>
+              <span data-slot="icon">
+                <Switch
+                  className="ml-auto"
+                  isSelected={theme === "dark"}
+                  onChange={() => setTheme(theme === "dark" ? "light" : "dark")}
+                  aria-label="Toggle theme"
+                />
+              </span>
             </Menu.Item>
 
             <Menu.Item href="#contact">

Diff for: components/ui/menu.tsx

@@ -124,6 +124,7 @@ const MenuContent = <T extends object>({
       )}
     >
       <MenuPrimitive
+        data-slot="menu-content"
         className={composeTailwindRenderProps(
           className,
           "grid max-h-[calc(var(--visual-viewport-height)-10rem)] grid-cols-[auto_1fr] overflow-auto rounded-xl p-1 outline-hidden [clip-path:inset(0_0_0_0_round_calc(var(--radius-lg)-2px))] sm:max-h-[inherit] *:[[role='group']+[role=group]]:mt-4 *:[[role='group']+[role=separator]]:mt-1",

Diff for: components/ui/sidebar.tsx

@@ -310,6 +310,10 @@ const footer = tv({
     "**:data-[slot=menu-trigger]:hover:bg-(--sidebar-accent) **:data-[slot=menu-trigger]:hover:text-fg",
   ],
   variants: {
+    expanded: {
+      true: "",
+      false: "**:data-[slot=menu-content]:min-w-60",
+    },
     collapsed: {
       false: [
         "**:data-[slot=avatar]:*:size-8 **:data-[slot=menu-trigger]:**:data-[slot=avatar]:mr-2 **:data-[slot=avatar]:size-8",
@@ -327,7 +331,18 @@ const footer = tv({
 const SidebarFooter = ({ className, ...props }: React.ComponentProps<"div">) => {
   const { state, isMobile } = useSidebar()
   const collapsed = state === "collapsed" && !isMobile
-  return <div data-sidebar-footer="true" className={footer({ collapsed, className })} {...props} />
+  const expanded = state === "expanded"
+  return (
+    <div
+      data-sidebar-footer="true"
+      className={footer({
+        collapsed,
+        expanded,
+        className,
+      })}
+      {...props}
+    />
+  )
 }
 
 const SidebarContent = ({ className, ...props }: React.ComponentProps<"div">) => {