navbar tweaks and accordion perf

ausspeedruns · Oct 15, 2023 · 0f5f37f · 0f5f37f
1 parent 910eb45
commit 0f5f37f
Show file tree

Hide file tree

Showing 5 changed files with 123 additions and 156 deletions.
diff --git a/apps/nextjs/components/ComponentBlocks/post-event.tsx b/apps/nextjs/components/ComponentBlocks/post-event.tsx
@@ -151,6 +151,7 @@ export const PostEventComponentRenderers: PostEventRenderers = {
 									className={styles.run}
 									key={run.id}
 									disableGutters
+									TransitionProps={{ unmountOnExit: true }} 
 									// expanded={expanded}
 									// onChange={handleRunChange(run.id)}
 								>

diff --git a/apps/nextjs/components/Navbar/Navbar.module.scss b/apps/nextjs/components/Navbar/Navbar.module.scss
@@ -11,21 +11,16 @@
   height: auto;
   z-index: 2;
   position: relative;
-  padding: 0 1rem;
+  padding: 8px 1rem;
 
   .content {
     display: flex;
-    align-items: center;
-    flex-flow: wrap;
+    flex-flow: column;
     max-width: 2000px;
 
     @include breakpoint($md) {
-      flex-direction: column;
-      justify-content: space-between;
-    }
-
-    @include breakpoint($md) {
-      flex-flow: row nowrap;
+      display: grid;
+      grid-template-columns: 1.5fr 1.5fr 1fr min-content;
     }
 
     @include breakpoint($lg) {
@@ -35,7 +30,7 @@
 
   .title {
     display: flex;
-    gap: 6px;
+    justify-content: space-between;
 
     font-family: "Finger Paint";
     font-size: 1.2rem;
@@ -88,18 +83,20 @@
     }
   }
 
+  @include nav-lists;
+
   nav {
     display: flex;
     flex-flow: column wrap;
+    font-size: 1.5rem;
 
-    @include breakpoint($xs) {
+    @include breakpoint($md) {
       flex-flow: row nowrap;
       align-items: center;
       justify-content: space-between;
+      font-size: 1rem;
     }
 
-    @include nav-lists;
-
     .signout {
       margin-left: 1rem;
       font-weight: 500;
@@ -121,26 +118,55 @@
     }
   }
 
+  .social {
+    display: flex;
+
+    @include nav-lists;
+
+    @include breakpoint($md) {
+      flex-flow: row nowrap;
+      align-items: center;
+      justify-content: flex-end;
+      padding-right: 8px;
+    }
+
+    &.menuopen {
+      display: flex !important;
+      flex-flow: row;
+      justify-content: center;
+    }
+  }
+
+  .auth {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &.menuopen {
+      display: flex !important;
+    }
+  }
+
   .break {
     flex-basis: 100%;
     height: 0;
   }
 
 
-  .mainmenu {
+  .mainmenu, .social, .auth {
     width: 100%;
 
     &.menuopen {
       display: block;
-      border-top: 2px solid white;
     }
 
     &.menuclosed {
       display: none;
     }
 
     @include breakpoint($md) {
-      display: block !important;
+      display: flex !important;
+      flex-direction: row;
     }
 
     li {
@@ -178,7 +204,3 @@
   //   padding: 6px 32px;
   // }
 }
-
-.auth {
-  justify-content: center;
-}