Fix NavBar overlap

recipes/src/components/Navbar/styles.scss

@@ -2,7 +2,7 @@
 
 .cbk-navbar {
   background-color: white;
-  margin-top: $spacing-regular;
+  margin: $spacing-regular 0;
   padding: $spacing-regular;
   display: flex;
   flex-direction: row;

recipes/src/components/TopAppBar/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-  TopAppBar, TopAppBarRow, TopAppBarSection, TopAppBarNavigationIcon, TopAppBarTitle,
+  TopAppBar, TopAppBarRow, TopAppBarSection, TopAppBarNavigationIcon, TopAppBarTitle, TopAppBarFixedAdjust
 } from '@rmwc/top-app-bar';
 import { Icon } from 'components/Icon';
 import { NavLink } from 'react-router-dom';
@@ -17,30 +17,33 @@ type CBKTopAppBarProp = {
 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>
+    <>
+      <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>
+      <TopAppBarFixedAdjust/>
+    </>
   )
 }
 

recipes/src/styles/app.scss

@@ -207,7 +207,7 @@ code {
 }
 
 .cbk-app-content {
-  padding: $spacing-regular 0;
+  padding-bottom: $spacing-regular;
 }
 
 .cbk-burger {