Styling for mobile devices

src/components/molecules/BrowserMenu/BrowserMenu.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
+import useMediaQuery from "@material-ui/core/useMediaQuery";
+import MenuIcon from "@material-ui/icons/Menu";
+import { Button, IconButton } from '@material-ui/core';
+import Link from '@material-ui/core/Link';
+import { IMenuProps } from '../../../types/IMenuProps';
+
+
+const useStyles = makeStyles((theme) => ({
+    toolbar: {
+        borderBottom: `1px solid ${theme.palette.divider}`,
+    },
+    toolbarTitle: {
+        flex: 1,
+    },
+    toolbarSecondary: {
+        justifyContent: 'space-between',
+        overflowX: 'auto',
+    },
+    toolbarLink: {
+        padding: theme.spacing(1),
+        flexShrink: 0,
+    },
+    menuButton: {
+        marginRight: theme.spacing(2)
+    },
+}));
+
+
+export default function MobileMenu(props: IMenuProps): JSX.Element {
+    const classes = useStyles();
+    const theme = useTheme();
+
+    return (<>{
+        props.sections.map(section => <>
+            <Button href={section.url}>{section.title}</Button>
+        </>)
+    }</>)
+}

src/components/molecules/Header/Header.styles.tsx

@@ -3,6 +3,8 @@ import { makeStyles } from "@material-ui/core";
 const useStyles = makeStyles((theme) => ({
   appbar: {
     backgroundColor: "rgba(0,20,43,0.0)",
+    paddingTop: theme.spacing(2),
+    paddingBottom: theme.spacing(2),
     // marginLeft: -theme.spacing(4),
     // marginRight: -theme.spacing(4),
   },

src/components/molecules/Header/Header.tsx

@@ -3,6 +3,7 @@ import { Toolbar, Typography, Link, AppBar } from "@material-ui/core";
 import useStyles from "./Header.styles";
 import Section from "../../../types/section";
 import { StaticImage } from "gatsby-plugin-image";
+import MainMenu from "../../organisms/MainMenu/MainMenu";
 
 // TODO add storybook
 
@@ -31,43 +32,8 @@ const Header: FC<HeaderProps> = ({ sections, title }) => {
             src="../../../images/codestar_logo_dark.svg"
           />
         </Typography>
-        {/* <IconButton>
-          <SearchIcon />
-        </IconButton>
-        <Button variant="outlined" size="small">
-          Sign up
-        </Button> */}
-        {sections.map((section) => (
-          <Link
-            color="inherit"
-            noWrap
-            key={section.title}
-            variant="body2"
-            href={section.url}
-            className={classes.toolbarLink}
-          >
-            {section.title}
-          </Link>
-        ))}
+        <MainMenu sections={sections}></MainMenu>
       </Toolbar>
-      {/* <Toolbar
-        component="nav"
-        variant="dense"
-        className={classes.toolbarSecondary}
-      >
-        {sections.map((section) => (
-          <Link
-            color="inherit"
-            noWrap
-            key={section.title}
-            variant="body2"
-            href={section.url}
-            className={classes.toolbarLink}
-          >
-            {section.title}
-          </Link>
-        ))}
-      </Toolbar> */}
     </AppBar>
   );
 };

src/components/molecules/Menu/Mobile/MobileMenu.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import MenuIcon from "@material-ui/icons/Menu";
+import { IconButton } from '@material-ui/core';
+
+//interfaces
+import { IMenuProps } from '../../../../types/IMenuProps';
+
+
+const useStyles = makeStyles((theme) => ({
+    menuButton: {
+        marginRight: theme.spacing(2)
+    },
+}));
+
+export interface IMobileMenuProps {
+    sections: IMenuProps[];
+}
+
+export default function MobileMenu(props: IMobileMenuProps): JSX.Element {
+    const classes = useStyles();
+
+    return (<>{
+        <IconButton
+            edge="start"
+            className={classes.menuButton}
+            color="inherit"
+            aria-label="menu"
+            //onClick={handleMenu}
+        >
+            <MenuIcon />
+        </IconButton>
+    }</>)
+}

src/components/molecules/MobileMenu/MobileMenu.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import MenuIcon from "@material-ui/icons/Menu";
+import { Button, IconButton, List, ListItem, Typography } from '@material-ui/core';
+import { StaticImage } from "gatsby-plugin-image";
+
+//interfaces
+import Section from '../../../types/section';
+import { Drawer } from '@material-ui/core';
+import { ListItemText } from '@material-ui/core';
+import useStyles from '../Header/Header.styles';
+
+export interface IMobileMenuProps {
+    sections: Section[];
+}
+
+export default function MobileMenu(props: IMobileMenuProps): JSX.Element {
+
+    const [state, setState] = React.useState(false);
+
+    const toggleDrawer = (open: boolean) => (
+        event: React.KeyboardEvent | React.MouseEvent,
+    ) => {
+        if (
+            event.type === 'keydown' &&
+            ((event as React.KeyboardEvent).key === 'Tab' ||
+                (event as React.KeyboardEvent).key === 'Shift')
+        ) {
+            return;
+        }
+
+        setState(open);
+    };
+
+    const classes = useStyles();
+
+    return (
+        <div>
+            <Drawer anchor="top" open={state} onClose={() => setState(false)}>
+                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+                    <Typography
+                        component="h2"
+                        variant="h5"
+                        color="inherit"
+                        style={{ padding: '10px' }}
+                        noWrap
+                        className={classes.toolbarTitle}
+                    >
+                        <StaticImage
+                            alt={`Mobile menu Logo`}
+                            src="../../../images/codestar_logo_dark.svg"
+                        />
+                    </Typography>
+                    <List component="nav" aria-label="secondary mailbox folders" >
+                        <>{
+                            props.sections.map(section => <>
+                                <ListItem button>
+                                    <Button href={section.url}>{section.title}</Button>
+                                </ListItem>
+                            </>)
+                        }</>
+
+                    </List>
+                </div>
+            </Drawer>
+            <IconButton
+                key="iconButton"
+                edge="start"
+                color="inherit"
+                aria-label="menu"
+                onClick={toggleDrawer(true)}
+            >
+                <MenuIcon key="menuIButton" />
+            </IconButton>
+        </div>
+    )
+}

src/components/organisms/MainMenu/MainMenu.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useTheme } from '@material-ui/core/styles';
+import useMediaQuery from "@material-ui/core/useMediaQuery";
+
+// local imports
+import BrowserMenu from '../../molecules/BrowserMenu/BrowserMenu';
+import MobileMenu from '../../molecules/MobileMenu/MobileMenu';
+
+//interfaces
+import { IMenuProps } from '../../../types/IMenuProps';
+
+export default function MainMenu(props: IMenuProps): JSX.Element {
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down("xs"));
+
+    return (<>
+        {
+            isMobile ?
+                <MobileMenu sections={props.sections} />
+                :
+                <BrowserMenu sections={props.sections} />
+        }
+    </>)
+}

src/types/IMenuProps.tsx

@@ -0,0 +1,6 @@
+import Section from './section';
+
+
+export interface IMenuProps {
+    sections: Section[];
+}