Improve navigation styling and experience (#856)

ashmaroli · web-flow · commit 9258979206c8 · 2025-03-03T06:20:08.000-08:00
Merge pull request 856
diff --git a/README.md b/README.md
@@ -85,7 +85,8 @@ Refers to snippets of code within the `_includes` directory that can be inserted
   - `google-analytics.html` &mdash; Inserts Google Analytics module (active only in production environment).
   - `head.html` &mdash; Code-block that defines the `<head></head>` in *default* layout.
   - `custom-head.html` &mdash; Placeholder to allow users to add more metadata to `<head />`.
-  - `header.html` &mdash; Defines the site's main header section. By default, pages with a defined `title` attribute will have links displayed here.
+  - `header.html` &mdash; Defines the site's main header section that consists of the site's *title* and *navigation*.
+  - `nav-items.html` &mdash; Contains the logic and markup to render individual link items for the site's navigation.
   - `social.html` &mdash; Renders social-media icons based on the `minima:social_links` data in the config file using
     the latest version of Font Awesome Free webfonts via remote CDN.
   - `sub-footer.html` &mdash; Placeholder to allow inserting markup (e.g. deferred scripts) before the `</body>` tag.
@@ -215,10 +216,13 @@ This allows you to set which pages you want to appear in the navigation area and
 For instance, to only link to the `about` and the `portfolio` page, add the following to your `_config.yml`:
 
 ```yaml
-header_pages:
-  - about.md
-  - portfolio.md
+minima:
+  nav_pages:
+    - about.md
+    - portfolio.md
 ```
+> [!WARNING]
+> Please note that **`site.header_pages`** is **`site.minima.nav_pages`** in Minima 3.0
 
 
 ### Change default date format
diff --git a/_config.yml b/_config.yml
@@ -24,13 +24,6 @@ plugins:
   - jekyll-feed
   - jekyll-seo-tag
 
-# Theme-specific settings
-
-# If you want to link only specific pages in your header, use this and add the path to the pages
-# in order as they should show up.
-header_pages:
-  - about.md
-
 # Minima specific settings, which are only available from Minima 3.0 onward.
 minima:
   # Minima skin selection.
@@ -43,6 +36,12 @@ minima:
   # solarized	         Adaptive skin for solarized color scheme skins.
   skin: classic
 
+  # If you want to link only specific pages in the site-navigation, use this and list
+  # the `path` property (as represented via Liquid) of the pages in the order they should
+  # be rendered.
+  nav_pages:
+    - about.md
+
   # Set to `true` to show excerpts on the homepage.
   #show_excerpts: false
 
diff --git a/_includes/header.html b/_includes/header.html
@@ -2,30 +2,26 @@
 
   <div class="wrapper">
     {%- assign default_paths = site.pages | map: "path" -%}
-    {%- assign page_paths = site.header_pages | default: default_paths -%}
-    {%- assign titles_size = site.pages | map: 'title' | join: '' | size -%}
+    {%- assign page_paths = site.minima.nav_pages | default: default_paths -%}
+    {%- assign page_titles = site.pages | map: 'title' | compact %}
     <a class="site-title" rel="author" href="{{ '/' | relative_url }}">{{ site.title | escape }}</a>
 
-    {%- if titles_size > 0 -%}
+    {%- unless page_titles == empty %}
       <nav class="site-nav">
         <input type="checkbox" id="nav-trigger" class="nav-trigger" />
         <label for="nav-trigger">
-          <span class="menu-icon">
-            <svg viewBox="0 0 18 15" width="18px" height="15px">
-              <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
-            </svg>
-          </span>
+          <span class="menu-icon fas fa-bars fa-lg"></span>
         </label>
 
-        <div class="trigger">
-          {%- for path in page_paths -%}
-            {%- assign my_page = site.pages | where: "path", path | first -%}
-            {%- if my_page.title -%}
-            <a class="page-link" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
-            {%- endif -%}
-          {%- endfor -%}
+        <div class="drawer-container">
+          <div class="drawer">
+            {%- include nav-items.html paths = page_paths %}
+          </div>
+        </div>
+        <div class="slab">
+          {%- include nav-items.html paths = page_paths %}
         </div>
       </nav>
-    {%- endif -%}
+    {%- endunless %}
   </div>
 </header>
diff --git a/_includes/nav-items.html b/_includes/nav-items.html
@@ -0,0 +1,6 @@
+{%- for path in include.paths -%}
+  {%- assign hyperpage = site.pages | where: "path", path | first -%}
+  {%- if hyperpage.title %}
+  <a class="nav-item" href="{{ hyperpage.url | relative_url }}">{{ hyperpage.title | escape }}</a>
+  {%- endif -%}
+{%- endfor -%}
diff --git a/_sass/minima/_layout.scss b/_sass/minima/_layout.scss
@@ -2,13 +2,13 @@
  * Site header
  */
 .site-header {
-  border-top: 5px solid $border-color-03;
-  border-bottom: 1px solid $border-color-01;
+  position: fixed;
+  width: 100%;
   min-height: $spacing-unit * 1.865;
   line-height: $base-line-height * $base-font-size * 2.25;
-
-  // Positioning context for the mobile navigation icon
-  position: relative;
+  background-color: $background-color;
+  border-top: 5px solid $border-color-03;
+  border-bottom: 1px solid $border-color-01;
 }
 
 .site-title {
@@ -37,7 +37,7 @@
   border-radius: 5px;
   text-align: right;
 
-  .nav-trigger {
+  .nav-trigger, .slab {
     display: none;
   }
 
@@ -46,7 +46,7 @@
     width: 36px;
     height: 26px;
     line-height: 0;
-    padding-top: 10px;
+    padding-top: 18px;
     text-align: center;
 
     > svg path {
@@ -63,27 +63,39 @@
     cursor: pointer;
   }
 
-  input ~ .trigger {
+  #nav-trigger ~ .drawer-container {
+    position: absolute;
+    top: 47px;
+    right: -16px;
     clear: both;
-    display: none;
+    width: 0;
+    height: calc(100vh - 60px);
+    transition: width 1s;
+    overflow: hidden;
+    background-color: $background-color;
+    border-left: 1px solid;
+    border-left-color: transparent;
+    .drawer { opacity: 0 }
   }
 
-  input:checked ~ .trigger {
-    display: block;
+  #nav-trigger:checked ~ .drawer-container {
+    width: 180px;
     padding-bottom: 5px;
+    transition: width 1s;
+    overflow: auto;
+    border-left-color: $border-color-01;
+    .drawer {
+      padding: $spacing-unit * 0.5;
+      opacity: 1;
+      transition: opacity 2s;
+    }
   }
 
-  .page-link {
+  .nav-item {
+    display: block;
+    padding: 5px 0;
     color: $text-color;
     line-height: $base-line-height;
-    display: block;
-    padding: 5px 10px;
-    margin-left: 20px;
-
-    // Gaps between nav items, but not on the last one
-    &:not(:last-child) {
-      margin-right: 0;
-    }
   }
 
   @media screen and (min-width: $on-medium) {
@@ -92,25 +104,24 @@
     border: none;
     background-color: inherit;
 
+    .drawer-container,
+    .menu-icon,
     label[for="nav-trigger"] {
       display: none;
     }
 
-    .menu-icon {
-      display: none;
-    }
-
-    input ~ .trigger {
+    .slab {
       display: block;
+      padding-top: 1px;
     }
 
-    .page-link {
+    .nav-item {
       display: inline;
       padding: 0;
       margin-left: auto;
 
       &:not(:last-child) {
-        margin-right: 20px;
+        margin-right: $spacing-unit * 0.5;
       }
     }
   }
@@ -201,7 +212,9 @@
  * Page content
  */
 .page-content {
-  padding: $spacing-unit 0;
+  padding-top: 60px + $spacing-unit;
+  padding-inline: 0;
+  padding-bottom: $spacing-unit;
   flex: 1 0 auto;
 }
 
