Playground: Fix theme toggle UI when sidebar is collapsed

Author: MananTank

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

@@ -126,6 +126,7 @@ function FullWidthSidebarLayoutInner(props: FullWidthSidebarLayoutProps) {
               links={footerSidebarLinks}
               fullPath={props.fullPath}
             />
+            <SidebarSeparator />
             <ThemeToggle />
           </SidebarFooter>
         )}