Implement secondary menu

README.md

@@ -35,6 +35,7 @@ To get the latest version please head over the [releases page](https://github.co
 * Subscription form [more info here](https://github.com/eddiesigner/liebling/wiki/How-to-enable-subscribers)
 * Multiple authors
 * Logo support
+* Secondary menu
 * Featured posts and pages
 * Post, Page, Tag, Authors, pages
 * Koenig editor

default.hbs

@@ -15,11 +15,11 @@
       /* This font-face is here to make icons work if the Ghost instance is installed in a subdirectory */
       @font-face {
         font-family: 'icomoon';
-        src: url("{{asset 'fonts/icomoon.eot?o5zacw'}}");
-        src: url("{{asset 'fonts/icomoon.eot?o5zacw#iefix'}}") format('embedded-opentype'),
-        url("{{asset 'fonts/icomoon.ttf?o5zacw'}}") format('truetype'),
-        url("{{asset 'fonts/icomoon.woff?o5zacw'}}") format('woff'),
-        url("{{asset 'fonts/icomoon.svg?o5zacw#icomoon'}}") format('svg');
+        src: url("{{asset 'fonts/icomoon.eot?vukg2s'}}");
+        src: url("{{asset 'fonts/icomoon.eot?vukg2s#iefix'}}") format('embedded-opentype'),
+        url("{{asset 'fonts/icomoon.ttf?vukg2s'}}") format('truetype'),
+        url("{{asset 'fonts/icomoon.woff?vukg2s'}}") format('woff'),
+        url("{{asset 'fonts/icomoon.svg?vukg2s#icomoon'}}") format('svg');
         font-weight: normal;
         font-style: normal;
         font-display: swap;

locales/en.json

@@ -14,6 +14,7 @@
   "Great! Next, complete checkout for full access.": "Great! Next, complete checkout for full access.",
   "Great! You've successfully subscribed.": "Great! You've successfully subscribed.",
   "JavaScript license information": "JavaScript license information",
+  "More": "More",
   "No posts": "No posts",
   "No posts found": "No posts found",
   "No recent articles found :(": "No recent articles found :(",

locales/es.json

@@ -14,6 +14,7 @@
   "Great! Next, complete checkout for full access.": "¡Genial! Ahora, completa el checkout para tener acceso completo.",
   "Great! You've successfully subscribed.": "¡Genial! Te has suscrito con éxito.",
   "JavaScript license information": "Información de licencia JavaScript",
+  "More": "Más",
   "No posts": "No hay artículos",
   "No posts found": "No se encontraron artículos",
   "No recent articles found :(": "No se han encontrado artículos recientes :(",

package.json

@@ -54,5 +54,5 @@
     "desktop": "assets/screenshot-desktop.jpg",
     "mobile": "assets/screenshot-mobile.jpg"
   },
-  "version": "0.6.9"
+  "version": "0.7.0"
 }

partials/header.hbs

@@ -46,6 +46,14 @@ This header template is shared across all the pages.
               {{#if @site.navigation}}
                 {{navigation}}
               {{/if}}
+              {{#if @site.secondary_navigation}}
+                <li class="more" role="menuitem">
+                  <a href="javascript:void(0);" class="js-open-secondary-menu">
+                    {{t "More"}}
+                    <span class="icon-chevron-down"></span>
+                  </a>
+                </li>
+              {{/if}}
               <li role="menuitem" class="js-submenu-option">
                 <button class="m-icon-button in-menu-main more js-toggle-submenu" aria-label="Toggle submenu">
                   <span class="icon-more"></span>
@@ -110,4 +118,10 @@ This header template is shared across all the pages.
       </div>
     </div>
   </div>
+
+  {{#if @site.secondary_navigation}}
+    <div id="secondary-navigation-template" style="display: none;">
+      {{navigation type="secondary"}}
+    </div>
+  {{/if}}
 </header>

partials/navigation.hbs

@@ -3,8 +3,18 @@ This navigation template is shared across all the pages.
 Also it includes the big submenu.
 --}}
 
-{{#foreach navigation}}
-  <li class="nav-{{slug}}{{#if current}} nav-current{{/if}}">
+{{#if isSecondary}}
+  <ul class="m-secondary-menu" role="menu">
+    {{#foreach navigation}}
+      <li class="nav-{{slug}}{{#if current}} nav-current{{/if}}" role="menuitem">
         <a href="{{url absolute="true"}}">{{label}}</a>
       </li>
-{{/foreach}}
+    {{/foreach}}
+  </ul>
+{{else}}
+  {{#foreach navigation}}
+    <li class="nav-{{slug}}{{#if current}} nav-current{{/if}}" role="menuitem">
+      <a href="{{url absolute="true"}}">{{label}}</a>
+    </li>
+  {{/foreach}}
+{{/if}}

src/js/app.js

@@ -11,6 +11,7 @@ import {
   isRTL,
   formatDate,
   isDarkMode,
+  isMobile,
   getParameterByName
 } from './helpers'
 
@@ -30,6 +31,7 @@ $(document).ready(() => {
   const $submenuOption = $('.js-submenu-option')[0]
   const $submenu = $('.js-submenu')
   const $recentArticles = $('.js-recent-articles')
+  const $openSecondaryMenu = $('.js-open-secondary-menu')
   const $openSearch = $('.js-open-search')
   const $closeSearch = $('.js-close-search')
   const $search = $('.js-search')
@@ -42,6 +44,7 @@ $(document).ready(() => {
 
   let fuse = null
   let submenuIsOpen = false
+  let secondaryMenuTippy = null
 
   function showSubmenu() {
     $header.addClass('submenu-is-active')
@@ -257,7 +260,19 @@ $(document).ready(() => {
         down: 10,
         up: 20
       },
-      offset: 15
+      offset: 15,
+      onUnpin: () => {
+        if (!isMobile() && secondaryMenuTippy) {
+          console.log(secondaryMenuTippy)
+          const desktopSecondaryMenuTippy = secondaryMenuTippy[0]
+
+          if (
+            desktopSecondaryMenuTippy && desktopSecondaryMenuTippy.state.isVisible
+          ) {
+            desktopSecondaryMenuTippy.hide()
+          }
+        }
+      }
     })
     headroom.init()
   }
@@ -293,6 +308,17 @@ $(document).ready(() => {
   })
   observer.observe()
 
+  if ($openSecondaryMenu.length > 0) {
+    const template = document.getElementById('secondary-navigation-template')
+
+    secondaryMenuTippy = tippy('.js-open-secondary-menu', {
+      content: template.innerHTML,
+      arrow: true,
+      trigger: 'click',
+      interactive: true
+    })
+  }
+
   tippy('.js-tooltip')
 
   shave('.js-article-card-title', 100)

src/sass/app.scss

@@ -29,6 +29,7 @@
 @import "components/header/site-name";
 @import "components/header/nav";
 @import "components/header/menu";
+@import "components/header/secondary-menu";
 @import "components/header/submenu";
 @import "components/header/submenu-title";
 @import "components/header/recent-articles";

src/sass/common/_icons.scss

@@ -14,83 +14,66 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-.icon-letterboxd:before {
-  content: "\e91f";
-}
-.icon-star:before {
+
+.icon-chevron-down:before {
   content: "\e900";
 }
-.icon-arrow-left:before {
+.icon-star:before {
   content: "\e901";
 }
-.icon-arrow-right:before {
+.icon-arrow-left:before {
   content: "\e902";
 }
-.icon-arrow-top:before {
+.icon-arrow-right:before {
   content: "\e903";
 }
-.icon-close:before {
+.icon-arrow-top:before {
   content: "\e904";
 }
-.icon-comments:before {
+.icon-close:before {
   content: "\e905";
 }
-.icon-facebook:before {
+.icon-comments:before {
   content: "\e906";
 }
-.icon-globe:before {
+.icon-facebook:before {
   content: "\e907";
 }
-.icon-menu:before {
+.icon-globe:before {
   content: "\e908";
 }
-.icon-more:before {
+.icon-menu:before {
   content: "\e909";
 }
-.icon-search:before {
+.icon-more:before {
   content: "\e90a";
 }
-.icon-twitter:before {
+.icon-search:before {
   content: "\e90b";
 }
-.icon-behance:before {
-  content: "\e951";
-}
-.icon-deviantart:before {
-  content: "\e928";
-}
-.icon-discord:before {
-  content: "\e929";
-}
-.icon-flickr:before {
-  content: "\e91e";
-}
-.icon-github:before {
-  content: "\e930";
-}
-.icon-gitlab:before {
-  content: "\e92d";
-}
-.icon-imdb:before {
+.icon-twitter:before {
   content: "\e90c";
 }
-.icon-instagram:before {
-  content: "\e92a";
+.icon-imdb:before {
+  content: "\e90d";
 }
-.icon-linkedin:before {
-  content: "\e92b";
+.icon-vk:before {
+  content: "\e90e";
 }
-.icon-mixcloud:before {
-  content: "\e925";
+.icon-steam:before {
+  content: "\e914";
 }
-.icon-mixer:before {
-  content: "\e926";
+.icon-twitch:before {
+  content: "\e915";
 }
-.icon-odnoklassniki:before {
-  content: "\e920";
+.icon-youtube:before {
+  content: "\e916";
 }
-.icon-pinterest:before {
-  content: "\e921";
+.icon-vimeo:before {
+  content: "\e917";
+}
+.icon-whatsapp:before {
+  content: "\e918";
 }
 .icon-reddit:before {
   content: "\e919";
@@ -98,20 +81,26 @@
 .icon-rss:before {
   content: "\e91a";
 }
-.icon-snapchat:before {
-  content: "\e92c";
+.icon-spotify:before {
+  content: "\e91b";
+}
+.icon-telegram:before {
+  content: "\e91c";
 }
 .icon-soundcloud:before {
   content: "\e91d";
 }
-.icon-spotify:before {
-  content: "\e91b";
+.icon-flickr:before {
+  content: "\e91e";
 }
-.icon-steam:before {
-  content: "\e914";
+.icon-letterboxd:before {
+  content: "\e91f";
 }
-.icon-telegram:before {
-  content: "\e91c";
+.icon-odnoklassniki:before {
+  content: "\e920";
+}
+.icon-pinterest:before {
+  content: "\e921";
 }
 .icon-tiktok:before {
   content: "\e922";
@@ -119,24 +108,39 @@
 .icon-tumblr:before {
   content: "\e923";
 }
-.icon-twitch:before {
-  content: "\e915";
+.icon-xing:before {
+  content: "\e924";
 }
-.icon-vimeo:before {
-  content: "\e917";
+.icon-mixcloud:before {
+  content: "\e925";
 }
-.icon-vk:before {
-  content: "\e90d";
+.icon-mixer:before {
+  content: "\e926";
 }
 .icon-wechat:before {
   content: "\e927";
 }
-.icon-whatsapp:before {
-  content: "\e918";
+.icon-deviantart:before {
+  content: "\e928";
 }
-.icon-xing:before {
-  content: "\e924";
+.icon-discord:before {
+  content: "\e929";
 }
-.icon-youtube:before {
-  content: "\e916";
+.icon-instagram:before {
+  content: "\e92a";
+}
+.icon-linkedin:before {
+  content: "\e92b";
+}
+.icon-snapchat:before {
+  content: "\e92c";
+}
+.icon-gitlab:before {
+  content: "\e92d";
+}
+.icon-github:before {
+  content: "\e930";
+}
+.icon-behance:before {
+  content: "\e951";
 }

src/sass/components/author/_author.scss

@@ -22,7 +22,6 @@
 .m-author__content {
   @include respond-to('medium') {
     display: flex;
-    width: 100%;
     max-width: 820px;
   }
 }

src/sass/components/header/_nav.scss

@@ -49,6 +49,25 @@
       a {
         color: inherit;
       }
+
+      &.more {
+        a {
+          display: inline-flex;
+          align-items: center;
+
+          @include respond-to('medium') {
+            display: flex;
+          }
+
+          span {
+            display: inline-block;
+            color: inherit;
+            font-size: 0.375rem;
+            margin-left: 8px;
+            @include transform(translateY(1px));
+          }
+        }
+      }
     }
   }
 }

src/sass/components/header/_secondary-menu.scss

@@ -0,0 +1,39 @@
+.m-secondary-menu {
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
+
+  li {
+    font-size: 1rem;
+
+    &.nav-current {
+      a {
+        font-weight: 600;
+      }
+    }
+
+    a {
+      display: block;
+      padding: 6px 10px;
+      border-radius: 4px;
+      @include transition(background-color linear 0.1s);
+
+      @include respond-to('medium') {
+        padding: 8px 10px;
+      }
+
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.1);
+      }
+    }
+  }
+}
+
+.rtl {
+  .m-secondary-menu {
+    .li,
+    .li a {
+      text-align: right !important;
+    }
+  }
+}