Commit 968d25ec authored by Nawasan Wisitsingkhon's avatar Nawasan Wisitsingkhon

remove sidebar;

create context to check login and keep user info;
parent e9153812
import * as React from "react";
import { useContext } from "react";
import { styled, alpha } from "@mui/material/styles";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
......@@ -13,19 +14,16 @@ import MenuIcon from "@mui/icons-material/Menu";
import SearchIcon from "@mui/icons-material/Search";
import AccountCircle from "@mui/icons-material/AccountCircle";
import MailIcon from "@mui/icons-material/Mail";
import NotificationsIcon from "@mui/icons-material/Notifications";
import MoreIcon from "@mui/icons-material/MoreVert";
import { Divider } from "@mui/material";
import List from "@mui/material/List";
import { ListItem } from "@mui/material";
import { ListItemButton } from "@mui/material";
import { ListItemIcon } from "@mui/material";
import PropTypes from "prop-types";
import CssBaseline from "@mui/material/CssBaseline";
import Drawer from "@mui/material/Drawer";
import InboxIcon from "@mui/icons-material/MoveToInbox";
import ListItemText from "@mui/material/ListItemText";
import ShoppingCart from "@mui/icons-material/ShoppingCart";
import { UserContext } from "@/pages/_app";
import Link from "next/link";
const Search = styled("div")(({ theme }) => ({
position: "relative",
......@@ -73,7 +71,7 @@ const drawer = (
<Divider />
<List>
{["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
<ListItem key={text} disablePadding>
<ListItem key={index} disablePadding>
<ListItemButton>
<ListItemIcon>
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
......@@ -88,7 +86,7 @@ const drawer = (
);
function Navbar(props) {
const drawerWidth = props.drawerWidth ?? 200;
const user = useContext(UserContext);
const { window } = props;
const [anchorEl, setAnchorEl] = React.useState(null);
const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState(null);
......@@ -142,13 +140,18 @@ function Navbar(props) {
</Menu>
);
const MenuList = [
const MenuList = user?.value?.name
? [
{
id: 0,
label: "ตระกร้า",
link: '/cart',
link: "/cart",
element: (
<IconButton size="large" aria-label="show 4 new mails" color="inherit">
<IconButton
size="large"
aria-label="show 4 new mails"
color="inherit"
>
<Badge badgeContent={4} color="error">
<ShoppingCart />
</Badge>
......@@ -172,6 +175,14 @@ function Navbar(props) {
</IconButton>
),
},
]
: [
{
id: 0,
lable: "Login",
element: "Login",
link: "/login",
},
];
const mobileMenuId = "primary-search-account-menu-mobile";
......@@ -191,36 +202,23 @@ function Navbar(props) {
open={isMobileMenuOpen}
onClose={handleMobileMenuClose}
>
{MenuList.map((menu) => (
<>
{MenuList.map((menu, idx) => (
<span key={idx}>
<Link className="text-black no-underline" href={menu.link}>
<MenuItem>
{menu.element}
<p>{menu.label}</p>
</MenuItem>
</>
</Link>
</span>
))}
</Menu>
);
return (
<>
<AppBar
position="fixed"
sx={{
width: { md: `calc(100% - ${drawerWidth}px)` },
ml: { md: `${drawerWidth}px` },
}}
>
<AppBar position="fixed">
<Toolbar>
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="open drawer"
sx={{ mr: 2, display: { md: "none" } }}
>
<MenuIcon onClick={handleDrawerToggle} />
</IconButton>
<Typography
variant="h6"
noWrap
......@@ -240,7 +238,11 @@ function Navbar(props) {
</Search>
<Box sx={{ flexGrow: 1 }} />
<Box sx={{ display: { xs: "none", md: "flex" } }}>
{MenuList.map((menu) => menu.element)}
{MenuList.map((menu, idx) => (
<Link className="text-white" key={idx} href={menu.link}>
<span>{menu.element}</span>
</Link>
))}
</Box>
<Box sx={{ display: { xs: "flex", md: "none" } }}>
<IconButton
......@@ -251,56 +253,18 @@ function Navbar(props) {
onClick={handleMobileMenuOpen}
color="inherit"
>
<MoreIcon />
<MenuIcon />
</IconButton>
</Box>
</Toolbar>
</AppBar>
{renderMobileMenu}
{renderMenu}
<Box
component="nav"
sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }}
aria-label="mailbox folders"
>
{/* The implementation can be swapped with js to avoid SEO duplication of links. */}
<Drawer
container={container}
variant="temporary"
open={mobileOpen}
onClose={handleDrawerToggle}
ModalProps={{
keepMounted: true, // Better open performance on mobile.
}}
sx={{
display: { xs: "block", sm: "block", md: "none" },
"& .MuiDrawer-paper": {
boxSizing: "border-box",
width: drawerWidth,
},
}}
>
{drawer}
</Drawer>
<Drawer
variant="permanent"
sx={{
display: { xs: "none", md: "block" },
"& .MuiDrawer-paper": {
boxSizing: "border-box",
width: drawerWidth,
},
}}
open
>
{drawer}
</Drawer>
</Box>
</>
);
}
Navbar.PropTypes = {
window: PropTypes.func,
};
// Navbar.PropTypes = {
// window: PropTypes.func,
// };
export default Navbar;
import React from "react";
import Navbar from "../Navbar";
import { Box } from "@mui/material";
import { Toolbar } from "@mui/material";
export default function UserLayout({ children }) {
const drawerWidth = 200;
return (
<>
<Box sx={{ display: "flex" }}>
<Navbar drawerWidth={drawerWidth} />
<Navbar />
{/* <Sidebar /> */}
<Box
component="main"
sx={{
flexGrow: 1,
p: 3,
width: { sm: `calc(100% - ${drawerWidth}px)` },
}}
>
<Toolbar />
{children}
</Box>
</Box>
......
import Navbar from "@/components/Navbar";
import "@/styles/globals.css";
import "@fontsource/roboto/300.css";
import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css";
import "@fontsource/roboto/700.css";
import { createContext, useState, useEffect } from "react";
import UserLayout from "@/components/layout/UserLayout";
// axios.defaults.baseURL = ""
export const UserContext = createContext(null);
export default function App({ Component, pageProps }) {
const [user, setUser] = useState({ name: "Nawasan" });
useEffect(() => {
setTimeout(() => {
setUser({ name: "" });
}, 3000);
});
return (
<>
<UserContext.Provider value={{ value: user, set: setUser }}>
<UserLayout>
<Component {...pageProps} />
</UserLayout>
</>
</UserContext.Provider>
);
}
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
import React from "react";
export default function Error() {
return <div>Error</div>;
}
import userCookie from "@/components/lib/user";
import { Box, TextField, Toolbar } from "@mui/material";
import React from "react";
import {useContext} from 'react'
import { UserContext } from "./_app";
export default function Login() {
let user = new userCookie();
if (user.isLogin())
const user = useContext(UserContext)
if (true)
return (
<div>
<h3>คุณเข้าสู่ระบบแล้ว</h3>
<h3>{user.value.name}</h3>
</div>
);
......@@ -20,7 +23,6 @@ export default function Login() {
"& .MuiTextField-root": { m: 1, width: "25ch" },
}}
>
<Toolbar />
<TextField label="ชื่อ" type="text" />
</Box>
</main>
......
......@@ -7,3 +7,8 @@ body {
padding: 0;
box-sizing: border-box;
}
header a {
color: white;
text-decoration: none;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment