small ui adjustments

src/containers/App.css

@@ -1,5 +1,3 @@
-@import "material-icons.css";
-
 html {
   box-sizing: border-box;
   margin: 0;
@@ -22,8 +20,18 @@ body {
   font-family: 'Roboto', sans-serif;
 }
 
+.nav {
+  display: block;
+  padding: 1rem;
+
+  & .heading {
+    border: none;
+  }
+}
+
 :global #root,
 :global #root > * {
+  margin-top: 64px;
   height: 100%;
 }
 
@@ -278,3 +286,11 @@ h1 {
     font-size: 1.2em;
   }
 }
+
+.navDrawer {
+  max-width: 240px !important;
+
+  & .drawerContent {
+    max-width: 240px !important;
+  }
+}

src/containers/App.js

@@ -47,7 +47,7 @@ class App extends React.Component {
   }
 
   state = {
-    navDrawerIsVisible: false,
+    navDrawerIsVisible: true,
   };
 
   componentDidMount() {
@@ -155,7 +155,7 @@ class App extends React.Component {
         <NavDrawer
           active={navDrawerIsVisible}
           scrollY
-          permanentAt="lg"
+          permanentAt={navDrawerIsVisible ? 'lg' : null}
           onOverlayClick={this.toggleNavDrawer} // eslint-disable-line
           theme={styles}
         >
@@ -175,15 +175,15 @@ class App extends React.Component {
             </Navigation>
           </nav>
         </NavDrawer>
+        <AppHeader
+          collections={collections}
+          commands={commands}
+          defaultCommands={defaultCommands}
+          runCommand={runCommand}
+          onCreateEntryClick={createNewEntryInCollection}
+          toggleNavDrawer={this.toggleNavDrawer}
+        />
         <Panel scrollY>
-          <AppHeader
-            collections={collections}
-            commands={commands}
-            defaultCommands={defaultCommands}
-            runCommand={runCommand}
-            onCreateEntryClick={createNewEntryInCollection}
-            toggleNavDrawer={this.toggleNavDrawer}
-          />
           <div className={styles.main}>
             {children}
           </div>