Change drawer for a top bar component

recipes/src/App.tsx

@@ -1,12 +1,17 @@
-import { BrowserRouter as Router, Route, Link, NavLink } from "react-router-dom";
-import React, { Component, Props } from 'react';
+import { BrowserRouter as Router, Route, Link, NavLink, useRouteMatch, Switch } from "react-router-dom";
+import React, { useState } from 'react';
 import { Provider } from 'react-redux';
 import CBKDrawer from './components/Drawer';
+import Button from 'components/Button';
+import Icon from 'components/Icon';
+import { DrawerAppContent } from '@rmwc/drawer';
+import {TopAppBar, TopAppBarRow, TopAppBarNavigationIcon, TopAppBarSection, TopAppBarTitle} from '@rmwc/top-app-bar'
 import Toast from 'components/Toast';
 import configureStore from 'store/configureStore';
 import './styles/app.scss';
-
-import Routes, { RouteWithSubRoutes } from 'route.config';
+import TopBar from 'components/TopAppBar';
+import Routes from 'route.config';
+import { Display } from "./types/ui";
 
 function Index() {
   return <h2>Home</h2>;
@@ -17,40 +22,50 @@ function Users() {
 }
 
 const store = configureStore();
-
+const { ui } = store.getState();
+ui.display
 const App = () => {
-  const navbarItems = [
-    { title: 'Recipes', path: '/recipes', active: false },
-    { title: 'Planner', path: '/planner', active: false },
-    { title: 'Shoplist', path: '/shoplist', active: false },
-  ];
   return (
     <Provider store={store}>
       <Toast />
       <Router>
-        <div className="cbk-app-drawer">
-        <CBKDrawer>
-          {
-            navbarItems.map((item, i) => (
-              <NavLink
-                to={item.path}
-                activeClassName='active'
-                key={i}
-              >{item.title}</NavLink>
-            ))
-          }
-        </CBKDrawer>
-        </div>
-        <div className="cbk-main">
-          {
-            Routes.map((route, i) => (
-              <RouteWithSubRoutes key={i} {...route} />
-            ))
-          }
-        </div>
+        <AppRouterConf {...ui}></AppRouterConf>
       </Router>
     </Provider>
   )
 }
 
+const RouteWithSubRoutes = (route: any) => {
+  return (
+    <Route
+      path={route.path}
+      render={props => (
+        <route.component location={props.location} routes={route.routes} {...props} />
+      )}
+    />
+  );
+}
+
+const AppRouterConf: React.FunctionComponent<{ display: Display }> = () => {
+  const routes = Routes.filter(route => !!route.title);
+
+  return (
+    <>
+      //@ts-ignore
+      <TopBar routes={routes}/>
+      <div className="cbk-app-content">
+        <Switch>
+          {
+            Routes.map((route, i) => {
+              return (
+                <RouteWithSubRoutes key={i} {...route} />
+              )
+            })
+          }
+        </Switch>
+      </div>
+    </>
+  );
+}
+
 export default App;

recipes/src/components/Button/index.tsx

@@ -16,6 +16,7 @@ type CBKButtonProps = {
   outlined?: boolean,
   icon?: string,
   link?: boolean,
+  custom?:boolean,
   active?: boolean,
   onClick?: (e: any) => void,
   small?: boolean,
@@ -40,7 +41,7 @@ export default function CBKButton(props: CBKButtonProps) {
     return (
       <IconButton
         icon={
-          <Icon material icon={props.icon}/>
+          <Icon material={!props.custom} icon={props.icon}/>
         }
         onClick={props.onClick}
         className={classnames({

recipes/src/components/Drawer/index.tsx

@@ -6,10 +6,12 @@ import {
   DrawerTitle,
   DrawerContent
 } from '@rmwc/drawer';
+
 import {
   List,
   ListItem
 } from '@rmwc/list';
+
 import { ReactNodeArray } from 'prop-types';
 import Icon from 'components/Icon';
 
@@ -18,12 +20,13 @@ import '@rmwc/list/styles';
 import './styles.scss';
 
 type CBKDrawerProps = {
+  open?: boolean,
   children: ReactNodeArray,
 }
 
 function CBKDrawer(props: CBKDrawerProps) {
   return (
-    <Drawer className='cbk-drawer'>
+    <Drawer dismissible open={props.open} className='cbk-drawer'>
       <DrawerHeader>
         <Icon icon='logo' />
         <DrawerTitle tag='h1'>

recipes/src/components/Icon/index.tsx

@@ -16,22 +16,36 @@ export type IconProps = {
 
 export function Icon({ width, height, fill, icon, className, material }: IconProps) {
   const styles = {
-    width: width || 64,
-    height: height || 'auto',
+    width: width,
+    height: height,
     fill: fill,
   };
 
-  return material ? (
-    <MaterialIcon icon={icon} className='material-icons-outlined' />
-  ) : (
-    <ReactSVG
-      // @ts-ignore
-      src={Svgs[icon]}
-      className='cbk-icon'
-      svgClassName={className}
-      svgStyle={styles}
-    />
+  const i = material ? icon : (<ReactSVG
+    // @ts-ignore
+    src={Svgs[icon]}
+    className='cbk-icon'
+    svgClassName={className}
+    svgStyle={styles}
+  />);
+
+  return (
+    <MaterialIcon
+    icon={i}
+    className={`material-icons-outlined`}
+  />
   )
+  // return material ? (
+  //   <MaterialIcon icon={icon} className='material-icons-outlined' />
+  // ) : (
+  //   <ReactSVG
+  //     // @ts-ignore
+  //     src={Svgs[icon]}
+  //     className='cbk-icon'
+  //     svgClassName={className}
+  //     svgStyle={styles}
+  //   />
+  // )
 }
 
 export default Icon;

recipes/src/components/TopAppBar/index.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import {
+  TopAppBar, TopAppBarRow, TopAppBarSection, TopAppBarNavigationIcon, TopAppBarTitle,
+
+} from '@rmwc/top-app-bar';
+import { Icon } from 'components/Icon';
+import { NavLink } from 'react-router-dom';
+
+import './styles.scss';
+type CBKTopAppBarProp = {
+  routes: {
+    path: string,
+    title: string,
+  }[]
+}
+const CBKTopAppBar: React.FunctionComponent<CBKTopAppBarProp> = ({ routes }) => {
+
+  return (
+    <TopAppBar fixed className="cbk-app-bar">
+      <TopAppBarRow>
+        <TopAppBarSection alignStart>
+          <TopAppBarNavigationIcon
+            icon={<Icon icon='logo' fill="white" />}
+          />
+        </TopAppBarSection>
+        <TopAppBarSection alignEnd>
+          {
+            routes.map((route, key) => (
+              <TopAppBarTitle key={key}>
+                <NavLink
+                  to={route.path}
+                  activeClassName="cbk-path-route--active"
+                  className="cbk-path-route"
+                >
+                  { route.title }
+                </NavLink>
+              </TopAppBarTitle>
+            ))
+          }
+        </TopAppBarSection>
+      </TopAppBarRow>
+    </TopAppBar>
+  )
+}
+
+export default CBKTopAppBar;

recipes/src/components/TopAppBar/styles.scss

@@ -0,0 +1,32 @@
+@import '../../styles/variables';
+
+.cbk-app-bar {
+  background-color: black;
+  a.cbk-path-route {
+    text-decoration: none;
+    color: $white;
+    font-family: $font-family-display;
+    font-size: $font-size-large;
+    letter-spacing: 0.075em;
+    font-weight: $font-weight-bold;
+    position: relative;
+    
+    &::after {
+      content: "";
+      position: absolute;
+      width: 0;
+      height: 4px;
+      bottom: 0;
+      left: 0;
+      background-color: $yellow;
+      transition: all 0.2s ease-in-out 0s;
+    }
+
+    &:hover::after,
+    &--active::after {
+      left: 0;
+      right: auto;
+      width: 30%;
+    }
+  }
+}

recipes/src/route.config.tsx

@@ -31,27 +31,32 @@ const routes = [
     {
       path: '/recipes/edit/:id',
       component: EditRecipe,
-    }]
+    }],
+    title: 'recipes'
   }, {
     path: '/planner',
     component: PlannerContainer,
     routes: [{
       path: '/planner/lala',
       component: emptyRoute('planner lala'),
-    }]
+    }],
+    title: 'planner'
   }, {
     path: '/shoplist',
     component: ShoppingList,
+    title: 'shoplist'
   }
 ];
 
-export const RouteWithSubRoutes = (route: any) => (
-  <Route
-    path={route.path}
-    render={props => (
-      <route.component location={props.location} routes={route.routes} {...props} />
-    )}
-  />
-);
+export const RouteWithSubRoutes = (route: any) => {
+  return (
+    <Route
+      path={route.path}
+      render={props => (
+        <route.component location={props.location} routes={route.routes} {...props} />
+      )}
+    />
+  );
+}
 
 export default routes;

recipes/src/styles/app.scss

@@ -97,6 +97,16 @@ code {
 
 }
 
+.cbk-app-content {
+  padding: $spacing-regular 0;
+}
+
+.cbk-burger {
+  position: fixed;
+  top: 0;
+  z-index: 9999;
+}
+
 input,
 label,
 textarea

recipes/src/svgs/index.js

@@ -4,9 +4,11 @@ export const availableIcons = reqSvgs.keys().map(
   key => key.slice(2, -4)
 );
 
-const svgs = reqSvgs
+const svgs: {
+  [key: string]: any
+} = reqSvgs
   .keys()
-  .reduce((images, path) => {
+  .reduce<{[key: string]: any}>((images, path) => {
     images[path.slice(2, -4)] = reqSvgs(path)
     return images
   }, {} );