Updated public routes

src/App/Components/Lists/Drawer/Drawer.js

 import List from "@material-ui/core/List";
 import ListSubheader from "@material-ui/core/ListSubheader";
 import { makeStyles, useTheme } from "@material-ui/core/styles";
+import PropTypes from "prop-types";
 import React from "react";
 
-import Link from "./Link";
 import DropDown from "./DropDown";
-import PropTypes from "prop-types";
+import Link from "./Link";
 
 const useStyles = makeStyles(theme => ({
     root: {

src/App/Components/PageLayout/Burger.js

+import makeStyles from "@material-ui/core/styles/makeStyles";
+import PropTypes from "prop-types";
+import IconButton from "@material-ui/core/IconButton";
+import clsx from "clsx";
+import MenuIcon from "@material-ui/icons/Menu";
+import MenuOpenIcon from "@material-ui/icons/MenuOpen";
+import React from "react";
+
+
+const useStyles = makeStyles(theme=>({
+
+}));
+
+const Burger = ({ open, onClick }) => {
+    const classes = useStyles();
+    return (
+        <IconButton
+            color={"inherit"}
+            onClick={onClick}
+            edge={"start"}
+        >
+            { open ? <MenuOpenIcon fontSize={"large"}/> : <MenuIcon fontSize={"large"}/> }
+        </IconButton>
+    );
+};
+
+Burger.propTypes = {
+    open: PropTypes.bool.isRequired,
+    onClick: PropTypes.func.isRequired
+};
+
+export default Burger;
\ No newline at end of file

src/App/Components/PageLayout/PageLayout.js

@@ -8,31 +8,38 @@ import makeStyles from "@material-ui/core/styles/makeStyles";
 import useTheme from "@material-ui/core/styles/useTheme";
 import Toolbar from "@material-ui/core/Toolbar";
 import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
-import MenuIcon from "@material-ui/icons/Menu";
+import MenuOpenIcon from "@material-ui/icons/MenuOpen";
 import MoreVertIcon from "@material-ui/icons/MoreVert";
 import { AlertHandler } from "App/Components/AlertHandler";
 import clsx from "clsx";
 import PropTypes from "prop-types";
-import React, { useState } from "react";
+import React, {useEffect, useState} from "react";
 import { SizeMe } from "react-sizeme";
+import useMediaQuery from "@material-ui/core/useMediaQuery";
 
 import { useAlertHandler } from "../../Contexts/AlertHandler";
+import {useAuth} from "../../Contexts/Authentication";
+import LocaleSwitch from "../Forms/LocaleSwitch";
 import ThemeSwitch from "../Forms/ThemeSwitch";
+import Burger from "./Burger";
 import AvatarMenu from "./Menu/AvatarMenu";
 import NotificationMenu from "./Menu/NotificationMenu";
-import LocaleSwitch from "../Forms/LocaleSwitch";
 
 const drawerWidth = 240;
 
 const styles = theme => ({
     root: {
         display: "flex",
+        // overflow: "auto",
+        // msOverflowStyle: "none",
+        // scrollbarWidth: "none"
     },
     appBar: {
         transition: theme.transitions.create(["margin", "width"], {
             easing: theme.transitions.easing.sharp,
             duration: theme.transitions.duration.leavingScreen,
         }),
+        zIndex: theme.zIndex.drawer + 1
     },
     appBarShift: {
         width: `calc(100% - ${drawerWidth}px)`,
@@ -61,6 +68,7 @@ const styles = theme => ({
         padding: theme.spacing(0, 1),
         ...theme.mixins.toolbar,
         justifyContent: "flex-end",
+        height: 90
     },
     content: {
         width: `calc(100% - ${drawerWidth}px)`,
@@ -104,31 +112,32 @@ const useStyles = makeStyles(styles);
 const PageLayout = ({ Header, Sidebar, children}) => {
     const theme = useTheme();
     const classes = useStyles(theme);
+    const { authenticated } = useAuth();
     const alerthandler = useAlertHandler();
 
-    const [openDrawer, setOpenDrawer] = useState(true);
+    const mobile = useMediaQuery(theme.breakpoints.down("xs"));
+    const [openDrawer, setOpenDrawer] = useState(false);
 
-    const handleDrawerOpen = () => {setOpenDrawer(true);};
-    const handleDrawerClose = () => {setOpenDrawer(false);};
+    const handleDrawerClose = () => setOpenDrawer(false);
+    const toggleDrawer = () => setOpenDrawer(!openDrawer);
+
+    // Open the sidebar when logging in, close it when logging out.
+    // Only on Desktop; on mobile this behavior is disruptive.
+    useEffect(()=> {
+        if (!mobile){
+            setOpenDrawer(authenticated);
+        }
+    }, [authenticated]);
 
     return (
         <div className={classes.root}>
             <nav className={classes.drawer}>
                 <AppBar
                     position={"fixed"}
-                    className={clsx(classes.appBar, {
-                        [classes.appBarShift]: openDrawer,
-                    })}
+                    className={classes.appBar}
                 >
                     <Toolbar>
-                        <IconButton
-                            color={"inherit"}
-                            onClick={handleDrawerOpen}
-                            edge={"start"}
-                            className={clsx(classes.menuButton, openDrawer && classes.hide)}
-                        >
-                            <MenuIcon/>
-                        </IconButton>
+                        <Burger open={openDrawer} onClick={toggleDrawer}/>
                         <SizeMe>{ ({ size }) =>
                             <div style={{width: "100%"}}>
                                 <div className={classes.headerBar}>
@@ -136,7 +145,7 @@ const PageLayout = ({ Header, Sidebar, children}) => {
                                         <Header size={size}/>
                                     </div>
                                     <div className={classes.navigation}>
-                                        {/*<NotificationMenu/>*/}
+                                        { /*<NotificationMenu/>*/ }
                                         <AvatarMenu>
                                             <MoreVertIcon fontSize={"large"} />
                                         </AvatarMenu>
@@ -160,7 +169,12 @@ const PageLayout = ({ Header, Sidebar, children}) => {
                         }}
                     >
                         <div className={classes.drawerHeader}>
-                            <IconButton onClick={handleDrawerClose}>
+                            <IconButton
+                                color={"inherit"}
+                                onClick={handleDrawerClose}
+                                edge={"start"}
+                                className={clsx(classes.menuButton, openDrawer || classes.hide)}
+                            >
                                 <ChevronLeftIcon/>
                             </IconButton>
                         </div>
@@ -176,11 +190,7 @@ const PageLayout = ({ Header, Sidebar, children}) => {
                         variant={"persistent"}
                         open={openDrawer}
                     >
-                        <div className={classes.drawerHeader}>
-                            <IconButton onClick={handleDrawerClose}>
-                                <ChevronLeftIcon/>
-                            </IconButton>
-                        </div>
+                        <div className={classes.drawerHeader}/>
                         <Divider/>
                         <Sidebar/>
                     </Drawer>

src/App/Contexts/Locale.js

@@ -3,7 +3,7 @@ import { MuiPickersUtilsProvider } from "@material-ui/pickers";
 import moment from "moment";
 import PropTypes from "prop-types";
 import React, {createContext, useContext, useState} from "react";
-import "moment/locale/fr";
+import "moment/locale/nl";
 
 const LocaleContext = createContext({
     locale: "en",
@@ -15,7 +15,7 @@ export function useLocale() {
 }
 
 const LocaleProvider = ({ children }) => {
-    const [locale, setLocale] = useState("fr");
+    const [locale, setLocale] = useState("en");
     moment.locale(locale);
     console.log(locale);
 

src/App/Contexts/PageLayout.js

@@ -7,6 +7,7 @@ import AssociationHeader from "../Components/PageLayout/Header/Header";
 import AssociationBoardSideBar from "../Components/PageLayout/SideBar/AssociationBoardSideBar";
 import AssociationMemberSideBar from "../Components/PageLayout/SideBar/AssociationMemberSideBar";
 import PublicSideBar from "../Components/PageLayout/SideBar/PublicSideBar";
+import EmptySideBar from "../Components/PageLayout/SideBar/EmptySideBar";
 
 
 const PageLayoutContext = createContext({
@@ -38,7 +39,7 @@ const PageLayoutProvider = ({ children }) => {
     } else if (location.pathname.includes("/boardmember")) {
         sidebar = AssociationBoardSideBar;
     } else {
-        sidebar = PublicSideBar;
+        sidebar = EmptySideBar;
     }
 
     const contextValue = {

src/App/Pages/Profile/SharedProfile.js

+import Button from "@material-ui/core/Button";
 import Container from "@material-ui/core/Container";
 import makeStyles from "@material-ui/core/styles/makeStyles";
 import useTheme from "@material-ui/core/styles/useTheme";
 import Typography from "@material-ui/core/Typography";
 import PropTypes from "prop-types";
 import React, { useState } from "react";
-import { Button } from "reactstrap";
 
 import { Profile } from "../../Components/InfoForms/Profile";
 import Block from "../../Components/PageLayout/Content/Block";
@@ -14,6 +14,9 @@ const useStyles = makeStyles(theme=>({
     header: {
         display: "flex",
         justifyContent: "space-between"
+    },
+    button: {
+        float: "right"
     }
 }));
 
@@ -37,7 +40,13 @@ const SharedProfile = ({ preferred_profile }) => {
                             </a>
                         }
                         &nbsp;
-                        <Button style={{"float": "right"}} color={"primary"} onClick={()=>changeFormType()}>{ formType === "info" ? "Edit" : "View" }</Button>
+                        <Button
+                            color={"primary"}
+                            variant={"contained"}
+                            onClick={changeFormType}
+                        >
+                            { formType === "info" ? "Edit" : "View" }
+                        </Button>
                     </div>
                 </div>
                 <hr className={"box-title-separator"}/>

src/App/Pages/Public/FAQ.js

@@ -50,7 +50,7 @@ const FAQ = (props) => {
 
                     Please contact us in the discord or send an email to join@su.utwente.nl to ask what you can do to
                     help.
-
+                    <br/><br/>
                     The code for the project is located at https://git.snt.utwente.nl/sun. The repository `sun` has the
                     code for the backend and the repository `frontend` has the code for the frontend. Visit the wikis
                     for the respective repositories to learn more.

src/App/Pages/Search/Associations.js

@@ -54,6 +54,7 @@ export const Associations = (props) => {
                 <Block>
                     <Typography variant={"h5"}>Associations</Typography>
                     <Divider/>
+                    <br/>
                     <SearchBar
                         placeholder={"Search"}
                         value={searchTerm}