Init 2

components/app-sidebar.tsx

@@ -115,7 +115,13 @@ const navGroups: NavGroup[] = [
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
   const { resolvedTheme, setTheme } = useTheme()
-  const isDark = resolvedTheme === "dark"
+  const [mounted, setMounted] = React.useState(false)
+  React.useEffect(() => {
+    queueMicrotask(() => {
+      setMounted(true)
+    })
+  }, [])
+  const isDark = (resolvedTheme ?? "dark") === "dark"
 
   return (
     <Sidebar collapsible="icon" {...props}>
@@ -146,16 +152,24 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
             <span className="text-[13px] font-medium text-sidebar-foreground truncate">а.коротаев</span>
             <span className="text-[11px] text-sidebar-foreground/50 truncate">admin@routerlists.io</span>
           </div>
-          {/* Theme toggle */}
-          <button
-            onClick={() => setTheme(isDark ? "light" : "dark")}
-            title={isDark ? "Светлая тема" : "Тёмная тема"}
-            className="shrink-0 size-6 flex items-center justify-center rounded-md text-sidebar-foreground/50 hover:text-sidebar-foreground hover:bg-sidebar-accent transition-colors group-data-[collapsible=icon]:hidden"
-          >
-            {isDark
-              ? <SunIcon className="size-3.5" />
-              : <MoonIcon className="size-3.5" />}
-          </button>
+          {/* Theme toggle — только после mount, иначе SSR и клиент расходятся (next-themes). */}
+          {mounted ? (
+            <button
+              type="button"
+              onClick={() => setTheme(isDark ? "light" : "dark")}
+              title={isDark ? "Светлая тема" : "Тёмная тема"}
+              className="shrink-0 size-6 flex items-center justify-center rounded-md text-sidebar-foreground/50 hover:text-sidebar-foreground hover:bg-sidebar-accent transition-colors group-data-[collapsible=icon]:hidden"
+            >
+              {isDark
+                ? <SunIcon className="size-3.5" />
+                : <MoonIcon className="size-3.5" />}
+            </button>
+          ) : (
+            <span
+              className="shrink-0 size-6 group-data-[collapsible=icon]:hidden"
+              aria-hidden
+            />
+          )}
         </div>
       </SidebarFooter>
       <SidebarRail />