Feat/navbar

src/components/navbar.tsx

@@ -0,0 +1,162 @@
+import * as React from "react";
+import { withPrefix } from "gatsby";
+
+import {
+	AppBar,
+	Container,
+	Menu,
+	Toolbar,
+	Box,
+	MenuItem,
+	Typography,
+	Button,
+	IconButton,
+	Divider,
+	List,
+	CssBaseline,
+	Drawer,
+	ListItem,
+	ListItemText,
+	ListItemButton,
+} from "@mui/material";
+import MenuIcon from "@mui/icons-material/Menu";
+
+type PageEntry = {
+	name: string;
+	link: string;
+};
+
+const entries: PageEntry[] = [
+	{
+		name: "Home",
+		link: "",
+	},
+	{
+		name: "Team",
+		link: "team",
+	},
+];
+
+type LogoProps = {
+	style?: object;
+};
+
+const Logo = (props: LogoProps) => {
+	return (
+		<>
+			{/**
+			 * GENOSWITCH logo
+			 *
+			 * color: style prop does not work on SVGs normally.
+			 *
+			 * CSS Filter generator used to generate the filter for hex code #77d9dd (light blue)
+			 * https://codepen.io/sosuke/pen/Pjoqqp, https://stackoverflow.com/a/53336754
+			 */}
+			<img
+				style={{
+					maxWidth: 250,
+					...props.style,
+					filter:
+						"invert(92%) sepia(65%) saturate(1099%) hue-rotate(157deg) brightness(92%) contrast(87%)",
+				}}
+				src={"https://static.igem.wiki/teams/4642/wiki/logos/project/black.svg"}
+			/>
+		</>
+	);
+};
+
+type DrawerProps = {
+	handleDrawerToggle: Function;
+};
+
+const DrawerContents = (props: DrawerProps) => {
+	return (
+		<Box onClick={props.handleDrawerToggle} sx={{ textAlign: "center" }}>
+			<Logo style={{ padding: 16 }} />
+			<List>
+				{entries.map((entry: PageEntry) => (
+					<ListItem key={entry.name} disablePadding>
+						<ListItemButton sx={{ textAlign: "center" }} href={withPrefix(entry.link)}>
+							<ListItemText primary={entry.name} />
+						</ListItemButton>
+					</ListItem>
+				))}
+			</List>
+		</Box>
+	);
+};
+
+const drawerWidth = 240;
+
+const NavBar = () => {
+	const [mobileOpen, setMobileOpen] = React.useState(false);
+	const handleDrawerToggle = () => {
+		setMobileOpen(prevState => !prevState);
+	};
+
+	return (
+		<Box sx={{ display: "flex" }}>
+			<CssBaseline />
+			<AppBar component="nav" position="static" sx={{ backgroundColor: "#0a1628" }}>
+				<Toolbar>
+					{/** Small Display: Drawer Button */}
+					<IconButton
+						color="inherit"
+						aria-label="open drawer"
+						edge="start"
+						onClick={handleDrawerToggle}
+						sx={{ mr: 2, display: { sm: "none" } }}
+					>
+						<MenuIcon htmlColor="#77d9dd" />
+					</IconButton>
+
+					{/** Large Display: Left of screen (filled except for btns) */}
+					{/** JC: changed display: {xs: 'none' to 'block' } so it displays on xs screens. */}
+					<Box sx={{ flexGrow: 1, display: { xs: "block", sm: "block" } }}>
+						<Logo />
+					</Box>
+
+					{/** Large Display: Buttons */}
+					<Box sx={{ display: { xs: "none", sm: "block" } }}>
+						{entries.map((entry: PageEntry) => (
+							<Button key={entry.name} sx={{ color: "#77d9dd" }} href={withPrefix(entry.link)}>
+								{" "}
+								{/** fff appears to be shorthand for ffffff */}
+								{entry.name}
+							</Button>
+						))}
+					</Box>
+				</Toolbar>
+			</AppBar>
+			{/** BOX FOR DRAWER?? */}
+			<Box component="nav">
+				<Drawer
+					//container={container}
+					variant="temporary"
+					open={mobileOpen}
+					onClose={handleDrawerToggle}
+					ModalProps={{
+						keepMounted: true, // Better open performance on mobile.
+					}}
+					sx={{
+						display: { xs: "block", sm: "none" },
+						"& .MuiDrawer-paper": {
+							// Styles for the paper component inside Drawer
+							// color is the text color
+
+							boxSizing: "border-box",
+							width: drawerWidth,
+							backgroundColor: "#0a1628",
+							color: "#77d9dd",
+						},
+					}}
+				>
+					{/** Drawer contents component (to make the code cleaner)*/}
+					<DrawerContents handleDrawerToggle={handleDrawerToggle} />
+				</Drawer>
+			</Box>
+		</Box>
+	);
+};
+
+export default NavBar;

src/pages/team.tsx

@@ -29,6 +29,7 @@ import { FilterChip, FilterChipEntry } from "../types/team/filterChip";
 
 import capitalizeWords from "../capitalizeWords";
 import teamEntryFilter from "../filters/teamEntryFilter";
+import Navbar from "../components/navbar";
 import FilterMenu from "../components/team/filterMenu";
 
 // TypeScript type def for the component state
@@ -216,6 +217,7 @@ export default class TeamPage extends React.PureComponent<
 			console.log(this.muiPaletteOptions);
 			return (
 				<ThemeProvider theme={this.muiTheme!}>
+					<Navbar />
 					{/**
 					 * Search bar
 					 * To match the entries, we pad the top and left of the containing div by 16px.