pengjunjie/ragflow
1
0
Fork 1
mirror of https://github.com/infiniflow/ragflow.git synced 2025-12-25 16:26:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
### 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)
This commit is contained in:
balibabu
2024-12-17 16:32:17 +08:00
committed by GitHub
parent 000cd6d615
commit e8b4e8b3d7
7 changed files with 73 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web/src/pages/profile-setting/index.tsx
View File

@ -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>

60
web/src/pages/profile-setting/sidebar/index.tsx
View File

@ -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>