Add Github edit and social media links to mobile menu

Author: kylegordy

_includes/header.html

@@ -16,15 +16,16 @@ <h1 class="m-0">
         </h1>
 
         <!-- Mobile menu button -->
-        <button class="nav__menu-trigger" type="button" aria-label="Navigation Menu" aria-expanded="false">
+        <button class="nav__menu-trigger hidden-md" type="button" aria-label="Navigation Menu" aria-expanded="false">
+            <span class="visually-hidden">Menu</span>
             <span class="hamburger">
                 <span class="hamburger__inner"></span>
             </span>
         </button>
 
-        <!-- Page List -->
+        <!-- Page list -->
         {%- if page_paths -%}
-            <ul class="nav-list list--inline monospace">
+            <ul class="nav-list list--plain monospace">
             {%- for path in page_paths -%}
                 {%- assign my_page = site.pages | where: "path", path | first -%}
                 {% assign class = nil %}
@@ -36,7 +37,28 @@ <h1 class="m-0">
                     <a class="nav-list__link {{ class }}" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
                 </li>
                 {%- endif -%}
-            {%- endfor -%}
+                {%- endfor -%}
+
+                <!-- Social icons (mobile only) -->
+                <li class="nav-social-list hidden-md">
+                    <a class="nav-social-list__item text-white no-underline" href="https://www.twitter.com/{{ site.twitter_username| cgi_escape | escape }}">
+                        <svg class="svg-icon"><use xlink:href="{{ '/assets/images/icons/social-icons.svg#twitter' | relative_url }}"></use></svg>
+                    </a>
+                    <a class="nav-social-list__item text-white no-underline" href="https://www.facebook.com/{{ site.facebook_username| cgi_escape | escape }}">
+                        <svg class="svg-icon"><use xlink:href="{{ '/assets/images/icons/social-icons.svg#facebook' | relative_url }}"></use></svg>
+                    </a>
+                    <a class="nav-social-list__item text-white no-underline" href="https://www.linkedin.com/company/{{ site.linkedin_username| cgi_escape | escape }}">
+                        <svg class="svg-icon"><use xlink:href="{{ '/assets/images/icons/social-icons.svg#linkedin' | relative_url }}"></use></svg>
+                    </a>
+                    <a class="nav-social-list__item text-white no-underline" href="https://github.com/{{ site.github_username| cgi_escape | escape }}">
+                        <svg class="svg-icon"><use xlink:href="{{ '/assets/images/icons/social-icons.svg#github' | relative_url }}"></use></svg>
+                    </a>
+                </li>
+
+                <!-- Github links (mobile only) -->
+                <li class="hidden-md monospace fs-md">
+                    <a class="nav-github-link text-white" href="{{site.github.repository_url}}/edit/{{ site.branch }}/{{page.path}}">Improve this Page</a><a class="nav-github-link text-white" href="{{site.github.repository_url}}/commits/{{ site.branch }}/{{page.path}}">Page History</a>
+                </li>
             </ul>
         {%- endif -%}
     </nav>

assets/_sass/base/_colors.scss

@@ -3,7 +3,7 @@
 ////////////////////
 
 $cabernet-dark: #5A1D41;
-$cabernet-dark: #6A244D;
+$cabernet: #6A244D;
 $cabernet-light: #7F1652;
 
 $midnight-dark: #001927;

assets/_sass/base/_helpers.scss

@@ -1,3 +1,25 @@
+////////////////////
+// Color Modifiers
+////////////////////
+
+.text-white {color: $white}
+
+////////////////////
+// Font Size
+////////////////////
+
+.fs-md {
+    font-size: rem-calc(14px);
+}
+
+////////////////////
+// Links
+////////////////////
+
+.no-underline {
+    text-decoration: none;
+}
+
 ////////////////////
 // List
 ////////////////////
@@ -27,6 +49,24 @@
     display: none !important;
 }
 
+.hidden-sm {
+    @media (min-width: $bp-sm) {
+        display: none !important;
+    }
+}
+
+.hidden-md {
+    @media (min-width: $bp-md) {
+        display: none !important;
+    }
+}
+
+.hidden-lg {
+    @media (min-width: $bp-lg) {
+        display: none !important;
+    }
+}
+
 // Hide only visually, but have it available for screen readers:
 // https://a11yproject.com/posts/how-to-hide-content/
 .visually-hidden:not(:focus):not(:active) {

assets/_sass/component/_navigation.scss

@@ -46,22 +46,21 @@ $nav-zindex: 10;
     justify-content: center;
     align-items: center;
     outline: none;
+}
 
-    @media (min-width: $bp-md) {
-        display: none;
-    }
-
+// Prevent background page from scrolling when menu is active
+.menu-active {
+    overflow: hidden;
 }
 
 .nav-list {
     @media (max-width: $bp-md) {
-    position: absolute;
-    top: $nav-height-sm;
+    position: fixed;
+    top: 0;
     right: 0;
     bottom: 0;
     left: 0;
-    height: calc(100vh - #{$nav-height-sm});
-    padding: rem-calc(20px) $cp-sm;
+    padding: $nav-height-sm $cp-sm rem-calc(20px);
     background-color: $teal;
     display: flex;
     flex-direction: column;
@@ -71,23 +70,25 @@ $nav-zindex: 10;
     transition-duration: 0.2s;
     transition-property: opacity, visibility, transform;
     transition-timing-function: ease-in-out;
+    z-index: -1;
     }
 }
 
+// Show nav list when .menu-active class is toggled
 .menu-active .nav-list{
     opacity: 1;
     visibility: visible;
 }
 
-
 .nav-list__item {
+    display: inline;
     border-bottom: 1px solid $teal-dark;
 
     @media (min-width: $bp-md) {
         border-bottom: none;
     }
 
-    &:not(:last-of-type) {
+    &:not(:first-of-type) {
 
         @media (min-width: $bp-md) {
             margin-left: rem-calc(20px);
@@ -118,6 +119,25 @@ $nav-zindex: 10;
     }
 }
 
+// Mobile social media icons
+.nav-social-list {
+    margin-top: auto;
+    margin-bottom: rem-calc(15px);
+    border-bottom: 1px solid $teal-dark;
+}
+
+.nav-social-list__item {
+    display: inline-block;
+    padding: rem-calc(20px 8px 20px 0);
+}
+
+// Mobile github links
+.nav-github-link:not(:last-child) {
+    margin-right: rem-calc(12px);
+    padding-right: rem-calc(12px);
+    border-right: 1px solid $teal-dark;
+}
+
 ////////////////////
 // Skip Nav Link
 ////////////////////