Use drawer to show the navigation menu

src/components/AppBar/SelectLanguage.tsx

@@ -1,26 +1,32 @@
 import { useTranslation } from "react-i18next";
-import { MenuItem, Select } from "@material-ui/core";
+import { FormControl, MenuItem, Select } from "@material-ui/core";
+import { useStyles } from "./config";
 
-const SelectLanguage = (props: { classes: string }) => {
+const SelectLanguage = () => {
+  const classes = useStyles();
   const { t, i18n } = useTranslation();
   const { language, store } = i18n;
   const languages = Object.keys(store.data);
   return (
-    <div className={props.classes}>
+    <FormControl fullWidth>
       <Select
         id="select-lang"
-        className="form-control"
+        className={classes.select}
         variant="outlined"
-        autoWidth={true}
         defaultValue={language}
         value={language}
         children={languages.map((l) => (
-          <MenuItem key={l} value={l} onClick={() => i18n.changeLanguage(l)}>
+          <MenuItem
+            className={classes.selectItem}
+            key={l}
+            value={l}
+            onClick={() => i18n.changeLanguage(l)}
+          >
             {t(`lang.${l}`)}
           </MenuItem>
         ))}
       />
-    </div>
+    </FormControl>
   );
 };
 

src/components/AppBar/config.ts

@@ -1,4 +1,4 @@
-import { StyleRules } from "@material-ui/core";
+import { createStyles, makeStyles, Theme } from "@material-ui/core";
 
 export const routes = {
   dashboard: "Dashboard",
@@ -16,34 +16,54 @@ export const routes = {
   faq: "FAQ",
   survey: "Survey",
   issues: "Issues",
-  election: "Election"
-};
+  election: "Election",
+} as { [key: string]: string };
 
-export const css: StyleRules<"appBar" | "appLogo" | "lang" | "navBar" | "navBarLink" | "toolBar"> = {
-  appBar: {
-    flexDirection: "row",
-    backgroundColor: "#000",
-    color: "#fff",
-  },
-  appLogo: {
-    display: "block",
-    width: "150px",
-    color: "#4038ff",
-  },
-  lang: {
-    position: "fixed",
-    right: "0px",
-    top: "0px",
-  },
-  navBar: {
-    "&:hover": {
-      backgroundColor: "#4038ff",
+export const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      color: "#fff",
+      background: "#000",
+      textAlign: "left",
     },
-  },
-  navBarLink: { color: "#fff" },
-  toolBar: {
-    paddingLeft: "12px",
-    backgroundColor: "#000",
-    textAlign: "center",
-  },
-};
+    drawer: {
+      color: "#000",
+      '& .MuiDrawer-paper': {
+        background: "#000",
+        width: 200,
+      },
+    },
+    menuButton: {
+      margin: 0,
+      color: "#fff"
+    },
+    select: {
+      color: "#fff",
+      background: "#000",
+      fontSize: "0.875rem",
+      fontWeight: 500,
+      "& > *": {
+        textAlign: "center",
+        textTransform: "uppercase",
+        color: "#fff",
+      },
+    },
+    selectItem: {
+      textTransform: "uppercase",
+    },
+    appBar: {
+      background: "#000",
+      color: "#fff",
+    },
+    appLogo: {
+      margin: theme.spacing(1),
+      display: "block",
+      width: "200px",
+      background: "#000",
+      color: "#4038ff",
+      "&:hover": {
+        background: "#111",
+      }
+    },
+  })
+);

src/components/AppBar/index.tsx

@@ -1,39 +1,47 @@
-import React from "react";
+import { useState } from "react";
 import { Link } from "react-router-dom";
-import { AppBar, Button, makeStyles, Toolbar } from "@material-ui/core";
+import { AppBar, Button, SwipeableDrawer, Toolbar } from "@material-ui/core";
 import SelectLanguage from "./SelectLanguage";
 import joystream from "../../joystream.svg";
-
-import { css, routes } from "./config";
-
-const useStyles = makeStyles(css);
+import MenuIcon from "@material-ui/icons/Menu";
+import { routes, useStyles } from "./config";
 
 const Bar = () => {
   const classes = useStyles();
+  const [menuOpen, setMenuOpen] = useState(false);
 
   return (
     <AppBar position="static" className={classes.appBar}>
-      <Toolbar style={css.toolBar}>
-        <Button color="inherit" component={Link} to="/">
-          <img
-            src={joystream}
-            className={classes.appLogo}
-            alt="Joystream logo"
-          />
+      <Toolbar>
+        <Button className={classes.menuButton} onClick={() => setMenuOpen(true)}>
+          <MenuIcon />
         </Button>
-
-        {Object.keys(routes).map((route) => (
-          <Button
-            key={route}
-            className={classes.navBar}
-            style={css.navBarLink}
-            component={Link}
-            to={"/" + route}
-          >
-            {routes[route]}
+        <Button fullWidth className={classes.appLogo} component={Link} to="/">
+          <img src={joystream} alt="Joystream logo" />
+        </Button>
+        <SwipeableDrawer
+          anchor={"left"}
+          open={menuOpen}
+          onOpen={() => setMenuOpen(true)}
+          onClose={() => setMenuOpen(false)}
+          className={classes.drawer}
+        >
+          <Button className={classes.appLogo} component={Link} to="/">
+            <img src={joystream} alt="Joystream logo" />
           </Button>
-        ))}
-        <SelectLanguage classes={classes.lang} />
+          {Object.keys(routes).map((route) => (
+            <Button
+              key={route}
+              className={classes.root}
+              component={Link}
+              onClick={() => setMenuOpen(false)}
+              to={"/" + route}
+            >
+              {routes[route]}
+            </Button>
+          ))}
+          <SelectLanguage />
+        </SwipeableDrawer>
       </Toolbar>
     </AppBar>
   );

src/components/Dashboard/Council.tsx

@@ -50,6 +50,7 @@ const CouncilGrid = (props: {
       style={{ textAlign: "center", backgroundColor: "#000", color: "#fff" }}
       item
       lg={gridSize}
+      xs={12}
     >
       <Paper
         style={{

src/components/Dashboard/Forum.tsx

@@ -39,6 +39,7 @@ const Forum = (props: { posts: Post[]; threads: Thread[] }) => {
       style={{ textAlign: "center", backgroundColor: "#000", color: "#fff" }}
       item
       lg={6}
+      xs={12}
     >
       <Paper
         style={{

src/components/Dashboard/index.tsx

@@ -72,6 +72,7 @@ const Dashboard = (props: IProps) => {
             }}
             item
             lg={6}
+            sm={12}
           >
             <Validators
               toggleStar={toggleStar}

src/index.css

@@ -17,15 +17,13 @@ body {
 a,
 a:link,
 a:visited {
-    color: #001414;
+    color: #fff;
     text-decoration: none !important;
 }
 
 a:active,
 a:hover {
-    -color: #fff !important;
-    -background: #4038ff;
-    -padding: 1px;
+    color: #ccc !important;
 }
 
 select {