Refactor Main Page

.gitignore

@@ -1,10 +1,6 @@
-# IDEs
-.idea/
+.DS_Store
+/node_modules/
 
-# Hugo
-/resources/
-public/
-assets/jsconfig.json
-
-# Mac
-**/.DS_Store
+# React Router
+/.react-router/
+/build/

README.md

@@ -1,18 +1,41 @@
-# 苏黎世学联静态网站
-[https://acssz.github.io](https://acssz.github.io)
+# Material UI - React Router example in TypeScript
 
-Based on the [Research Group Theme](https://github.com/wowchemy/starter-hugo-research-group)
+## How to use
 
-The deployment workflow is set that
-- Editors change contents in the `main` branch either locally or directly in the remote repository, then push their commits
-- Any push to the `main` branch will trigger a new deployment in the `gh-pages` branch
-- Website is updated
+Download the example [or clone the repo](https://github.com/mui/material-ui):
 
-## References
+<!-- #target-branch-reference -->
 
-- [Wowchemy research group theme](https://github.com/wowchemy/starter-hugo-research-group)
-- [Site Customization](https://wowchemy.com/docs/getting-started/customization/)
-- [Wowchemy -- Create site locally](https://wowchemy.com/docs/getting-started/install-hugo-extended/)
-- [Wowchemy -- Deploy with Github Pages](https://wowchemy.com/docs/hugo-tutorials/deployment/#github-pages)
-- [First deployment notice](https://github.com/peaceiris/actions-gh-pages#%EF%B8%8F-first-deployment-with-github_token)
-- [Github pages setup](https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site)
+```bash
+curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/acssz-static
+cd acssz-static
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+
+or:
+
+<!-- #target-branch-reference -->
+
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/acssz-static)
+
+[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/acssz-static)
+
+## The idea behind the example
+
+<!-- #host-reference -->
+
+This example demonstrates how you can use Material UI with [React Router](https://reactrouter.com/) in [TypeScript](https://github.com/Microsoft/TypeScript).
+It includes `@mui/material` and its peer dependencies, including [Emotion](https://emotion.sh/docs/introduction), the default style engine in Material UI.
+
+## What's next?
+
+<!-- #host-reference -->
+
+You now have a working example project.
+You can head back to the documentation and continue by browsing the [templates](https://mui.com/material-ui/getting-started/templates/) section.

app/components/AppAppBar.tsx

@@ -0,0 +1,135 @@
+import * as React from "react";
+import { styled, alpha } from "@mui/material/styles";
+import Box from "@mui/material/Box";
+import AppBar from "@mui/material/AppBar";
+import Toolbar from "@mui/material/Toolbar";
+import Button from "@mui/material/Button";
+import IconButton from "@mui/material/IconButton";
+import Container from "@mui/material/Container";
+import Divider from "@mui/material/Divider";
+import MenuItem from "@mui/material/MenuItem";
+import Drawer from "@mui/material/Drawer";
+import MenuIcon from "@mui/icons-material/Menu";
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import ColorModeIconDropdown from "../shared-theme/ColorModeIconDropdown";
+import Icon from "./Icon.tsx";
+
+const StyledToolbar = styled(Toolbar)(({ theme }) => ({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between",
+	flexShrink: 0,
+	borderRadius: `calc(${theme.shape.borderRadius}px + 8px)`,
+	backdropFilter: "blur(24px)",
+	border: "1px solid",
+	borderColor: (theme.vars || theme).palette.divider,
+	backgroundColor: theme.vars
+		? `rgba(${theme.vars.palette.background.defaultChannel} / 0.4)`
+		: alpha(theme.palette.background.default, 0.4),
+	boxShadow: (theme.vars || theme).shadows[1],
+	padding: "8px 12px",
+}));
+
+export default function AppAppBar() {
+	const [open, setOpen] = React.useState(false);
+
+	const toggleDrawer = (newOpen: boolean) => () => {
+		setOpen(newOpen);
+	};
+
+	return (
+		<AppBar
+			position="fixed"
+			enableColorOnDark
+			sx={{
+				boxShadow: 0,
+				bgcolor: "transparent",
+				backgroundImage: "none",
+				mt: "calc(var(--template-frame-height, 0px) + 28px)",
+			}}
+		>
+			<Container maxWidth="lg">
+				<StyledToolbar variant="dense" disableGutters>
+					<Box sx={{ flexGrow: 1, display: "flex", alignItems: "center", px: 0 }}>
+						<Icon />
+						<Box sx={{ display: { xs: "none", md: "flex" } }}>
+							<Button variant="text" color="info" size="small">
+								Useful Information
+							</Button>
+							<Button variant="text" color="info" size="small">
+								Event Notification
+							</Button>
+							<Button variant="text" color="info" size="small">
+								Business Cooperation
+							</Button>
+							<Button variant="text" color="info" size="small" sx={{ minWidth: 0 }}>
+								Membership Card
+							</Button>
+							<Button variant="text" color="info" size="small" sx={{ minWidth: 0 }}>
+								Departments
+							</Button>
+							<Button variant="text" color="info" size="small" sx={{ minWidth: 0 }}>
+								About Us
+							</Button>
+						</Box>
+					</Box>
+					<Box
+						sx={{
+							display: { xs: "none", md: "flex" },
+							gap: 1,
+							alignItems: "center",
+						}}
+					>
+						<Button color="primary" variant="text" size="small">
+							Member Login
+						</Button>
+						<ColorModeIconDropdown />
+					</Box>
+					<Box sx={{ display: { xs: "flex", md: "none" }, gap: 1 }}>
+						<ColorModeIconDropdown size="medium" />
+						<IconButton aria-label="Menu button" onClick={toggleDrawer(true)}>
+							<MenuIcon />
+						</IconButton>
+						<Drawer
+							anchor="top"
+							open={open}
+							onClose={toggleDrawer(false)}
+							PaperProps={{
+								sx: {
+									top: "var(--template-frame-height, 0px)",
+								},
+							}}
+						>
+							<Box sx={{ p: 2, backgroundColor: "background.default" }}>
+								<Box
+									sx={{
+										display: "flex",
+										justifyContent: "flex-end",
+									}}
+								>
+									<IconButton onClick={toggleDrawer(false)}>
+										<CloseRoundedIcon />
+									</IconButton>
+								</Box>
+
+								<MenuItem>Useful Information</MenuItem>
+								<MenuItem>Q&A for Freshmen</MenuItem>
+								<MenuItem>Event Notification</MenuItem>
+								<MenuItem>Event Review</MenuItem>
+								<MenuItem>Business Cooperation</MenuItem>
+								<MenuItem>Membership Card</MenuItem>
+								<MenuItem>About Us</MenuItem>
+								<Divider sx={{ my: 3 }} />
+								<MenuItem>
+									<Button color="primary" variant="contained" fullWidth>
+										Admin Login
+									</Button>
+								</MenuItem>
+							</Box>
+						</Drawer>
+					</Box>
+				</StyledToolbar>
+			</Container>
+		</AppBar>
+	);
+}

app/components/Copyright.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import Typography from '@mui/material/Typography';
+import MuiLink from '@mui/material/Link';
+
+export default function Copyright() {
+  return (
+    <Typography
+      variant="body2"
+      align="center"
+      sx={{
+        color: 'text.secondary',
+      }}
+    >
+      {'Copyright © '}
+      <MuiLink color="inherit" href="https://mui.com/">
+        Your Website
+      </MuiLink>{' '}
+      {new Date().getFullYear()}.
+    </Typography>
+  );
+}