Convert sidebar to topbar (in progress, incomplete)

wang-arthur · Jan 14, 2025 · f2404f0 · f2404f0
1 parent ddb2643
commit f2404f0
Show file tree

Hide file tree

Showing 4 changed files with 127 additions and 3 deletions.
diff --git a/_config.yml b/_config.yml
@@ -427,7 +427,7 @@ defaults:
       type: pages
     values:
       layout: single
-      sidebar:
+      topbar:
         nav: "teaching"
   # teaching/courses
   - scope:
@@ -447,7 +447,7 @@ defaults:
       layout: single
       share: false
       date_format: "%Y"
-      sidebar:
+      topbar:
         nav: "teaching"
   # teaching/student-work
   - scope:
@@ -457,7 +457,7 @@ defaults:
       layout: single
       share: false
       date_format: "%Y"
-      sidebar:
+      topbar:
         nav: "teaching"
 
 

diff --git a/_includes/topbar.html b/_includes/topbar.html
@@ -0,0 +1,42 @@
+{% if page.topbar %}
+  <div class="topbar">
+  {% for s in page.topbar %}
+    {% if s.image %}
+      <img src="{{ s.image | relative_url }}"
+            alt="{% if s.image_alt %}{{ s.image_alt }}{% endif %}">
+    {% endif %}
+    {% if s.title %}<h3>{{ s.title }}</h3>{% endif %}
+    {% if s.text %}{{ s.text | markdownify }}{% endif %}
+    {% if s.nav %}{% include nav_list nav=s.nav %}{% endif %}
+  {% endfor %}
+  {% if page.topbar.nav %}
+    {% include nav_list nav=page.topbar.nav %}
+  {% endif %}
+
+  </div>
+
+
+<!-- convert masthead instead of sidebar! -->
+ <!-- 
+  <div class="topbar">
+    <div class="topbar__inner-wrap">
+      <div class="topbar__menu">
+        <nav id="topbar-nav" class="greedy-nav">
+          <ul class="visible-links">
+            {%- for link in site.data.navigation.main -%}
+              <li class="masthead__menu-item">
+                <a href="{{ link.url | relative_url }}"{% if link.description %} title="{{ link.description }}"{% endif %}>{{ link.title }}</a>
+              </li>
+            {%- endfor -%}
+          </ul>
+          <button class="greedy-nav__toggle hidden" type="button">
+            <span class="visually-hidden">{{ site.data.ui-text[site.locale].menu_label | default: "Toggle menu" }}</span>
+            <div class="navicon"></div>
+          </button>
+          <ul class="hidden-links hidden"></ul>
+        </nav>
+      </div>
+    </div>
+  </div> -->
+
+{% endif %}
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -17,6 +17,7 @@
   <body class="layout--{{ page.layout | default: layout.layout }}{% if page.classes or layout.classes %}{{ page.classes | default: layout.classes | join: ' ' | prepend: ' ' }}{% endif %}">
     {% include_cached skip-links.html %}
     {% include_cached masthead.html %}
+    {% include topbar.html %}
 
     <div class="initial-content">
       {{ content }}

diff --git a/_sass/minimal-mistakes/_topbar.scss b/_sass/minimal-mistakes/_topbar.scss
@@ -0,0 +1,81 @@
+/* ==========================================================================
+   TOPBAR
+   ========================================================================== */
+
+/*
+   Default
+   ========================================================================== */
+
+
+.topbar {
+    position: relative;
+    border-bottom: 1px solid $border-color;
+    -webkit-animation: $intro-transition;
+    animation: $intro-transition;
+    -webkit-animation-delay: 0.15s;
+    animation-delay: 0.15s;
+    z-index: 20;
+    background-color: $header-background-color;
+
+    &__inner-wrap {
+        @include clearfix;
+        margin-left: auto;
+        margin-right: auto;
+        padding: 1em;
+        max-width: 100%;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+        justify-content: space-between;
+        font-family: $sans-serif-narrow;
+
+        @include breakpoint($x-large) {
+        max-width: $max-width;
+        }
+
+        nav {
+        z-index: 10;
+        }
+
+        a {
+        text-decoration: none;
+        }
+    }
+}
+
+.topbar__menu {
+    float: left;
+    margin-left: 0;
+    margin-right: 0;
+    width: 100%;
+    clear: both;
+
+    .site-nav {
+        margin-left: 0;
+
+        @include breakpoint($small) {
+        float: right;
+        }
+    }
+
+    ul {
+        margin: 0;
+        padding: 0;
+        clear: both;
+        list-style-type: none;
+    }
+}
+
+.topbar__menu-item {
+    display: block;
+    list-style-type: none;
+    white-space: nowrap;
+
+    &--lg {
+        padding-right: 2em;
+        font-weight: 700;
+    }
+}
+