ImageUploader

commit 20bebda5a6a8e59abd0f9e1fa9cfaefaee58c8a9
parent cbe076818bf6296546bec8f2c98bdb2b8c1c44fa
Author: minerva-jupitr <ryouturn@gmail.com>
Date:   Fri, 12 Jul 2024 12:52:12 +0900

add appbar and drawer

Diffstat:
M
image-uploader/bun.lockb
 | 
0

M
image-uploader/package.json
 | 
1
+
M
image-uploader/src/app/page.tsx
 | 
66
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---

3 files changed, 64 insertions(+), 3 deletions(-)
diff --git a/image-uploader/bun.lockb b/image-uploader/bun.lockb
Binary files differ.
diff --git a/image-uploader/package.json b/image-uploader/package.json
@@ -12,6 +12,7 @@
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@mui/icons-material": "^5.16.1",
     "@mui/material": "^5.16.1",
     "@mui/material-nextjs": "^5.16.1",
     "next": "14.2.5",
diff --git a/image-uploader/src/app/page.tsx b/image-uploader/src/app/page.tsx
@@ -1,15 +1,28 @@
 'use client'
 import FileUploader from "./fileUploadForm";
-import { useDropzone } from "react-dropzone";
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import Box from '@mui/material/Box';
+import * as React from 'react';
+import Drawer from '@mui/material/Drawer';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import List from '@mui/material/List';
+import Typography from '@mui/material/Typography';
+import Divider from '@mui/material/Divider';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import InboxIcon from '@mui/icons-material/MoveToInbox';
+import MailIcon from '@mui/icons-material/Mail';
 
 const darkTheme = createTheme({
   palette: {
     mode: 'dark',
   },
 });
+const drawerWidth = 240;
 
 
 export default function Home() {
@@ -20,9 +33,54 @@ export default function Home() {
     <ThemeProvider theme={darkTheme}>
       <Box sx={{ display: 'flex' }}>
         <CssBaseline />
-        <main>
+        
+        <AppBar position="fixed" sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}>
+          <Toolbar>
+            <Typography variant="h4" noWrap component="div">
+              Image Uploader
+            </Typography>
+          </Toolbar>
+        </AppBar>
+        <Drawer
+          variant="permanent"
+          sx={{
+            width: drawerWidth,
+            flexShrink: 0,
+            [`& .MuiDrawer-paper`]: { width: drawerWidth, boxSizing: 'border-box' },
+          }}
+        >
+          <Toolbar />
+          <Box sx={{ overflow: 'auto' }}>
+            <List>
+              {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
+                <ListItem key={text} disablePadding>
+                  <ListItemButton>
+                    <ListItemIcon>
+                      {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
+                    </ListItemIcon>
+                    <ListItemText primary={text} />
+                  </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>
+              ))}
+            </List>
+          </Box>
+        </Drawer>
+        <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
+          <Toolbar />
           <header>
-            <h1>Image Uploader</h1>
             <p>This app created for uploading image</p>
           </header>
           <div>
@@ -45,6 +103,8 @@ export default function Home() {
               <button>Copy Clipboard</button>
             </div>
           </div>
+        </Box>
+        <main>
         </main>
       </Box>
     </ThemeProvider>