diff --git a/src/frontend/GeneralLayout.tsx b/src/frontend/GeneralLayout.tsx
index b4a1b7c..c470bfd 100644
--- a/src/frontend/GeneralLayout.tsx
+++ b/src/frontend/GeneralLayout.tsx
@@ -1,10 +1,13 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
import { NavLink } from 'react-router-dom';
import styled from 'styled-components';
+import { NavigationMenu } from './components/NavigationMenu';
import { useGetMetaQuery, useGetSessionQuery } from './services/session';
import { useSelector } from './store';
+import { setDrawerShown } from './store/slices/screen';
type IsMobileProp = { isMobile: boolean };
@@ -43,16 +46,16 @@ const MobileHeader = styled.header`
export const GeneralLayout: React.FC = ({children}) => {
const { data: session } = useGetSessionQuery(undefined);
const { data: meta } = useGetMetaQuery(undefined);
- const { isMobile, title } = useSelector(state => state.screen);
+ const { isMobile, title, isDrawerShown } = useSelector(state => state.screen);
const {t} = useTranslation();
- const navLinkClassName = (isActive: boolean) => `item ${isActive ? 'active' : ''}`;
+ const dispatch = useDispatch();
return (
{isMobile && (
-
);
};
diff --git a/src/frontend/components/NavigationMenu.tsx b/src/frontend/components/NavigationMenu.tsx
new file mode 100644
index 0000000..8f84857
--- /dev/null
+++ b/src/frontend/components/NavigationMenu.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
+import { NavLink } from 'react-router-dom';
+import { useGetSessionQuery } from '../services/session';
+import { setDrawerShown } from '../store/slices/screen';
+
+const navLinkClassName = (isActive: boolean) => `item ${isActive ? 'active' : ''}`;
+
+export const NavigationMenu: React.VFC = () => {
+ const { data: session } = useGetSessionQuery(undefined);
+ const {t} = useTranslation();
+ const dispatch = useDispatch();
+
+ const onClickItem = () => {
+ dispatch(setDrawerShown(false));
+ };
+
+ return (
+ <>
+ {t('title')}
+
+
+
+
+ {t('_sidebar.dashboard')}
+
+
+
+ {t('_sidebar.tools')}
+
+
+ {t('_sidebar.missHaiAlert')}
+
+
+
+ {t('_sidebar.cropper')}
+
+
+
+ {session && {session.username}@{session.host}
}
+ {session && (
+
+
+ {t('_sidebar.accounts')}
+
+ )}
+
+
+ {t('_sidebar.settings')}
+
+
+
+ {t('_sidebar.admin')}
+
+
+
+
+ );
+};
diff --git a/src/frontend/pages/settings.tsx b/src/frontend/pages/settings.tsx
index 724adb7..db09eb3 100644
--- a/src/frontend/pages/settings.tsx
+++ b/src/frontend/pages/settings.tsx
@@ -119,8 +119,10 @@ export const SettingPage: React.VFC = () => {
diff --git a/src/frontend/store/slices/screen.ts b/src/frontend/store/slices/screen.ts
index d5bddc1..0a45ec9 100644
--- a/src/frontend/store/slices/screen.ts
+++ b/src/frontend/store/slices/screen.ts
@@ -16,6 +16,7 @@ interface ScreenState {
accounts: IUser[];
accountTokens: string[];
isMobile: boolean;
+ isDrawerShown: boolean;
}
const initialState: ScreenState = {
@@ -27,6 +28,7 @@ const initialState: ScreenState = {
accounts: [],
accountTokens: JSON.parse(localStorage.getItem(LOCALSTORAGE_KEY_ACCOUNTS) || '[]') as string[],
isMobile: false,
+ isDrawerShown: false,
};
/**
@@ -64,9 +66,10 @@ export const screenSlice = createSlice({
}),
setMobile: generateSetter('isMobile'),
setTitle: generateSetter('title'),
+ setDrawerShown: generateSetter('isDrawerShown'),
},
});
-export const { showModal, hideModal, changeTheme, changeLang, setAccounts, setMobile, setTitle } = screenSlice.actions;
+export const { showModal, hideModal, changeTheme, changeLang, setAccounts, setMobile, setTitle, setDrawerShown } = screenSlice.actions;
export default screenSlice.reducer;