Feat: Bind event to the theme Switch #3221 (#4067)

### What problem does this PR solve?

Feat: Bind event to  the theme Switch #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/demo.tsx

@@ -1,49 +0,0 @@
-import { useTheme } from '@/components/theme-provider';
-import { Button } from '@/components/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { Moon, Sun } from 'lucide-react';
-
-export function ModeToggle() {
-  const { setTheme } = useTheme();
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="icon">
-          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-          <span className="sr-only">Toggle theme</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme('light')}>
-          Light
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme('dark')}>
-          Dark
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme('system')}>
-          System
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
-
-const Demo = () => {
-  return (
-    <div>
-      <div>
-        <ModeToggle></ModeToggle>
-      </div>
-      <Button>Destructive</Button>
-    </div>
-  );
-};
-
-export default Demo;

web/src/pages/profile-setting/index.tsx

@@ -1,14 +1,17 @@
 import { Button } from '@/components/ui/button';
+import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { ArrowLeft } from 'lucide-react';
 import { Outlet } from 'umi';
 import { SideBar } from './sidebar';
 
 export default function ProfileSetting() {
+  const { navigateToHome } = useNavigatePage();
+
   return (
     <div className="flex flex-col w-full h-screen bg-background text-foreground">
       <header className="flex items-center border-b">
         <div className="flex items-center border-r p-1.5">
-          <Button variant="ghost" size="icon">
+          <Button variant="ghost" size="icon" onClick={navigateToHome}>
             <ArrowLeft className="w-5 h-5" />
           </Button>
         </div>

web/src/pages/profile-setting/sidebar/index.tsx

@@ -1,3 +1,4 @@
+import { useTheme } from '@/components/theme-provider';
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
@@ -13,6 +14,7 @@ import {
   LogOut,
   User,
 } from 'lucide-react';
+import { useCallback } from 'react';
 import { useHandleMenuClick } from './hooks';
 
 const menuItems = [
@@ -49,35 +51,45 @@ const menuItems = [
 export function SideBar() {
   const pathName = useSecondPathName();
   const { handleMenuClick } = useHandleMenuClick();
+  const { setTheme } = useTheme();
+
+  const handleThemeChange = useCallback(
+    (checked: boolean) => {
+      setTheme(checked ? 'dark' : 'light');
+    },
+    [setTheme],
+  );
 
   return (
-    <aside className="w-[303px] bg-background border-r">
-      {menuItems.map((section, idx) => (
-        <div key={idx}>
-          <h2 className="p-6 text-sm font-semibold">{section.section}</h2>
-          {section.items.map((item, itemIdx) => {
-            const active = pathName === item.key;
-            return (
-              <Button
-                key={itemIdx}
-                variant={active ? 'secondary' : 'ghost'}
-                className={cn('w-full justify-start gap-2.5 p-6 relative')}
-                onClick={handleMenuClick(item.key)}
-              >
-                <item.icon className="w-6 h-6" />
-                <span>{item.label}</span>
-                {active && (
-                  <div className="absolute right-0 w-[5px] h-[66px] bg-primary rounded-l-xl shadow-[0_0_5.94px_#7561ff,0_0_11.88px_#7561ff,0_0_41.58px_#7561ff,0_0_83.16px_#7561ff,0_0_142.56px_#7561ff,0_0_249.48px_#7561ff]" />
-                )}
-              </Button>
-            );
-          })}
-        </div>
-      ))}
+    <aside className="w-[303px] bg-background border-r flex flex-col">
+      <div className="flex-1 overflow-auto">
+        {menuItems.map((section, idx) => (
+          <div key={idx}>
+            <h2 className="p-6 text-sm font-semibold">{section.section}</h2>
+            {section.items.map((item, itemIdx) => {
+              const active = pathName === item.key;
+              return (
+                <Button
+                  key={itemIdx}
+                  variant={active ? 'secondary' : 'ghost'}
+                  className={cn('w-full justify-start gap-2.5 p-6 relative')}
+                  onClick={handleMenuClick(item.key)}
+                >
+                  <item.icon className="w-6 h-6" />
+                  <span>{item.label}</span>
+                  {active && (
+                    <div className="absolute right-0 w-[5px] h-[66px] bg-primary rounded-l-xl shadow-[0_0_5.94px_#7561ff,0_0_11.88px_#7561ff,0_0_41.58px_#7561ff,0_0_83.16px_#7561ff,0_0_142.56px_#7561ff,0_0_249.48px_#7561ff]" />
+                  )}
+                </Button>
+              );
+            })}
+          </div>
+        ))}
+      </div>
 
       <div className="p-6 mt-auto border-t">
         <div className="flex items-center gap-2 mb-6">
-          <Switch id="dark-mode" />
+          <Switch id="dark-mode" onCheckedChange={handleThemeChange} />
           <Label htmlFor="dark-mode" className="text-sm">
             Dark
           </Label>