From 66aaba7c3eb80caec22417c16c57a6c9e0202d12 Mon Sep 17 00:00:00 2001
From: "Jocelyn Badgley (Twipped)" <joc@twipped.com>
Date: Tue, 2 Mar 2021 08:10:04 -0800
Subject: [PATCH] Early work on redoing the navigation UI

---
 scss/_header.scss    | 46 ++++++++++++++++++++++++++++++--------------
 scss/_page.scss      |  5 +----
 templates/layout.hbs | 10 ++++------
 3 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/scss/_header.scss b/scss/_header.scss
index ac87e21..6dba47d 100644
--- a/scss/_header.scss
+++ b/scss/_header.scss
@@ -28,7 +28,7 @@ header {
 
   @media (max-width: 500px) {
     padding: 0.5rem 1rem 0;
-    position: static;
+    // position: static;
   }
 
   transition-property: min-height, background, box-shadow;
@@ -57,20 +57,26 @@ header {
     font-family: $font-brand;
     font-size: 2em;
     white-space: nowrap;
+    transition: max-height 0.5s ease-out;
+    overflow: hidden;
 
     @media (max-width: 500px) {
       font-size: 1.8em;
     }
   }
 
-  @media (min-width: 500px) {
-    &.active {
-      @include header--active;
+  &.active {
+    @include header--active;
+
+    @media (max-width: 500px) {
+      .top-brand {
+        max-height: 0;
+      }
     }
   }
 
-  nav {
 
+  nav {
     flex: 1;
     max-width: 1200px;
 
@@ -96,6 +102,10 @@ header {
     margin: 0 0 0 1em;
     padding: 0;
 
+    @media (max-width: 800px) {
+      margin: 0;
+    }
+
 
     .top-nav-item {
       transition-property: color, padding, margin;
@@ -135,24 +145,32 @@ header {
     }
 
     @media (max-width: 400px) {
-      flex-wrap: wrap;
-      justify-content: center;
-
-      .break { display: block; }
-
-      .top-nav-item {
-        padding: 0.25rem 0.5rem;
+      .disposable {
+        display: none;
       }
     }
   }
 
+  @media (max-width: 500px) {
+
+    .top-nav-inner .disposable {
+      transition: max-width 0.5s ease-out;
+      max-width: 50px;
+    }
+
+    &.active .top-nav-inner .disposable {
+      max-width: 0;
+      overflow: hidden;
+    }
+  }
+
 }
 
-@media (min-width: 500px) {
+// @media (min-width: 500px) {
   body:not(.front-page):not(.longform) header + * {
     margin-top: $header-full-height;
   }
-}
+// }
 
 .disclaimer {
   $cwColor: darken($gray-100, 2%);
diff --git a/scss/_page.scss b/scss/_page.scss
index 49ed7c5..e5ab750 100644
--- a/scss/_page.scss
+++ b/scss/_page.scss
@@ -6,10 +6,7 @@ body.page, body.post {
 
   header {
     background: $gray-800;
-
-    @media (min-width: 500px) {
-      &.active { background: white; }
-    }
+    &.active { background: white; }
   }
 
 }
diff --git a/templates/layout.hbs b/templates/layout.hbs
index 3692cf7..7df03ab 100644
--- a/templates/layout.hbs
+++ b/templates/layout.hbs
@@ -62,13 +62,11 @@
 
         <div class="top-nav">
           <ul class="top-nav-inner">
-            <!-- <li><a href="/glossary" class="top-nav-item">Glossary</a></li> -->
-            <li><a href="/gdb/" class="top-nav-item dropdown-toggle" id="nav-gdb" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">The Gender Dysphoria Bible</a>{{import '/public/_gdb-menu'}}</li>
+            <li><a href="/gdb/" class="top-nav-item dropdown-toggle" id="nav-gdb" data-toggle="dropdown" data-flip="false" aria-haspopup="true" aria-expanded="false">The Gender Dysphoria Bible</a>{{import '/public/_gdb-menu'}}</li>
             <li><a href="/tweets/" class="top-nav-item" title="Trans Twitter Topics"><img src="/images/transtwitter.png" width="24" height="24" alt=""></a></li>
-            <li class="break"></li>
-            <li><a href="https://github.com/GenderDysphoria/GenderDysphoria.fyi/issues" class="top-nav-item">{{icon 'brands/github'}}</a></li>
-            <li><a href="https://patreon.com/curvyandtrans" class="top-nav-item" title="Patreon">{{icon 'brands/patreon'}}</a></li>
-            <li><a href="https://ko-fi.com/curvyandtrans" class="top-nav-item" title="Ko-Fi">{{icon 'brands/ko-fi'}}</a></li>
+            <li class="disposable"><a href="https://github.com/GenderDysphoria/GenderDysphoria.fyi/issues" class="top-nav-item">{{icon 'brands/github'}}</a></li>
+            <li class="disposable"><a href="https://patreon.com/curvyandtrans" class="top-nav-item" title="Patreon">{{icon 'brands/patreon'}}</a></li>
+            <li class="disposable"><a href="https://ko-fi.com/curvyandtrans" class="top-nav-item" title="Ko-Fi">{{icon 'brands/ko-fi'}}</a></li>
           </ul>