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.
This commit is contained in:
f 2021-02-10 20:37:39 -03:00
parent cbb6e21854
commit 968f39501b
10 changed files with 194 additions and 0 deletions

View file

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

View file

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

View file

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

73
_data/layouts/menu.yml Normal file
View file

@ -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'

38
_includes/item.html Normal file
View file

@ -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>

27
_includes/menu.html Normal file
View file

@ -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>

25
_includes/search.html Normal file
View file

@ -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>

20
_sass/menu.scss Normal file
View file

@ -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;
}
}
}
}

View file

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

View file

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