Merge pull request #3 from KNU-AEYE/2-page-navigation

2-page-navigation

aeye/app/(nav)/cams/page.tsx

@@ -0,0 +1,3 @@
+export default function Cams() {
+	return <div></div>;
+}

aeye/app/(nav)/layout.tsx

@@ -0,0 +1,14 @@
+import Navbar from '@/app/components/Navbar'
+
+export default function NavLayout({
+	children,
+}: {
+	children: React.ReactNode
+}) {
+	return (
+		<>
+			<Navbar />
+			<div>{children}</div>
+		</>
+	);
+}

aeye/app/(nav)/my/page.tsx

@@ -0,0 +1,5 @@
+export default function() {
+	return (
+		<div>my page</div>
+	);
+}

aeye/app/components/Navbar.tsx

@@ -0,0 +1,112 @@
+'use client'
+
+import React, { useState } from "react";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { useRouter } from 'next/navigation';
+
+import {
+	List,
+	ListItem,
+	ListItemText,
+	Collapse,
+	Typography,
+	AppBar,
+	Toolbar,
+	Button,
+} from "@mui/material";
+import ExpandLess from "@mui/icons-material/ExpandLess";
+import ExpandMore from "@mui/icons-material/ExpandMore";
+import MenuIcon from '@mui/icons-material/Menu';
+
+const Navbar: React.FC = () => {
+	const small = useMediaQuery("(max-width:600px)");
+	const full = useMediaQuery("(min-width:600px)");
+	const router = useRouter();
+
+	const [open, setOpen] = useState<boolean>(false);
+
+	const handleClick = (): void => {
+		setOpen(!open);
+	};
+
+	return (
+		<div>
+			<AppBar position="static" style={{ backgroundColor: '#65d586' }}>
+				<Toolbar variant="dense">
+					{small && (
+						<>
+							<List>
+								<ListItem button>
+									<Button
+										onClick={handleClick}
+									>
+										<MenuIcon />
+										{open ? (
+											<ExpandLess />
+										) : (
+											<ExpandMore />
+										)}
+									</Button>
+									<Typography
+										variant="h6"
+										color="inherit"
+										onClick={() => {
+											console.log(
+												"logo clicked"
+											);
+											setOpen(false);
+										}}
+									>
+										AEYE
+									</Typography>
+								</ListItem>
+								<Collapse
+									in={open}
+									timeout="auto"
+									unmountOnExit
+								>
+									<List
+										component="div"
+										disablePadding
+									>
+										<ListItem button>
+											<ListItemText primary="Home" />
+										</ListItem>
+										<ListItem button>
+											<ListItemText primary="About" />
+										</ListItem>
+										<ListItem button>
+											<ListItemText primary="Contact" />
+										</ListItem>
+									</List>
+								</Collapse>
+							</List>
+						</>
+					)}
+
+					{full && (
+						<>
+							<Typography
+								variant="h6"
+								color="inherit"
+							>
+								AEYE
+							</Typography>
+							<Button color="inherit" onClick={() => router.push('/home')}>
+								Home
+							</Button>
+							<Button color="inherit" onClick={() => router.push('/cams')}>
+								Cams
+							</Button>
+							<Button color="inherit" onClick={() => router.push('/my')}>
+								My
+							</Button>
+						</>
+					)}
+				</Toolbar>
+			</AppBar>
+		</div>
+	);
+}
+
+export default Navbar;