Merge pull request theme-next#156 from theme-next/sub-menu-feature

Added sub-menu feature.

layout/_layout.swig

@@ -33,6 +33,9 @@
     <main id="main" class="main">
       <div class="main-inner">
         <div class="content-wrap">
+          {% if theme.scheme === 'Pisces' || theme.scheme === 'Gemini' %}
+            {% include '_partials/sub-menu.swig' %}
+          {% endif %}
           <div id="content" class="content">
             {% block content %}{% endblock %}
           </div>

layout/_macro/menu/menu-badge-1.swig

@@ -0,0 +1,7 @@
+  {% macro render(value) %}
+  <li class="menu-item menu-item-{{ itemName | replace(' ', '-', 'g') }}">
+    <a href="{{ url_for(value.split('||')[0]) | trim }}" rel="section">
+      {% if theme.menu_settings.icons %}{#
+      #}<i class="menu-item-icon fa fa-fw fa-{{ value.split('||')[1] | trim | default('question-circle') }}"></i> <br />{#
+    #}{% endif %}{#
+#}{% endmacro %}

layout/_macro/menu/menu-badge-2.swig

@@ -0,0 +1,25 @@
+{% macro render(name, value) %}{#
+  #}{% if theme.menu_settings.badges %}{#
+    #}{% if name == 'archives' %}{#
+      #}{{ __('menu.' + name) | replace('menu.', '') }}{#
+      #}<span class="badge">{{ site.posts.length }}</span>
+      {% elseif name == 'categories' %}{#
+      #}{{ __('menu.' + name) | replace('menu.', '') }}{#
+      #}<span class="badge">{{ site.categories.length }}</span>
+      {% elseif name == 'tags' %}{#
+      #}{{ __('menu.' + name) | replace('menu.', '') }}{#
+      #}<span class="badge">{{ site.tags.length }}</span>
+      {% else %}{#
+      #}{% if value != '[object Object]' %}{#
+        #}{{ __('menu.' + name) | replace('menu.', '') }}{#
+      #}{% endif %}{#
+    #}{% endif %}{#
+  #}{% else %}{#
+    #}{% if value != '[object Object]' %}{#
+      #}{{ __('menu.' + name) | replace('menu.', '') }}{#
+    #}{% endif %}{#
+  #}{% endif %}{#
+
+#}</a>
+</li>
+{% endmacro %}

layout/_macro/menu/menu-item.swig

@@ -0,0 +1,10 @@
+{% macro render(name, value) %}
+<li class="menu-item menu-item-{{ itemName | replace(' ', '-', 'g') }}">
+  <a href="{{ url_for(value.split('||')[0]) | trim }}" rel="section">
+    {% if theme.menu_settings.icons %}{#
+    #}<i class="menu-item-icon fa fa-fw fa-{{ value.split('||')[1] | trim | default('question-circle') }}"></i> <br />{#
+  #}{% endif %}{#
+#}{{ __('menu.' + name ) | replace('menu.', '') }}{#
+#}</a>
+</li>
+{% endmacro %}

layout/_partials/header.swig

@@ -1,3 +1,7 @@
+{% import '../_macro/menu/menu-item.swig' as menu_item %}
+{% import '../_macro/menu/menu-badge-1.swig' as menu_badge_1 %}
+{% import '../_macro/menu/menu-badge-2.swig' as menu_badge_2 %}
+
 <div class="site-brand-wrapper">
   <div class="site-meta {% if theme.custom_logo.enabled %}custom-logo{% endif %}">
     {% if theme.custom_logo.image and theme.scheme === 'Muse' %}
@@ -10,7 +14,7 @@
     {% endif %}
 
     <div class="custom-logo-site-title">
-      <a href="{{ config.root }}"  class="brand" rel="start">
+      <a href="{{ config.root }}" class="brand" rel="start">
         <span class="logo-line-before"><i></i></span>
         <span class="site-title">{{ config.title }}</span>
         <span class="logo-line-after"><i></i></span>
@@ -38,32 +42,21 @@
   {% if theme.menu %}
     <ul id="menu" class="menu">
       {% for name, path in theme.menu %}
-        {% set itemName = name.toLowerCase() %}
-        <li class="menu-item menu-item-{{ itemName | replace(' ', '-') }}">
-          <a href="{{ url_for(path.split('||')[0]) | trim }}" rel="section">
-            {% if theme.menu_settings.icons %}{#
-            #}<i class="menu-item-icon fa fa-fw fa-{{ path.split('||')[1] | trim | default('question-circle') }}"></i> <br />{#
-          #}{% endif %}{#
-
-          #}{% if theme.menu_settings.badges %}{#
-            #}{% if name == 'archives' %}{#
-              #}{{ __('menu.' + name) | replace('menu.', '') }}{#
-              #}<span class="badge">{{ site.posts.length }}</span>
-              {% elseif name == 'categories' %}{#
-              #}{{ __('menu.' + name) | replace('menu.', '') }}{#
-              #}<span class="badge">{{ site.categories.length }}</span>
-              {% elseif name == 'tags' %}{#
-              #}{{ __('menu.' + name) | replace('menu.', '') }}{#
-              #}<span class="badge">{{ site.tags.length }}</span>
-              {% else %}{#
-              #}{{ __('menu.' + name) | replace('menu.', '') }}{#
-            #}{% endif %}{#
-          #}{% else %}{#
-            #}{{ __('menu.' + name) | replace('menu.', '') }}{#
-          #}{% endif %}{#
-
-        #}</a>
-        </li>
+        {% set respath = path %}
+        {% if path == '[object Object]' %}
+          {% for subname, subpath in path %}
+            {% set itemName = subname.toLowerCase() %}
+            {% set respath = subpath %}
+              {% if itemName == 'default' %}
+                {% set itemName = name.toLowerCase() %}{#
+              #}{{ menu_item.render(name, respath) }}{#
+            #}{% endif %}
+          {% endfor %}
+        {% else %}
+          {% set itemName = name.toLowerCase() %}{#
+        #}{{ menu_badge_1.render(respath) }}{#
+      #}{% endif %}{#
+        #}{{ menu_badge_2.render(name, path) }}
       {% endfor %}
 
       {% if hasSearch %}
@@ -83,6 +76,10 @@
     </ul>
   {% endif %}
 
+  {% if theme.scheme === 'Muse' || theme.scheme === 'Mist' %}
+    {% include 'sub-menu.swig' %}
+  {% endif %}
+
   {% if hasSearch %}
     <div class="site-search">
       {% include 'search.swig' %}

layout/_partials/sub-menu.swig

@@ -0,0 +1,92 @@
+{% if not is_home() && not is_post() %}
+  {% if theme.menu %}
+
+    {% import '../_macro/menu/menu-item.swig' as menu_item %}
+
+    {# Submenu & Submenu-2 #}
+    {% for name, value in theme.menu %}
+      {% set respath = value %}
+      {% if value == '[object Object]' %}
+
+        {# If current URL is value of parent submenu 'default' path #}
+        {% set currentParentUrl = page.path.split('/')[0] | trim %}
+        {% if currentParentUrl == value.default.split('||')[0] | trim | replace('/', '', 'g') %}
+
+          {# Submenu items #}
+          <ul id="sub-menu" class="sub-menu menu">
+          {% for subname, subvalue in value %}
+            {# For main submenu items #}
+            {% if subvalue != '[object Object]' %}
+              {% set itemName = subname.toLowerCase() %}
+              {% if itemName == 'default' %}
+                {% set parentValue = subvalue.split('||')[0] | trim %}
+              {% else %}
+                {% set respath = parentValue + subvalue %}
+                {{ menu_item.render(subname, respath) }}
+              {% endif %}
+            {% else %}
+              {# For 'default' submenu item in main submenu #}
+              {% set itemName = subname.toLowerCase() %}
+              {% for subname2, subvalue2 in subvalue %}
+                {% if subname2 == 'default' %}
+                  {% set respath = parentValue + subvalue2 %}
+                  {{ menu_item.render(subname, respath) }}
+                {% endif %}
+              {% endfor %}
+            {% endif %}
+          {% endfor %}
+          </ul>
+          {# End Submenu items #}
+
+          {# Submenu-2 #}
+          {% for name, value in theme.menu %}
+            {% set respath = value %}
+            {% if value == '[object Object]' %}
+
+              {% for subname, subvalue in value %}
+                {% set itemName = subname.toLowerCase() %}
+                {% if itemName == 'default' %}
+                  {% set parentValue = subvalue.split('||')[0] | trim %}
+                {% endif %}
+                {% if subvalue == '[object Object]' %}
+
+                  {# If current URL is value of parent submenu 'default' path #}
+                  {% set paths = page.path.split('/') %}
+                  {% for currentSubParentUrl in paths %}
+                    {% if currentSubParentUrl == subvalue.default.split('||')[0] | trim | replace('/', '', 'g') %}
+
+                      {# Submenu-2 items #}
+                      <ul id="sub-menu-2" class="sub-menu menu">
+                      {% for subname2, subvalue2 in subvalue %}
+                        {% set respath2 = subvalue %}
+                        {% set itemName = subname2.toLowerCase() %}
+                        {% if itemName == 'default' %}
+                          {% set parentSubValue = subvalue2.split('||')[0] | trim %}
+                        {% else %}
+                          {% set respath2 = parentValue + parentSubValue + subvalue2 %}
+                          {{ menu_item.render(subname2, respath2) }}
+                        {% endif %}
+                      {% endfor %}
+                      </ul>
+                      {# End Submenu-2 items #}
+
+                    {% endif %}
+                  {% endfor %}
+                  {# End URL & path comparing #}
+
+                {% endif %}
+              {% endfor %}
+
+            {% endif %}
+          {% endfor %}
+          {# End Submenu-2 #}
+
+        {% endif %}
+        {# End URL & path comparing #}
+
+      {% endif %}
+    {% endfor %}
+    {# End Submenu & Submenu-2 #}
+
+  {% endif %}
+{% endif %}

source/css/_schemes/Gemini/index.styl

@@ -1,6 +1,7 @@
 @import "../Pisces/_layout";
 @import "../Pisces/_brand";
 @import "../Pisces/_menu";
+@import "../Pisces/_sub-menu";
 @import "../Pisces/_sidebar";
 // Import _posts if want to justify text-align on mobile.
 //@import "../Pisces/_posts";
@@ -113,6 +114,25 @@ if $max-content-width {
   bottom: auto;
 }
 
+// Sub-menu(s).
+.sub-menu {
+  border-bottom: initial !important;
+  box-shadow: $box-shadow-inner;
+  // Adapt submenu(s) with post-blocks.
+  &+ #content > #posts {
+    .post-block {
+      box-shadow: $box-shadow;
+      margin-top: sboffset;
+      +tablet() {
+        margin-top: $content-tablet-padding;
+      }
+      +mobile() {
+        margin-top: $content-mobile-padding;
+      }
+    }
+  }
+}
+
 // =================================================
 // Headers.
 // =================================================

source/css/_schemes/Mist/_menu.styl

@@ -6,7 +6,7 @@
 }
 
 .menu {
-  float: right;
+  //float: right;
   margin: 8px 0 0 0;
 
   +mobile() {

source/css/_schemes/Pisces/_sub-menu.styl

@@ -0,0 +1,31 @@
+.sub-menu {
+  margin: 0;
+  padding: 6px 0;
+  background: #fff !important;
+  border-bottom: 1px solid $table-border-color;
+}
+
+.sub-menu .menu-item {
+  display: inline-block !important;
+
+  & a {
+    padding: initial !important;
+    margin: 5px 10px;
+  }
+
+  & a:hover {
+    background: initial !important;
+    color: $sidebar-highlight;
+  }
+}
+
+.sub-menu .menu-item-active a {
+  background: #fff !important;
+  color: $sidebar-highlight;
+  border-bottom-color: $sidebar-highlight;
+
+  &:hover {
+    background: #fff !important;
+    border-bottom-color: $sidebar-highlight;
+  }
+}

source/css/_schemes/Pisces/index.styl

@@ -1,5 +1,6 @@
 @import "_layout";
 @import "_brand";
 @import "_menu";
+@import "_sub-menu";
 @import "_sidebar";
 @import "_posts";

source/js/src/utils.js

@@ -195,13 +195,25 @@ NexT.utils = NexT.$u = {
   },
 
   /**
-   * Add `menu-item-active` class name to menu item
+   * Add `menu-item-active` class name to menu item(s)
    * via comparing location.path with menu item's href.
    */
   addActiveClassToMenuItem: function () {
     var path = window.location.pathname;
-    path = path === '/' ? path : path.substring(0, path.length - 1);
-    $('.menu-item a[href^="' + path + '"]:first').parent().addClass('menu-item-active');
+
+    if (path !== '/') {
+      var path = path.split('/');
+      var partPath = '';
+      for (i = 0; i < path.length; i++) {
+        if (path[i] !== '') {
+          partPath += '/' + path[i];
+          $('.menu-item a[href^="' + partPath + '"]:first').parent().addClass('menu-item-active');
+        }
+      }
+    } else {
+      //path = path === '/' ? path : path.substring(0, path.length - 1);
+      $('.menu-item a[href^="' + path + '"]:first').parent().addClass('menu-item-active');
+    }
   },
 
   hasMobileUA: function () {