feat: add tags page

src/client/app.tsx

@@ -1,7 +1,17 @@
 import React, { createContext, useEffect, useRef, useState } from 'react';
 import ReactDom from 'react-dom';
 import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
-import { Gallery, DocumentAbout, LoginPage, NotFoundPage, ProfilePage, DifferencePage, SettingPage, ReaderPage } from './page/mod';
+import {
+    Gallery,
+    DocumentAbout,
+    LoginPage,
+    NotFoundPage,
+    ProfilePage,
+    DifferencePage,
+    SettingPage,
+    ReaderPage,
+    TagsPage
+} from './page/mod';
 import { getInitialValue, UserContext } from './state';
 import { ThemeProvider, createTheme } from '@mui/material';
 
@@ -38,6 +48,7 @@ const App = () => {
                         <Route path="/profile" element={<ProfilePage />}></Route>
                         <Route path="/difference" element={<DifferencePage />}></Route>
                         <Route path="/setting" element={<SettingPage />}></Route>
+                        <Route path="/tags" element={<TagsPage />}></Route>
                         <Route path="*" element={<NotFoundPage />} />
                     </Routes>
                 </BrowserRouter>

src/client/component/headline.tsx

@@ -182,8 +182,6 @@ export const Headline = (prop: {
             <Hidden xsDown implementation="css">
                 <StyledDrawer variant='permanent' anchor='left'
                     sx={{
-                        overflowX: 'hidden',
-                        width: theme.spacing(7) + 1,
                         ...closedMixin(theme),
                         '& .MuiDrawer-paper': closedMixin(theme),
                     }}>

src/client/component/navlist.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {List, ListItem, ListItemIcon, Tooltip, ListItemText, Divider} from '@mui/material';
 import {ArrowBack as ArrowBackIcon, Settings as SettingIcon, 
     Collections as CollectionIcon, VideoLibrary as VideoIcon, Home as HomeIcon,
+    List as ListIcon,
     Folder as FolderIcon } from '@mui/icons-material';
 import {Link as RouterLink} from 'react-router-dom';
 
@@ -29,11 +30,13 @@ export const BackItem = (props:{to?:string})=>{
 export function CommonMenuList(props?:{url?:string}) {
     let url = props?.url ?? "";
     return (<NavList>
-        {url !== "" && <><BackItem /> <Divider /></>}
+        {url !== "" && <><BackItem to={url} /> <Divider /></>}
         <NavItem name="All" to="/" icon={<HomeIcon />} />
         <NavItem name="Comic" to="/search?content_type=comic" icon={<CollectionIcon />}></NavItem>
         <NavItem name="Video" to="/search?content_type=video" icon={<VideoIcon />} />
         <Divider />
+        <NavItem name="Tags" to="/tags" icon={<ListIcon/>}/>
+        <Divider />
         <NavItem name="Difference" to="/difference" icon={<FolderIcon/>}></NavItem>
         <NavItem name="Settings" to="/setting" icon={<SettingIcon />} />
     </NavList>);

src/client/page/mod.ts

@@ -4,4 +4,5 @@ export * from './login';
 export * from './404';
 export * from './profile';
 export * from './difference';
-export * from './setting';
+export * from './setting';
+export * from './tags';

src/client/page/tags.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import {Typography} from '@mui/material';
+
+import { Headline, CommonMenuList } from '../component/mod';
+
+export const TagsPage = ()=>{
+    const menu = CommonMenuList();
+    return <Headline menu={menu}>
+        <Typography variant='h2'>Tags</Typography>
+    </Headline>
+};

src/server.ts

@@ -116,6 +116,7 @@ class ServerApplication{
         serveindex('/profile');
         serveindex('/difference');
         serveindex('/setting');
+        serveindex('/tags');
     }
     private serve_static_file(router: Router){
         const static_file_server = (path:string,type:string) => {