Add dropdown menu on mobile to improve responsive

4 files changed, 92 insertions, 2 deletions

diff --git a/assets/theme.scss b/assets/theme.scss
index 799d973..08908cf 100644
--- a/assets/theme.scss
+++ b/assets/theme.scss
@@ -19,8 +19,10 @@ body {
 		margin: 0;
 		padding: 0;
 		display: flex;
-		overflow: auto;
+		flex-direction: row;
 		justify-content: flex-start;
+		align-items: center;
+		overflow: auto;
 		border: 1px solid #333;
 		a {
 			font-size: 1.2em;
@@ -50,6 +52,64 @@ body {
 				display: inline;
 			}
 		}
+		&__dropdown-input,
+		&__dropdown-label,
+		&__dropdown-list {
+			display: none;
+		}
+		&__dropdown-input:checked {
+			& ~ .header__menu__dropdown-list {
+				display: flex;
+			}
+			& ~ .header__menu__dropdown-label .header__menu__dropdown-icon {
+				background: transparent;
+			}
+			& ~ .header__menu__dropdown-label .header__menu__dropdown-icon:before {
+				top: 0;
+				transform: rotate(-45deg);
+			}
+			& ~ .header__menu__dropdown-label .header__menu__dropdown-icon:after {
+				top: 0;
+				transform: rotate(45deg);
+			}
+		}
+		&__dropdown-label {
+			cursor: pointer;
+			padding: 1em;
+		}
+		&__dropdown-icon {
+			background: #333;
+			display: block;
+			height: 2px;
+			position: relative;
+			transition: background .2s ease-out;
+			width: 36px;
+			&:before,
+			&:after {
+				background: #333;
+				content: '';
+				display: block;
+				height: 100%;
+				position: absolute;
+				transition: all .2s ease-out;
+				width: 100%;
+			}
+			&:before {
+				top: 15px;
+			}
+			&:after {
+				top: -15px;
+			}
+		}
+		&__dropdown-list {
+			width: 100%;
+			flex-direction: column;
+			align-items: center;
+			border-top: 1px solid #333;
+			li {
+				padding: .5em;
+			}
+		}
 	}
 	&__search {
 		font-family: Courier New, sans-serif;
@@ -389,6 +449,14 @@ blockquote {
 		&__menu {
 			border: none;
 			border-bottom: 1px solid #333;
+			flex-wrap: wrap;
+			justify-content: space-between;
+			&__list {
+				display: none;
+			}
+			&__dropdown-label {
+				display: block;
+			}
 		}
 		&__search {
 			&__input {
diff --git a/i18n/en.toml b/i18n/en.toml
index 6dcb27f..86d0b67 100644
--- a/i18n/en.toml
+++ b/i18n/en.toml
@@ -2,6 +2,8 @@
 other = "Home"
 [notFound]
 other = "Page not found"
+[openDropdown]
+other = "Open dropdown menu"
 [search]
 other = "Search for a post..."
 [goBackHome]
diff --git a/i18n/es.toml b/i18n/es.toml
index 0ef0521..2048f7e 100644
--- a/i18n/es.toml
+++ b/i18n/es.toml
@@ -2,6 +2,8 @@
 other = "Inicio"
 [notFound]
 other = "Página no encontrada"
+[openDropdown]
+other = "Abrir menú desplegable"
 [search]
 other = "Buscar un artículo..."
 [goBackHome]
diff --git a/layouts/partials/header/menu.html b/layouts/partials/header/menu.html
index b9efe29..174c05a 100644
--- a/layouts/partials/header/menu.html
+++ b/layouts/partials/header/menu.html
@@ -1,5 +1,23 @@
+{{ $baseUrl := trim .Site.BaseURL "/" }}
 <ul class="header__menu__list">
-    {{ $baseUrl := trim .Site.BaseURL "/" }}
+    {{ range .Site.Menus.main }}
+        {{ $url := trim .URL "/" | absURL }}
+        <li>
+            <a href="{{ $url }}"
+                {{ if or (.Page) (hasPrefix $url $baseUrl) }} data-rel="prefetch"
+                {{else}} target="_blank" rel="nofollow noopener noreferrer" {{ end }}>
+                {{ .Pre }}<span>{{ .Name }}</span>
+            </a>
+        </li>
+    {{ end }}
+</ul>
+
+<input class="header__menu__dropdown-input" type="checkbox" id="dropdown"/>
+<label class="header__menu__dropdown-label" for="dropdown" role="button" aria-label="{{ i18n "openDropdown"}}">
+    <span class="header__menu__dropdown-icon"></span>
+</label>
+
+<ul class="header__menu__dropdown-list">
     {{ range .Site.Menus.main }}
         {{ $url := trim .URL "/" | absURL }}
         <li>