[UI] Add a sticky header option (#849)

app/javascript/src/javascripts/themes.js

@@ -3,7 +3,7 @@ import LStorage from "./utility/storage";
 
 const Theme = {};
 
-Theme.Values = ["Main", "Extra", "Palette", "Navbar", "Gestures"];
+Theme.Values = ["Main", "Extra", "StickyHeader", "Palette", "Navbar", "Gestures"];
 
 for (const one of Theme.Values) {
   Object.defineProperty(Theme, one, {

app/javascript/src/javascripts/utility/storage.js

@@ -62,6 +62,9 @@ LStorage.Theme = {
 
   /** @returns {boolean} True if the mobile gestures should be enabled */
   Gestures: ["emg", false],
+
+  /** @returns {boolean} True if the sticky header is enabled */
+  StickyHeader: ["theme-sheader", false],
 };
 StorageUtils.bootstrapMany(LStorage.Theme);
 

app/javascript/src/styles/common/main_layout.scss

@@ -8,7 +8,7 @@ div#page {
 
   @include window-larger-than(800px) {
     border-radius: $border-radius-full;
-    margin: 0 1em;
+    margin: 0.5em 1em 0;
     padding-left: $padding-050;
     padding-right: $padding-050;
   }

app/javascript/src/styles/common/navigation.scss

@@ -15,6 +15,8 @@ nav.navigation {
   .nav-logo {
     grid-area: logo;
 
+    background-color: themed("color-background");
+
     a.nav-logo-link {
       display: flex;
 
@@ -39,6 +41,7 @@ nav.navigation {
 
     font-size: 1.15rem;
     padding-right: 0.5em;
+    background-color: themed("color-background");
 
     & > a {
       display: flex;
@@ -185,6 +188,13 @@ nav.navigation {
 }
 
 
+// Sticky header
+body[data-th-sheader="true"] nav.navigation {
+  position: sticky;
+  top: 0;
+}
+
+
 // Mobile toggle
 body.nav-toggled {
   padding-top: 4rem;
@@ -205,10 +215,6 @@ body.nav-toggled {
     // Allow scrolling when the menu is too long
     overflow-y: scroll;
 
-    .nav-logo, .nav-controls {
-      background-color: themed("color-background");
-    }
-
     .nav-primary, .nav-secondary, .nav-offset {
       display: flex;
     }
@@ -229,10 +235,11 @@ nav.navigation, body.nav-toggled nav.navigation {
     grid-template-columns: min-content min-content minmax(0, 1fr) min-content;
     grid-template-rows: 1.75em 1.75em;
 
-    padding: 0 1em 1em;
+    padding: 0 1em 0.5em;
     box-sizing: border-box;
     height: unset;
 
+    background: var(--color-background);
     overflow-y: hidden; // overrides mobile hack allowing the menu scrolling
 
     .nav-logo {
@@ -339,6 +346,8 @@ nav.navigation, body.nav-toggled nav.navigation {
 // Tweak for the secondary menu on desktop
 body.c-static.a-home {
   @include window-larger-than(800px) {
-    menu.nav-secondary { background: transparent; }
+    nav.navigation, menu.nav-logo, menu.nav-secondary {
+      background: unset;
+    }
   }
 }

app/views/layouts/_theme_include.html.erb

@@ -3,11 +3,13 @@
   try {
     var theme = localStorage.getItem('theme') || 'hexagon';
     var extra = localStorage.getItem('theme-extra') || 'hexagon';
+    var sheader = localStorage.getItem('theme-sheader') || false;
     var palette = localStorage.getItem('theme-palette') || 'default';
     var nav = localStorage.getItem('theme-nav') || 'top';
     var b = document.body;
     b.setAttribute('data-th-main', theme);
     b.setAttribute('data-th-extra', extra);
+    b.setAttribute('data-th-sheader', sheader);
     b.setAttribute('data-th-palette', palette);
     b.setAttribute('data-th-nav', nav);
   } catch(e) {}

app/views/static/theme.html.erb

@@ -37,6 +37,12 @@
       <option value="winter">Eternal Winter</option>
     </select>
 
+    <label for="theme_stickyheader">Sticky Header</label>
+    <select id="theme_stickyheader">
+      <option value="false">Disabled</option>
+      <option value="true">Enabled</option>
+    </select>
+
   <h3>Accessibility</h3>
     <label for="theme_palette">Palette</label>
     <select id="theme_palette">