combined nav bars on the same line

Author: ljn16

src/app/components/StateRoute/StateRoute.tsx

@@ -69,7 +69,7 @@ const StateRoute = (props: StateRouteProps) => {
         <NavLink
           to='/'
           className={(navData) =>
-            navData.isActive ? 'is-active router-link map-tab' : 'router-link map-tab'
+            navData.isActive ? 'is-active router-link map-tab map-tab1' : 'router-link map-tab'
           }
           end
         >

src/app/styles/layout/_stateContainer.scss

@@ -86,16 +86,27 @@
 
   .router-link {
     height: 100%;
-    width: 34%;
+    // width: 34%;
+    width: 8%;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: $navbar-unselected;
     text-decoration: none;
     color: $navbar-unselected-text;
 
-    border-top-right-radius: 10px;
-    border-top-left-radius: 10px;
+    // border-top-right-radius: 10px;
+    // border-top-left-radius: 10px;
+  }
+
+  .map-tab1 {
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+  }
+
+  .accessibility-tab {
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
   }
 
   .router-link:hover {
@@ -108,16 +119,20 @@
   }
 
   .navbar {
-    background-color: $navbar-background;
+    // background-color: $navbar-background;
     display: flex;
     flex-direction: row;
-    justify-content: flex-start;
+    justify-content: center;
     align-items: center;
     height: 30px;
-    position: sticky;
-    top: 40px; //should revisit to figure out a more dynamic way of sticking the navbar to the bottom of the main-navbar
-    left: 0px;
-    z-index: 1;
+    position: fixed;
+    top: 4px; //should revisit to figure out a more dynamic way of sticking the navbar to the bottom of the main-navbar // <- tried placing the main nav on the same line to save space but ran into problems with the svg div of the tree + animation. Will need closer inspection
+    left: 50%;
+    transform: translateX(-50%);
+    width: 65vw;
+    z-index: 2;
+
+
     @extend %disable-highlight;
   }
 
@@ -225,9 +240,10 @@
   z-index: 2;
 }
 
-.state-container .router-link {
-  border: 0.5px solid black;
-}
+// .state-container .router-link {
+//   border: 0.5px solid rgba(0, 0, 0, 0.5);
+//   border-bottom: none;
+// }
 
 .tooltipData {
   background-color: #373737;