✨ Landing page

components/AppShell.tsx

@@ -64,7 +64,6 @@ const AppMain = styled("main", { shouldForwardProp: (prop) => prop !== "open" })
 
   return ({
     flexGrow: 1,
-    padding: theme.spacing(3),
     transition: theme.transitions.create("margin", {
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.leavingScreen
@@ -92,19 +91,19 @@ export default function AppShell({ children }: {
 
   useEffect(() => {
     documentWindow = window;
-  })
+  });
 
   return (
-    <Box sx={{ display: "flex" }}>
+    <>
       <HideOnScroll window={() => documentWindow}>
-        <ShellAppBar open={open}>
-          <Toolbar>
+        <ShellAppBar open={open} position="fixed">
+          <Toolbar sx={{ height: 64 }}>
             <IconButton
               size="large"
               edge="start"
               color="inherit"
               aria-label="menu"
-              sx={{ mr: 2 }}
+              sx={{ ml: isMobile ? 0.5 : 0, mr: 2 }}
             >
               <Image src="smartsheep.svg" alt="Logo" width={32} height={32} />
             </IconButton>
@@ -127,12 +126,15 @@ export default function AppShell({ children }: {
         </ShellAppBar>
       </HideOnScroll>
 
-      <AppMain open={open}>
-        <AppNavigationHeader />
-        {children}
-      </AppMain>
+      <Box sx={{ display: "flex" }}>
+        <AppMain open={open}>
+          <AppNavigationHeader />
 
-      <NavigationDrawer open={open} onClose={() => setOpen(false)} />
-    </Box>
+          {children}
+        </AppMain>
+
+        <NavigationDrawer open={open} onClose={() => setOpen(false)} />
+      </Box>
+    </>
   );
 }

components/NavigationDrawer.tsx

@@ -18,14 +18,27 @@ import {
   useMediaQuery
 } from "@mui/material";
 import { theme } from "@/app/theme";
+import { ReactNode } from "react";
+import HomeIcon from "@mui/icons-material/Home";
+import Link from "next/link";
+
+export interface NavigationItem {
+  icon: ReactNode;
+  title: string;
+  link: string;
+}
 
 export const DRAWER_WIDTH = 320;
+export const NAVIGATION_ITEMS: NavigationItem[] = [
+  { icon: <HomeIcon />, title: "首页", link: "/" }
+];
 
 export const AppNavigationHeader = styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   padding: theme.spacing(0, 1),
   justifyContent: "flex-start",
+  height: 64,
   ...theme.mixins.toolbar
 }));
 
@@ -45,28 +58,13 @@ export function AppNavigation({ showClose, onClose }: {
       </AppNavigationHeader>
       <Divider />
       <List>
-        {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
-          <ListItem key={text} disablePadding>
+        {NAVIGATION_ITEMS.map((item, idx) => (
+          <Link key={idx} href={item.link} passHref>
             <ListItemButton>
-              <ListItemIcon>
-                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
-              </ListItemIcon>
-              <ListItemText primary={text} />
+              <ListItemIcon>{item.icon}</ListItemIcon>
+              <ListItemText primary={item.title} />
             </ListItemButton>
-          </ListItem>
-        ))}
-      </List>
-      <Divider />
-      <List>
-        {["All mail", "Trash", "Spam"].map((text, index) => (
-          <ListItem key={text} disablePadding>
-            <ListItemButton>
-              <ListItemIcon>
-                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
-              </ListItemIcon>
-              <ListItemText primary={text} />
-            </ListItemButton>
-          </ListItem>
+          </Link>
         ))}
       </List>
     </>