From 857d4dfc1690764676720fc8a80449e12c7cb691 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Wed, 13 Aug 2025 23:35:36 +0000
Subject: [PATCH] Playground: Fix theme toggle UI when sidebar is collapsed
 (#7853)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on refining the sidebar component in the application by adjusting styles, modifying the theme toggle functionality, and enhancing the UI elements for better user experience.

### Detailed summary
- Updated `SIDEBAR_WIDTH` and `SIDEBAR_WIDTH_MOBILE` from `"19rem"` to `"18rem"`.
- Removed `ChevronDownIcon` and replaced it with `ChevronRightIcon` in `RenderSidebarSubmenu`.
- Added `<SidebarSeparator />` in `FullWidthSidebarLayoutInner`.
- Replaced `Button` with `SidebarMenu`, `SidebarMenuButton`, and `SidebarMenuItem` in `ThemeToggle`.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- New Features
  - Theme toggle now appears as a sidebar menu item with improved loading placeholders for icon and label.
- UI/UX
  - Sidebar width reduced from 19rem to 18rem for a more compact layout.
  - Chevron indicators updated: right-chevron rotates 90° when open for clearer state.
  - Added a visual separator in the sidebar footer for better grouping.
- Bug Fixes
  - Prevented rendering of empty sidebar menus/submenus.
- Refactor
  - Streamlined imports and removed unused variants; maintained existing toggle behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../src/components/ThemeToggle.tsx            | 38 ++++++++++---------
 .../blocks/full-width-sidebar-layout.tsx      |  9 +++--
 .../src/components/ui/sidebar.tsx             |  4 +-
 3 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/apps/playground-web/src/components/ThemeToggle.tsx b/apps/playground-web/src/components/ThemeToggle.tsx
index 24e9a4b3263..1e4711298de 100644
--- a/apps/playground-web/src/components/ThemeToggle.tsx
+++ b/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>
   );
 }
diff --git a/apps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx b/apps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx
index 749a2cdd2ef..5a62bdf0244 100644
--- a/apps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx
+++ b/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>
diff --git a/apps/playground-web/src/components/ui/sidebar.tsx b/apps/playground-web/src/components/ui/sidebar.tsx
index 5e4fd468313..f8c07cbbdb9 100644
--- a/apps/playground-web/src/components/ui/sidebar.tsx
+++ b/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";