menú con sub ítems

esto no es lo mejor para ux y necesita que lo modifiquemos pero no
quería desaprovecharlo ya que lo hicimos para otro proyecto.

_config.yml

@@ -1,5 +1,6 @@
 plugins:
 - jekyll-locales
+- jekyll-ignore-layouts
 - jekyll-relative-urls
 - jekyll-dotenv
 - jekyll-include-cache
@@ -55,3 +56,9 @@ images:
     - 1140
 locales:
 - es
+ignored_layouts:
+- menu
+linked_fields:
+- post
+- item
+- items

_data/en.yml

@@ -49,6 +49,7 @@ time:
   pm: pm
 layouts:
   post: Article
+  menu: Menu
 menu:
   title: Menu
   items:

_data/es.yml

@@ -49,6 +49,7 @@ time:
   pm: pm
 layouts:
   post: Artículo
+  menu: Menú
 menu:
   title: Menú
   items:

_data/layouts/menu.yml

@@ -0,0 +1,73 @@
+---
+title:
+  type: 'string'
+  required: true
+  label:
+    en: ''
+    es: 'Nombre del ítem'
+  help:
+    en: ''
+    es: 'Tal como aparece en el menú'
+post:
+  type: 'belongs_to'
+  label:
+    en: ''
+    es: 'Artículo'
+  help:
+    en: ''
+    es: 'Si el ítem lleva a un artículo fijo, asociarlo aquí'
+item:
+  type: 'belongs_to'
+  inverse: items
+  filter:
+    layout: menu
+  label:
+    en: ''
+    es: 'Ítem anterior'
+  help:
+    en: ''
+    es: 'Si es un sub ítem, asociar el ítem superior aquí'
+items:
+  type: 'has_many'
+  inverse: item
+  filter:
+    layout: menu
+  label:
+    en: ''
+    es: 'Sub ítemes'
+  help:
+    en: ''
+    es: 'Si el ítem tiene sub ítems, asociarlos aquí'
+link:
+  type: 'string'
+  label:
+    en: ''
+    es: 'Vínculo'
+  help:
+    en: ''
+    es: 'Si el ítem lleva a una página o sección especial, asociarla aquí'
+categories:
+  type: 'array'
+  label:
+    en: ''
+    es: 'Categorías'
+  help:
+    en: ''
+    es: 'Si el ítem lleva un sub menú de categorías, agregarlas aquí'
+draft:
+  type: 'boolean'
+  label:
+    es: 'Borrador'
+    en: 'Draft'
+  help:
+    es: 'Este artículo aun no está listo para publicar'
+    en: "This post isn't ready to be published yet"
+order:
+  type: 'order'
+  required: true
+  label:
+    es: 'Orden'
+    en: 'Order'
+  help:
+    es: 'La posición del artículo en la lista de artículos'
+    en: 'The post position in the posts list'

_includes/item.html

@@ -0,0 +1,38 @@
+{%- comment -%}
+El ítem tiene un dropdown si tiene sub ítems o si tiene categorías.
+{%- endcomment -%}
+{%- assign dropdown = include.item.items | present -%}
+{%- unless dropdown -%}
+{%- assign dropdown = include.item.categories | present -%}
+{%- endunless -%}
+
+<div class="nav-item w-100 w-lg-auto {{ dropdown | value_if: 'dropdown d-flex flex-wrap' }}">
+  {%- comment -%}
+  La URL del item puede ser:
+  * El artículo vinculado
+  * El vínculo escrito manualmente
+  * La primera categoría de la lista
+  * La dirección propia (en el caso de categorías)
+  {%- endcomment -%}
+  <a
+    href="{{ include.item.post.url | default: include.item.link | default: include.item.categories[0].url | default: include.item.url }}"
+    class="nav-link flex-grow-1 flex-grow-lg-0">
+    {{ include.item.title }}
+  </a>
+
+  {%- if dropdown -%}
+    <button class="dropdown-toggle border-0 background-white w-5 w-lg-auto pl-lg-3"></button>
+    <div class="dropdown-menu w-100 w-lg-auto flex-grow-1 flex-grow-lg-0">
+      {% for item in include.item.items %}
+        {%- include_cached item.html item=item -%}
+      {% endfor %}
+
+      {%- comment -%}
+      Esto necesita `replace` en sutty-archives
+      {%- endcomment -%}
+      {%- for item in include.item.categories offset: 1 -%}
+        {%- include_cached item.html item=item -%}
+      {%- endfor -%}
+    </div>
+  {%- endif -%}
+</div>

_includes/menu.html

@@ -0,0 +1,27 @@
+{%- comment -%}
+Empezamos con los ítems que no dependen de otros e implementamos
+recursivamente.
+{%- endcomment -%}
+{%- assign items = site.posts | where: 'layout', 'menu' | where: 'item', nil -%}
+
+<nav class="navbar navbar-expand-lg navbar-light">
+  <button class="navbar-toggler"
+          type="button"
+          data-toggle="collapse"
+          data-target="#menu"
+          aria-label="{{ site.i18n.menu.title }}">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+
+  <div class="collapse navbar-collapse" id="menu">
+    <div class="navbar-nav w-100 d-flex align-items-start justify-content-center">
+      {% for item in items %}
+        {%- include_cached item.html item=item -%}
+      {% endfor %}
+
+      <div class="nav-item w-100 w-lg-auto">
+        {%- include_cached search.html -%}
+      </div>
+    </div>
+  </div>
+</nav>

_includes/search.html

@@ -0,0 +1,25 @@
+{%- assign param = include.param | default: 'search' -%}
+
+<form method="get" action="" class="form-inline" data-controller="search">
+  <div class="form-group">
+    <label for="{{ param }}_q" class="sr-only">{{ site.i18n.search.label }}</label>
+
+    <div class="input-group flex-nowrap">
+      <div class="input-group-prepend">
+        <span class="input-group-text fa fa-search border-0 pt-2"></span>
+      </div>
+
+      <input
+        class="border-0 form-control"
+        type="search"
+        required
+        id="{{ param }}_q"
+        name="q"
+        placeholder="{{ site.i18n.search.submit }}"
+        data-target="search.q"
+        autocomplete="off" />
+    </div>
+  </div>
+
+  <input class="sr-only" type="submit" value="{{ site.i18n.search.submit }}" />
+</form>

_sass/menu.scss

@@ -0,0 +1,20 @@
+.navbar {
+  &:focus-within {
+    .navbar-collapse {
+      @extend .d-block;
+    }
+  }
+
+  .dropdown {
+    .dropdown-menu {
+      @extend .d-none;
+    }
+
+    &:hover,
+    &:focus-within {
+      .dropdown-menu {
+        @extend .d-block;
+      }
+    }
+  }
+}

assets/css/styles.scss

@@ -38,6 +38,7 @@ $opacities: (
 @import "embed";
 @import "snap";
 @import "editor";
+@import "menu";
 
 @if $debug {
   /*

sutty-base-jekyll-theme.gemspec

@@ -68,6 +68,7 @@ Gem::Specification.new do |spec|
   spec.add_runtime_dependency 'jekyll-commonmark', '~> 1.3'
   spec.add_runtime_dependency 'jekyll-dotenv', '>= 0.2'
   spec.add_runtime_dependency 'jekyll-feed', '~> 0.15'
+  spec.add_runtime_dependency 'jekyll-ignore-layouts', '~> 0'
 
   # Dependencias de desarrollo
   spec.add_development_dependency 'bundler', '~> 2.1'