New look for desktop menu

dcadarko · Sep 14, 2020 · 72bbec1 · 72bbec1
1 parent 3bd4a55
commit 72bbec1
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 41 deletions.
diff --git a/src/components/DesktopDrawer.js b/src/components/DesktopDrawer.js
@@ -23,6 +23,7 @@ import {
 import { Skeleton } from "@material-ui/lab"
 import {
  NotificationsNoneOutlined as BellIcon,
+ MenuOutlined as MenuIcon,
  StarBorderOutlined as StarIcon,
  CheckOutlined as CheckIcon,
  ClearOutlined as CrossIcon,
@@ -33,6 +34,7 @@ import {
  WorkOutline as WorkIcon,
  InfoOutlined as InfoIcon,
  AddOutlined as PlusIcon,
+ ChevronLeftOutlined as ChevronLeftIcon
 } from "@material-ui/icons"
 
 import { NavLink } from "react-router-dom"
@@ -74,6 +76,7 @@ class DesktopMenu extends React.Component {
  title: "todox",
  lists: [],
  dialogOpen: false,
+ off: true,
  }
  window.setTitle = title => {
  this.setState({ title })
@@ -178,16 +181,33 @@ class DesktopMenu extends React.Component {
  ...this.setState({
  ...this.state,
  dialogOpen: false,
- addError: undefined
+ addError: undefined,
  }),
  })
  }
 
  render() {
  return (
  <div>
- <AppBar position="fixed" className={this.props.classes.appBar}>
+ <AppBar
+ position="fixed"
+ className={`${this.props.classes.appBar} ${
+ this.state.off ? "" : this.props.classes.appBarOn
+ }`}
+ >
  <Toolbar>
+ {this.state.off ? (
+ <IconButton
+ color="inherit"
+ aria-label="open drawer"
+ edge="start"
+ onClick={() => this.setState({ ...this.state, off: false })}
+ >
+ <MenuIcon />
+ </IconButton>
+ ) : (
+ ""
+ )}
  <Typography variant="h6" noWrap>
  {this.state.title}
  </Typography>
@@ -204,16 +224,30 @@ class DesktopMenu extends React.Component {
  </IconButton>
  </Toolbar>
  </AppBar>
- <nav className={this.props.classes.drawer}>
+ <nav
+ className={`${this.props.classes.drawer} ${
+ this.state.off ? "" : this.props.classes.drawerOn
+ }`}
+ >
  <Drawer
  classes={{
- paper: this.props.classes.drawerPaper,
+ paper: `${
+ this.state.off ? this.props.classes.drawerPaperOff : ""
+ } ${this.props.classes.drawerPaper}`,
  }}
  variant="permanent"
  open
  >
  <div>
- <div className={this.props.classes.toolbar} />
+ <div className={this.props.classes.toolbar}>
+ <IconButton
+ color="inherit"
+ aria-label="close drawer"
+ onClick={() => this.setState({ ...this.state, off: true })}
+ >
+ <ChevronLeftIcon />
+ </IconButton>
+ </div>
  <Divider />
  <List>
  <DrawerItem
@@ -348,22 +382,28 @@ export default withStyles(theme => ({
  "& a": {
  color: theme.palette.text.primary,
  },
-  [theme.breakpoints.up("sm")]: {
-  width: drawerWidth,
-  flexShrink: 0,
- },
+ },
+ drawerOn: {
+ width: drawerWidth,
+ flexShrink: 0,
  },
  appBar: {
  background: `linear-gradient(45deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
- [theme.breakpoints.up("sm")]: {
- width: `calc(100% - ${drawerWidth}px)`,
- marginLeft: drawerWidth,
- },
+ transition: theme.transitions.create("width"),
+ },
+ appBarOn: {
+ width: `calc(100% - ${drawerWidth}px)`,
+ marginLeft: drawerWidth,
  },
  // necessary for content to be below app bar
  toolbar: theme.mixins.toolbar,
  drawerPaper: {
  width: drawerWidth,
+ left: 0,
+ transition: theme.transitions.create("left"),
+ },
+ drawerPaperOff: {
+ left: -drawerWidth,
  },
  grow: {
  flexGrow: 1,

diff --git a/src/components/MobileDrawer.js b/src/components/MobileDrawer.js
@@ -213,7 +213,6 @@ class MobileMenu extends React.Component {
  aria-label="open drawer"
  edge="start"
  onClick={this.handleDrawerToggle}
- className={this.props.classes.menuButton}
  >
  <MenuIcon />
  </IconButton>
@@ -232,7 +231,7 @@ class MobileMenu extends React.Component {
  </IconButton>
  </Toolbar>
  </AppBar>
- <nav className={this.props.classes.drawer}>
+ <nav>
  <Drawer
  variant="temporary"
  anchor="left"
@@ -395,20 +394,8 @@ class MobileMenu extends React.Component {
 }
 
 export default withStyles(theme => ({
-
- drawer: {
-
- [theme.breakpoints.up("sm")]: {
- width: drawerWidth,
- flexShrink: 0,
- },
- },
  appBar: {
  background: `linear-gradient(45deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
- [theme.breakpoints.up("sm")]: {
- width: `calc(100% - ${drawerWidth}px)`,
- marginLeft: drawerWidth,
- },
  },
  // necessary for content to be below app bar
  toolbar: theme.mixins.toolbar,

diff --git a/src/pages/app.js b/src/pages/app.js
@@ -18,8 +18,6 @@ let Starred = React.lazy(() => import("./starred"))
 let Edit = React.lazy(() => import("./edit"))
 let ViewBy = React.lazy(() => import("./viewby"))
 
-const drawerWidth = 240
-
 class Home extends React.Component {
  constructor(props) {
  super(props)
@@ -77,9 +75,6 @@ export default withStyles(theme => ({
  },
  // necessary for content to be below app bar
  toolbar: theme.mixins.toolbar,
- drawerPaper: {
- width: drawerWidth,
- },
  content: {
  flexGrow: 1,
  padding: theme.spacing(3),

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -1,11 +1,33 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { withStyles } from "@material-ui/core/styles"
+import { div } from "@material-ui/core"
 
-export default function Index(){
- return (
- <div>
- <h1> Welcome to Todox</h1>
- <Link to="/home">Go to home</Link>
- </div>
- )
-}
+class IndexPage extends React.Component {
+ render(){
+ return(
+ <div className={this.props.classes.root}>
+ <div className={this.props.classes.imageHolder}>
+ <img src="./icons/512x512.png" alt="" />
+ </div>
+ </div>
+ )
+ }
+}
+
+export default withStyles((theme) => ({
+ root: {
+ display: "block",
+ height: "100vh",
+ width: "100vw",
+ position: "fixed",
+ left: 0,
+ top: 0,
+ background: "#fff"
+ },
+ imageHolder: {
+ position: "absolute",
+ top: "50%",
+ left: "50%",
+ transform: "translate(-50%, -50%)"
+ }
+}))(IndexPage)