Merge pull request #1527 from Gamaranto/make-navbar-sticky

Make Navbar Sticky

src/components/LayoutWithRouting.tsx

@@ -27,23 +27,31 @@ const Route: React.FC<RouteProps> = ({ Component, ...pathProps }) => {
 const LayoutWithRouting: React.FC = () => (
   <>
     <GlobalStyle />
-    <Router primary>
+    <GlobalContainer>
       <Navbar default />
-    </Router>
-    <MainContainer>
-      <Router primary={false}>
-        <Route default Component={HomeView} />
-        <Route path={routes.video()} Component={VideoView} />
-        <Route path={routes.search()} Component={SearchView} />
-        <Route Component={BrowseView} path={routes.browse()} />
-        <Route Component={ChannelView} path={routes.channel()} />
-      </Router>
-    </MainContainer>
+      <MainContainer>
+        <Router primary={false}>
+          <Route default Component={HomeView} />
+          <Route path={routes.video()} Component={VideoView} />
+          <Route path={routes.search()} Component={SearchView} />
+          <Route Component={BrowseView} path={routes.browse()} />
+          <Route Component={ChannelView} path={routes.channel()} />
+        </Router>
+      </MainContainer>
+    </GlobalContainer>
   </>
 )
 
+const GlobalContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  max-height: 100vh;
+`
+
 const MainContainer = styled.main`
   padding: 0 var(--global-horizontal-padding);
+  overflow: auto;
 `
 
 export default LayoutWithRouting

src/components/Navbar/index.ts

@@ -1,2 +1,3 @@
 import Navbar from './Navbar'
+
 export default Navbar