Fix layout for nav bars

dashboard/src/App.scss

@@ -1,14 +1,16 @@
 @import "~bootstrap/scss/bootstrap.scss";
 
 .App {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: 1rem;
+  display: grid;
+  grid-template-columns: 1fr 6fr;
+  grid-gap: 1rem;
   width: 100vw;
   height: 100vh;
 
+  .left-nav-bar {
+    grid-column: 1;
+  }
   .app-content {
-    width: auto;
+    grid-column: 2;
   }
 }

dashboard/src/App.tsx

@@ -3,7 +3,6 @@ import data from './data.json';
 import LeftNavBar from './components/Navigation/LeftBar/LeftNavBar';
 import TopNavBar from './components/Navigation/TopBar/TopNavBar';
 import './App.scss';
-// import './App.react.scss';
 
 function App() {
   const [pageDisplay, setPageDisplay] = useState<string>('dashboard');
@@ -26,10 +25,10 @@ function App() {
       <div className="app-content">
         <TopNavBar pageDisplay={pageDisplay} setPageDisplay={setPageDisplay} namespaces={namespaces} setSelected={setSelectedNamespace} />
         {pageDisplay === 'dashboard' && (
-          <h1>Polaris Dashboard</h1>
+          <h1 style={{ marginTop: '1rem' }}>Polaris Dashboard</h1>
         )}
         {pageDisplay === 'namespaces' && (
-          <h1>{selectedNamespace} Namespace</h1>
+          <h1 style={{ marginTop: '1rem' }}>{selectedNamespace} Namespace</h1>
         )}
       </div>
     </div>

dashboard/src/components/Navigation/LeftBar/LeftNavBar.scss

@@ -4,8 +4,6 @@
   justify-content: space-between;
   background-color: #23103a;
   color: white;
-  min-width: 15vw;
-  // width: 10%;
   height: 100vh;
   padding: 1rem;
 
@@ -28,7 +26,6 @@
       flex-wrap: wrap;
       align-items: center;
       gap: 1rem;
-      // margin-bottom: 1rem;
       text-decoration: none;
 
       .link-name {

dashboard/src/components/Navigation/TopBar/TopNavBar.scss

@@ -1,15 +1,16 @@
 .top-nav-bar {
-  width: auto;
   z-index: 3;
   background-color: white;
   height: 3rem;
   position: sticky;
   top: 0;
+  padding-bottom: 0 !important;
 
   .top-nav {
     padding: 0 24px;
     height: inherit;
     align-content: end;
+    width: 100%;
 
     .nav-item > .dropdown-menu {
       max-height: 15rem;
@@ -28,6 +29,7 @@
         margin-bottom: -2px;
         border-bottom: 2px solid #445688;
         color: #445688;
+        padding-bottom: 14px;
       }
     }
 

dashboard/src/components/Navigation/TopBar/TopNavBar.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Nav, NavDropdown } from 'react-bootstrap';
+import { Nav, Navbar, NavDropdown } from 'react-bootstrap';
 import './TopNavBar.scss';
 
 type NavProps = {
@@ -37,7 +37,7 @@ const TopNavBar = ({ pageDisplay, setPageDisplay, namespaces, setSelected }: Nav
   };
 
   return (
-    <div className="top-nav-bar">
+    <Navbar className="top-nav-bar" expand={true}>
       <Nav variant="tabs" className="top-nav">
         <NavDropdown title={selectedNamespace} id="nav-dropdown" active={pageDisplay === 'namespaces'} onSelect={(namespace: any) => handleNamespaceSelection(namespace)}>
           <NavDropdown.Item key={'all-namespaces'} eventKey={'all-namespaces'}>
@@ -51,7 +51,7 @@ const TopNavBar = ({ pageDisplay, setPageDisplay, namespaces, setSelected }: Nav
           </Nav.Link>
         </Nav.Item>
       </Nav>
-    </div>
+    </Navbar>
   )
 }