Ilgrim/compendium-arcana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implementing Navbar and side menu.

Browse Source
This commit is contained in:
Ilgrim 2024-11-04 18:06:46 +01:00
parent 25a059461e
commit ed510124d1
3 changed files with 130 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -4,7 +4,7 @@
"version": "0.0.0", "version": "0.0.0",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite --host",
"build": "tsc -b && vite build", "build": "tsc -b && vite build",
"lint": "eslint .", "lint": "eslint .",
"preview": "vite preview" "preview": "vite preview"

63
src/App.tsx
View File

@ -1,15 +1,54 @@
import { useState } from 'react' import { Drawer, Grid2, List, ListItem, ListItemText } from "@mui/material";
import './App.css' import { Link, Outlet } from "react-router-dom";
import { Outlet } from 'react-router-dom'
function App() { export default function App () {
const [count, setCount] = useState(0) return(
<>
<Grid2 container spacing={2}>
<Grid2 size={2}>
<div className="App">
<header className="App-header">
<img className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<div className="menu">
<ul>
<li> <Link to="/">Home</Link> </li>
<li> <Link to="rules">Reglamentos</Link> </li>
<li> <Link to="about">About</Link> </li>
</ul>
</div>
</div>
{/* <Drawer>
<List>
<ListItem>
<ListItemText>
<Link to="/">Home</Link>
</ListItemText>
</ListItem>
<ListItem>
<ListItemText>
<Link to="/about">About</Link>
</ListItemText>
</ListItem>
<ListItem>
<ListItemText>
<Link to="/contact">Contact</Link>
</ListItemText>
</ListItem>
<ListItem >
<ListItemText>
<Link to="/about">Faq</Link>
</ListItemText>
</ListItem>
</List>
</Drawer> */}
</Grid2>
<Grid2 size={8}>
<Outlet />
</Grid2>
</Grid2>
return ( </>
<> )
<Outlet />
</>
)
} }
export default App

86
src/components/layout/Layout.tsx
View File

@ -1,16 +1,82 @@
import { Box, AppBar, Toolbar, IconButton, Typography, Button, Grid } from "@mui/material"; import { AppBar, Box, Button, Divider, Drawer, Grid2, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Toolbar, Typography } from "@mui/material";
import { Link, Outlet } from "react-router-dom";
import MenuIcon from '@mui/icons-material/Menu'; import MenuIcon from '@mui/icons-material/Menu';
import { Outlet } from "react-router-dom"; import React from "react";
import InboxIcon from '@mui/icons-material/MoveToInbox';
import MailIcon from '@mui/icons-material/Mail';
export default function Layout () { export default function Layout () {
// const classes = useStyles();
// const theme = useTheme();
const [open, setOpen] = React.useState(false);
const onMenuClick = (event: MouseEvent): void => {
const newState = !open;
console.log(`>> State: ${newState}`);
setOpen(newState)
}
const DrawerList = (
<Box sx={{ width: 250 }} role="presentation" onClick={onMenuClick}>
<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>
);
return( return(
<Grid container> <Grid2 container>
<nav> <Box sx={{ flexGrow: 12 }}>
<ul> <AppBar position="fixed">
<li>Reglamento</li> <Toolbar>
<li>Bestiario</li> <IconButton
</ul> size="large"
</nav> edge="start"
</Grid> color="inherit"
aria-label="menu"
sx={{ mr: 2 }}
onClick={onMenuClick}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
<Link to='/'>Compendium Arcana</Link>
</Typography>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
<Drawer variant="persistent" anchor="left" open={open} onClose={onMenuClick}>
{DrawerList}
</Drawer>
</Box>
<Box sx={{ flexGrow: 12 }}>
<Outlet />
</Box>
</Grid2>
) )
} }