Skip to content

Commit cde27e0

Browse files
d3georged3george
d3george
authored and
d3george
committed
refactor: nav refactor
1 parent 5bbac2b commit cde27e0

File tree

7 files changed

+94
-63
lines changed

7 files changed

+94
-63
lines changed

‎src/layouts/_common/setting-button.tsx

+27-2
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,15 @@ export default function SettingButton() {
3030
useThemeToken();
3131

3232
const settings = useSettings();
33-
const { themeMode, themeColorPresets, themeLayout, themeStretch, breadCrumb, multiTab } =
34-
settings;
33+
const {
34+
themeMode,
35+
themeColorPresets,
36+
themeLayout,
37+
themeStretch,
38+
breadCrumb,
39+
multiTab,
40+
darkSidebar,
41+
} = settings;
3542
const { setSettings } = useSettingActions();
3643

3744
const setThemeMode = (themeMode: ThemeMode) => {
@@ -76,6 +83,13 @@ export default function SettingButton() {
7683
});
7784
};
7885

86+
const setDarkSidebar = (checked: boolean) => {
87+
setSettings({
88+
...settings,
89+
darkSidebar: checked,
90+
});
91+
};
92+
7993
const style: CSSProperties = {
8094
backdropFilter: 'blur(20px)',
8195
backgroundImage: `url("${CyanBlur}"), url("${RedBlur}")`,
@@ -402,6 +416,17 @@ export default function SettingButton() {
402416
onChange={(checked) => setMultiTab(checked)}
403417
/>
404418
</div>
419+
<div
420+
className="flex items-center justify-between"
421+
style={{ color: colorTextTertiary }}
422+
>
423+
<div>Dark Sidebar</div>
424+
<Switch
425+
size="small"
426+
checked={darkSidebar}
427+
onChange={(checked) => setDarkSidebar(checked)}
428+
/>
429+
</div>
405430
</div>
406431
</div>
407432
</div>

‎src/layouts/dashboard/header.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import SearchBar from '../_common/search-bar';
1515
import SettingButton from '../_common/setting-button';
1616

1717
import { NAV_COLLAPSED_WIDTH, NAV_WIDTH, HEADER_HEIGHT, OFFSET_HEADER_HEIGHT } from './config';
18-
import Nav from './nav';
18+
import Nav from './nav/nav-vertical';
1919

2020
import { ThemeLayout } from '#/enum';
2121

‎src/layouts/dashboard/index.tsx

+4-13
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import { useThemeToken } from '@/theme/hooks';
1010
import Header from './header';
1111
import Main from './main';
1212
import Nav from './nav';
13-
import NavHorizontal from './nav-horizontal';
1413

1514
import { ThemeLayout, ThemeMode } from '#/enum';
1615

@@ -38,16 +37,8 @@ function DashboardLayout() {
3837
onOffSetTop();
3938
}, [onOffSetTop]);
4039

41-
const navVertical = (
42-
<div className="z-50 hidden h-full flex-shrink-0 md:block">
43-
<Nav />
44-
</div>
45-
);
46-
47-
const nav = themeLayout === ThemeLayout.Horizontal ? <NavHorizontal /> : navVertical;
48-
4940
return (
50-
<StyleWrapper $themeMode={themeMode}>
41+
<ScrollbarStyleWrapper $themeMode={themeMode}>
5142
<ProgressBar />
5243
<div
5344
className={`flex h-screen overflow-hidden ${
@@ -62,16 +53,16 @@ function DashboardLayout() {
6253
>
6354
<Suspense fallback={<CircleLoading />}>
6455
<Header offsetTop={themeLayout === ThemeLayout.Vertical ? offsetTop : undefined} />
65-
{nav}
56+
<Nav />
6657
<Main ref={mainEl} offsetTop={offsetTop} />
6758
</Suspense>
6859
</div>
69-
</StyleWrapper>
60+
</ScrollbarStyleWrapper>
7061
);
7162
}
7263
export default DashboardLayout;
7364

74-
const StyleWrapper = styled.div<{ $themeMode?: ThemeMode }>`
65+
const ScrollbarStyleWrapper = styled.div<{ $themeMode?: ThemeMode }>`
7566
/* 设置滚动条的整体样式 */
7667
::-webkit-scrollbar {
7768
width: 8px; /* 设置滚动条宽度 */

‎src/layouts/dashboard/nav/index.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { useSettings } from '@/store/settingStore';
2+
3+
import NavHorizontal from './nav-horizontal';
4+
import NavVertical from './nav-vertical';
5+
6+
import { ThemeLayout } from '#/enum';
7+
8+
export default function Nav() {
9+
const { themeLayout } = useSettings();
10+
return themeLayout === ThemeLayout.Horizontal ? <NavHorizontal /> : <NavVertical />;
11+
}

‎src/layouts/dashboard/nav-horizontal.tsx renamed to ‎src/layouts/dashboard/nav/nav-horizontal.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { useRouteToMenuFn, usePermissionRoutes, useFlattenedRoutes } from '@/rou
66
import { menuFilter } from '@/router/utils';
77
import { useThemeToken } from '@/theme/hooks';
88

9-
import { NAV_HORIZONTAL_HEIGHT } from './config';
9+
import { NAV_HORIZONTAL_HEIGHT } from '../config';
1010

1111
export default function NavHorizontal() {
1212
const navigate = useNavigate();

‎src/layouts/dashboard/nav.tsx renamed to ‎src/layouts/dashboard/nav/nav-vertical.tsx

+48-46
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { menuFilter } from '@/router/utils';
1414
import { useSettingActions, useSettings } from '@/store/settingStore';
1515
import { useThemeToken } from '@/theme/hooks';
1616

17-
import { NAV_COLLAPSED_WIDTH, NAV_WIDTH } from './config';
17+
import { NAV_COLLAPSED_WIDTH, NAV_WIDTH } from '../config';
1818

1919
import { ThemeLayout } from '#/enum';
2020

@@ -23,7 +23,7 @@ const slideInLeft = varSlide({ distance: 10 }).inLeft;
2323
type Props = {
2424
closeSideBarDrawer?: () => void;
2525
};
26-
export default function Nav(props: Props) {
26+
export default function NavVertical(props: Props) {
2727
const navigate = useNavigate();
2828
const matches = useMatches();
2929
const { pathname } = useLocation();
@@ -113,53 +113,55 @@ export default function Nav(props: Props) {
113113
};
114114

115115
return (
116-
<div
117-
className="flex h-full flex-col"
118-
style={{
119-
width: collapsed ? NAV_COLLAPSED_WIDTH : NAV_WIDTH,
120-
borderRight: `1px dashed ${Color(colorBorder).alpha(0.6).toString()}`,
121-
}}
122-
>
123-
<div className="relative flex h-20 items-center justify-center py-4">
124-
<MotionContainer className="flex items-center">
125-
<Logo />
126-
{themeLayout !== ThemeLayout.Mini && (
127-
<m.div variants={slideInLeft}>
128-
<span className="ml-2 text-xl font-bold" style={{ color: colorPrimary }}>
129-
Slash Admin
130-
</span>
131-
</m.div>
132-
)}
133-
</MotionContainer>
134-
<button
135-
onClick={toggleCollapsed}
136-
className="absolute right-0 top-7 z-50 hidden h-6 w-6 translate-x-1/2 cursor-pointer select-none rounded-full text-center !text-gray md:block"
137-
style={{ color: colorTextBase, borderColor: colorTextBase, fontSize: 16 }}
138-
>
139-
{collapsed ? <MenuUnfoldOutlined size={20} /> : <MenuFoldOutlined size={20} />}
140-
</button>
141-
</div>
142-
143-
<Scrollbar
116+
<div className='"z-50 hidden h-full flex-shrink-0 md:block'>
117+
<div
118+
className="flex h-full flex-col"
144119
style={{
145-
height: 'calc(100vh - 70px)',
120+
width: collapsed ? NAV_COLLAPSED_WIDTH : NAV_WIDTH,
121+
borderRight: `1px dashed ${Color(colorBorder).alpha(0.6).toString()}`,
146122
}}
147123
>
148-
{/* <!-- Sidebar Menu --> */}
149-
<Menu
150-
mode={menuMode}
151-
items={menuList}
152-
className="h-full !border-none"
153-
defaultOpenKeys={openKeys}
154-
defaultSelectedKeys={[pathname]}
155-
selectedKeys={[pathname]}
156-
openKeys={openKeys}
157-
onOpenChange={onOpenChange}
158-
onClick={onClick}
159-
style={menuStyle}
160-
inlineCollapsed={collapsed}
161-
/>
162-
</Scrollbar>
124+
<div className="relative flex h-20 items-center justify-center py-4">
125+
<MotionContainer className="flex items-center">
126+
<Logo />
127+
{themeLayout !== ThemeLayout.Mini && (
128+
<m.div variants={slideInLeft}>
129+
<span className="ml-2 text-xl font-bold" style={{ color: colorPrimary }}>
130+
Slash Admin
131+
</span>
132+
</m.div>
133+
)}
134+
</MotionContainer>
135+
<button
136+
onClick={toggleCollapsed}
137+
className="absolute right-0 top-7 z-50 hidden h-6 w-6 translate-x-1/2 cursor-pointer select-none rounded-full text-center !text-gray md:block"
138+
style={{ color: colorTextBase, borderColor: colorTextBase, fontSize: 16 }}
139+
>
140+
{collapsed ? <MenuUnfoldOutlined size={20} /> : <MenuFoldOutlined size={20} />}
141+
</button>
142+
</div>
143+
144+
<Scrollbar
145+
style={{
146+
height: 'calc(100vh - 70px)',
147+
}}
148+
>
149+
{/* <!-- Sidebar Menu --> */}
150+
<Menu
151+
mode={menuMode}
152+
items={menuList}
153+
className="h-full !border-none"
154+
defaultOpenKeys={openKeys}
155+
defaultSelectedKeys={[pathname]}
156+
selectedKeys={[pathname]}
157+
openKeys={openKeys}
158+
onOpenChange={onOpenChange}
159+
onClick={onClick}
160+
style={menuStyle}
161+
inlineCollapsed={collapsed}
162+
/>
163+
</Scrollbar>
164+
</div>
163165
</div>
164166
);
165167
}

‎src/store/settingStore.ts

+2
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ type SettingsType = {
1010
themeStretch: boolean;
1111
breadCrumb: boolean;
1212
multiTab: boolean;
13+
darkSidebar: boolean;
1314
};
1415
type SettingStore = {
1516
settings: SettingsType;
@@ -30,6 +31,7 @@ const useSettingStore = create<SettingStore>()(
3031
themeStretch: false,
3132
breadCrumb: true,
3233
multiTab: true,
34+
darkSidebar: false,
3335
},
3436
actions: {
3537
setSettings: (settings) => {

0 commit comments

Comments
 (0)