Allow tabs to have children

src/app/tabs/tabs.component.html

@@ -29,4 +29,8 @@
     <button>
         <img src="assets/icons/settings.svg" alt="settings icon">
     </button>
-</section>
+</section>
+
+<div class="page">
+    <router-outlet></router-outlet>
+</div>

src/app/tabs/tabs.component.scss

@@ -1,7 +1,9 @@
+$header-height: 10rem;
+
 .navbar {
     display: flex;
     width: 100%;
-    height: 10rem;
+    height: $header-height;
     align-items: center;
     justify-content: flex-start;
 
@@ -83,15 +85,17 @@
     }
 }
 
+$tabs-width: 7rem;
+$tabs-offset: 20px;
 
 .tabs {
     position: fixed;
-    height: calc(100% - 12rem);
-    top: 10rem;
-    left: 4rem;
+    height: calc(100% - #{$header-height} - 20px);
+    top: $header-height;
+    left: $tabs-offset;
     background-color: var(--primary);
-    border-radius: 5rem;
-    width: 7rem;
+    border-radius: $tabs-width;
+    width: $tabs-width;
     overflow: hidden;
     display: flex;
     align-items: center;
@@ -118,4 +122,10 @@
             }
         }
     }
+}
+
+.page {
+    height: calc(100vh - #{$header-height});
+    overflow: auto;
+    margin-left: calc(#{$tabs-width} + #{$tabs-offset});
 }