commit fa1d34a107683fcf1a938b30c2e995c8ea85f43f
parent 20bebda5a6a8e59abd0f9e1fa9cfaefaee58c8a9
Author: minerva-jupitr <ryouturn@gmail.com>
Date: Fri, 12 Jul 2024 13:39:17 +0900
add manu button
Diffstat:
1 file changed, 142 insertions(+), 62 deletions(-)
diff --git a/image-uploader/src/app/page.tsx b/image-uploader/src/app/page.tsx
@@ -1,11 +1,10 @@
'use client'
import FileUploader from "./fileUploadForm";
-import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { ThemeProvider, createTheme, styled, useTheme } 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';
@@ -16,6 +15,12 @@ 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';
+import MenuIcon from '@mui/icons-material/Menu';
+import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar';
+import IconButton from '@mui/material/IconButton';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+
const darkTheme = createTheme({
palette: {
@@ -25,87 +30,162 @@ const darkTheme = createTheme({
const drawerWidth = 240;
+const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })<{
+ open?: boolean;
+}>(({ theme, open }) => ({
+ flexGrow: 1,
+ padding: theme.spacing(3),
+ transition: theme.transitions.create('margin', {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.leavingScreen,
+ }),
+ marginLeft: `-${drawerWidth}px`,
+ ...(open && {
+ transition: theme.transitions.create('margin', {
+ easing: theme.transitions.easing.easeOut,
+ duration: theme.transitions.duration.enteringScreen,
+ }),
+ marginLeft: 0,
+ }),
+}));
+
+interface AppBarProps extends MuiAppBarProps {
+ open?: boolean;
+}
+
+const AppBar = styled(MuiAppBar, {
+ shouldForwardProp: (prop) => prop !== 'open',
+})<AppBarProps>(({ theme, open }) => ({
+ transition: theme.transitions.create(['margin', 'width'], {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.leavingScreen,
+ }),
+ ...(open && {
+ width: `calc(100% - ${drawerWidth}px)`,
+ marginLeft: `${drawerWidth}px`,
+ transition: theme.transitions.create(['margin', 'width'], {
+ easing: theme.transitions.easing.easeOut,
+ duration: theme.transitions.duration.enteringScreen,
+ }),
+ }),
+}));
+
+const DrawerHeader = styled('div')(({ theme }) => ({
+ display: 'flex',
+ alignItems: 'center',
+ padding: theme.spacing(0, 1),
+ // necessary for content to be below app bar
+ ...theme.mixins.toolbar,
+ justifyContent: 'flex-end',
+}));
+
+
export default function Home() {
- const onDrop = (files: File[]) => {
- console.log(files);
+ const theme = useTheme();
+
+ const [open, setOpen] = React.useState(false);
+
+ const handleDrawerOpen = () => {
+ setOpen(true);
};
+
+ const handleDrawerClose = () => {
+ setOpen(false);
+ };
+
return (
<ThemeProvider theme={darkTheme}>
<Box sx={{ display: 'flex' }}>
<CssBaseline />
-
- <AppBar position="fixed" sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}>
+ <AppBar position="fixed" open={open}>
<Toolbar>
- <Typography variant="h4" noWrap component="div">
- Image Uploader
+ <IconButton
+ color="inherit"
+ aria-label="open drawer"
+ onClick={handleDrawerOpen}
+ edge="start"
+ sx={{ mr: 2, ...(open && { display: 'none' }) }}
+ >
+ <MenuIcon />
+ </IconButton>
+ <Typography variant="h6" noWrap component="div">
+ Persistent drawer
</Typography>
</Toolbar>
</AppBar>
<Drawer
- variant="permanent"
sx={{
width: drawerWidth,
flexShrink: 0,
- [`& .MuiDrawer-paper`]: { width: drawerWidth, boxSizing: 'border-box' },
+ '& .MuiDrawer-paper': {
+ width: drawerWidth,
+ boxSizing: 'border-box',
+ },
}}
+ variant="persistent"
+ anchor="left"
+ open={open}
>
- <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>
+ <DrawerHeader>
+ <IconButton onClick={handleDrawerClose}>
+ {theme.direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
+ </IconButton>
+ </DrawerHeader>
+ <Divider />
+ <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>
</Drawer>
- <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
- <Toolbar />
- <header>
- <p>This app created for uploading image</p>
- </header>
- <div>
- <h3>Attention</h3>
- <p>Files posted here will be deleted after a set period of time.</p>
- </div>
- <div>
- <FileUploader/>
- </div>
- <div>
- <h4>URL</h4>
+ <Main open={open}>
+ <DrawerHeader />
+ <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
+ <header>
+ <p>This app created for uploading image</p>
+ </header>
<div>
- <h5>Pure URL</h5>
- <a href="a">a</a>
- <button>Copy Clipboard</button>
+ <h3>Attention</h3>
+ <p>Files posted here will be deleted after a set period of time.</p>
</div>
<div>
- <h5>MarkDown URL</h5>
- <a href="a">a</a>
- <button>Copy Clipboard</button>
+ <FileUploader/>
</div>
- </div>
- </Box>
- <main>
- </main>
+ <div>
+ <h4>URL</h4>
+ <div>
+ <h5>Pure URL</h5>
+ <a href="a">a</a>
+ <button>Copy Clipboard</button>
+ </div>
+ <div>
+ <h5>MarkDown URL</h5>
+ <a href="a">a</a>
+ <button>Copy Clipboard</button>
+ </div>
+ </div>
+ </Box>
+ </Main>
</Box>
</ThemeProvider>
);
