style the nav at all viewports

Co-authored-by: Steve Smodish <[email protected]>
grammerjam · Dec 18, 2024 · 43ec7c1 · 43ec7c1
1 parent c2a2c8e
commit 43ec7c1
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 15 deletions.
diff --git a/base-client/src/app/app.component.html b/base-client/src/app/app.component.html
@@ -1,4 +1,8 @@
 <main>
-  <app-navbar />
-  <router-outlet></router-outlet>
+  <div class="layout">
+    <app-navbar />
+    <div class="content-container">
+      <router-outlet></router-outlet>
+    </div>
+  </div>
 </main>
diff --git a/base-client/src/app/app.component.scss b/base-client/src/app/app.component.scss
@@ -8,7 +8,30 @@
 }
 
 main {
-  display: grid;
   min-height: 100dvh;
+}
+
+.layout {
+  display: grid;
   grid-template-rows: auto auto 1fr;
+  gap: 0;
+
+  @media (min-width: $breakpoint-desktop) {
+    grid-template-rows: 1fr;
+    grid-template-columns: 121px 1fr;
+  }
+}
+
+.content-container {
+  margin-left: 16px;
+  margin-top: 24px;
+
+  @media (min-width: $breakpoint-tablet) {
+    margin-left: 25px;
+    margin-top: 33px;
+  }
+
+  @media (min-width: $breakpoint-desktop) {
+    margin-top: 64px;
+  }
 }
diff --git a/base-client/src/app/components/navbar/navbar.component.scss b/base-client/src/app/components/navbar/navbar.component.scss
@@ -14,6 +14,13 @@
     width: calc(100vw - 50px);
     justify-content: space-between;
   }
+
+  @media (min-width: $breakpoint-desktop) {
+    flex-direction: column;
+    width: 96px;
+    height: 960px;
+    margin: 32px 0 0 25px;
+  }
 }
 
 .nav-container {
@@ -24,10 +31,18 @@
   height: 56px;
   padding: 0 16px 0 16px;
 
+  @media (min-width: $breakpoint-desktop) {
+     grid-template-columns: 1fr;
+     grid-template-rows: auto 1fr auto;
+     width: 96px;
+     height: calc(960px - 70px);
+     justify-items: center;
+     margin-top: 32px;
+    }
+
   .logo {
     height: 20px;
     width: 25px;
-    border: 1px solid orange;
 
     @media (min-width: $breakpoint-tablet) {
       height: 25.6px;
@@ -40,7 +55,13 @@
     align-content: center;
     justify-content: center;
     align-items: baseline;
-    border: 1px solid green;
+
+    @media (min-width: $breakpoint-desktop) {
+        flex-direction: column;
+        height: 200px;
+        justify-content: space-between;
+        align-items: center;
+      }
 
     a {
       padding: 0 1rem;
@@ -60,12 +81,17 @@
     height: 24px;
     width: 24px;
     margin-top: 4px;
-    border: 1px solid red;
 
     @media (min-width: $breakpoint-tablet) {
       height: 32px;
       width: 32px;
     }
+
+    @media (min-width: $breakpoint-desktop) {
+      height: 40px;
+      width: 40px;
+      margin-top: 0;
+    }
   }
 
   @media (min-width: $breakpoint-tablet) {

diff --git a/base-client/src/app/components/regular-section/regular-section.component.scss b/base-client/src/app/components/regular-section/regular-section.component.scss
@@ -5,7 +5,6 @@
   display: flex;
   flex-direction: column;
   gap: 8px;
-  margin-left: 16px;
   max-width: calc(100vw - 32px);
   overflow: scroll;
   margin-bottom: 24px;

diff --git a/base-client/src/app/components/trending-section/trending-section.component.scss b/base-client/src/app/components/trending-section/trending-section.component.scss
@@ -4,7 +4,6 @@
   display: flex;
   flex-direction: column;
   gap: 8px;
-  margin-left: 16px;
   width: screen;
   overflow: scroll;
   margin-bottom: 24px;

diff --git a/base-client/src/styles.scss b/base-client/src/styles.scss
@@ -2,11 +2,11 @@
 @use "scss-reset/reset";
 @import "../styles/variables";
 
-.selection-container {
-  display: grid;
-  grid-gap: 2rem;
+// .selection-container {
+//   display: grid;
+//   grid-gap: 2rem;
 
-  @media (min-width: $breakpoint-desktop) {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
+//   @media (min-width: $breakpoint-desktop) {
+//     grid-template-columns: repeat(4, 1fr);
+//   }
+// }