Playground: Fix theme toggle UI when sidebar is collapsed

apps/playground-web/src/components/ThemeToggle.tsx

@@ -3,35 +3,39 @@
 import { MoonIcon, SunIcon } from "lucide-react";
 import { useTheme } from "next-themes";
 import { ClientOnly } from "@/components/ClientOnly";
-import { Button } from "@/components/ui/button";
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/components/ui/sidebar";
 import { Skeleton } from "@/components/ui/skeleton";
 
 export function ThemeToggle() {
   const { setTheme, theme } = useTheme();
 
   return (
-    <div className="border-t pt-2">
-      <ClientOnly
-        ssr={<Skeleton className="size-[34px] rounded-full border bg-accent" />}
-      >
-        <Button
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton
           aria-label="Toggle theme"
           className="w-full text-muted-foreground hover:text-foreground px-2 py-1.5 text-left justify-start gap-2 capitalize h-auto font-normal"
           onClick={() => {
             setTheme(theme === "dark" ? "light" : "dark");
           }}
-          size="sm"
-          variant="ghost"
         >
-          {theme === "light" ? (
-            <SunIcon className="size-4" />
-          ) : (
-            <MoonIcon className="size-4" />
-          )}
+          <ClientOnly ssr={<Skeleton className="size-4" />}>
+            {theme === "light" ? (
+              <SunIcon className="size-4" />
+            ) : (
+              <MoonIcon className="size-4" />
+            )}
+          </ClientOnly>
 
-          {theme}
-        </Button>
-      </ClientOnly>
-    </div>
+          <ClientOnly ssr={<Skeleton className="w-16 h-4" />}>
+            <span>{theme}</span>
+          </ClientOnly>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
   );
 }

apps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ChevronDownIcon, ChevronRightIcon } from "lucide-react";
+import { ChevronRightIcon } from "lucide-react";
 import Link from "next/link";
 import { useMemo, useState } from "react";
 import {
@@ -126,6 +126,7 @@ function FullWidthSidebarLayoutInner(props: FullWidthSidebarLayoutProps) {
               links={footerSidebarLinks}
               fullPath={props.fullPath}
             />
+            <SidebarSeparator />
             <ThemeToggle />
           </SidebarFooter>
         )}
@@ -289,7 +290,7 @@ function RenderSidebarSubmenu(props: {
       <DynamicHeight transition="height 200ms ease">
         <SidebarMenuItem>
           <Collapsible
-            className="group/collapsible [&[data-state=open]>button>svg[data-chevron]]:rotate-180"
+            className="group/collapsible [&[data-state=open]>button>svg[data-chevron]]:rotate-90"
             defaultOpen={open}
             open={open}
             onOpenChange={setOpen}
@@ -307,9 +308,9 @@ function RenderSidebarSubmenu(props: {
                 <span>{props.subMenu.label}</span>
 
                 {sidebar.open && (
-                  <ChevronDownIcon
+                  <ChevronRightIcon
                     data-chevron
-                    className="transition-transform ml-auto"
+                    className="transition-transform ml-auto text-foreground"
                   />
                 )}
               </SidebarMenuButton>

apps/playground-web/src/components/ui/sidebar.tsx

@@ -27,8 +27,8 @@ import { cn } from "@/lib/utils";
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-const SIDEBAR_WIDTH = "19rem";
-const SIDEBAR_WIDTH_MOBILE = "19rem";
+const SIDEBAR_WIDTH = "18rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
 const SIDEBAR_WIDTH_ICON = "3rem";
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";