Botón añadido al nav para abrir y cerrar el menú

diff --git a/static/images/menu-abierto.png b/static/images/menu-abierto.png
new file mode 100644 (file)
index 0000000..400bf2a
Binary files /dev/null and b/static/images/menu-abierto.png differ

diff --git a/static/images/menu.png b/static/images/menu.png
new file mode 100644 (file)
index 0000000..038acd5
Binary files /dev/null and b/static/images/menu.png differ

diff --git a/themes/droda/assets/css/main.css b/themes/droda/assets/css/main.css
index 080d8366efd675c97b6b0c9733bc18493e91243d..52014616a6683b68a54d97f082b6ec275664774c 100644 (file)
--- a/themes/droda/assets/css/main.css
+++ b/themes/droda/assets/css/main.css
@@ -236,6 +236,29 @@ footer {
    margin: 0 auto;
 }
 
+.boton-movil {
+   display: flex;
+   position: relative;
+   width: 4rem;
+   height: 4rem;
+   right: 0.4rem;
+
+   background-image: url('../images/menu.png');
+   background-color: transparent; /* Cuando usamos background-image se pone el background-color en blanco por default por eso le indicamos que sea transparente para que se pueda ver la imagen. */
+   background-position: top left;
+   background-repeat: no-repeat;
+   background-size: cover;
+
+   border: none;
+
+   transition: background-image ease 0.2s;
+
+}
+
+.boton-movil[data-visible="true"] {
+   background-image: url('../images/menu-abierto.png');
+}
+
 @media screen and (min-width: 780px) {
    :root {
       --globalScale: 1.5;
@@ -252,6 +275,11 @@ footer {
    aside {
       display: flex;
    }
+
+   .boton-movil {
+      display: none;
+   }
+   
 }
 
 @media screen and (min-width: 1280px) {

diff --git a/themes/droda/layouts/partials/boton.html b/themes/droda/layouts/partials/boton.html
new file mode 100644 (file)
index 0000000..4606e06
--- /dev/null
+++ b/themes/droda/layouts/partials/boton.html
@@ -0,0 +1,8 @@
+{{ "<!-- Partial block for boton-->" | safeHTML }}
+<button class="boton-movil" data-visible="false" onclick="
+        if(this.attributes[1].nodeValue === 'true'){
+            this.attributes[1].nodeValue = false;
+        } else {
+            this.attributes[1].nodeValue = true;
+        }
+      "></button>
\ No newline at end of file

diff --git a/themes/droda/layouts/partials/navbar.html b/themes/droda/layouts/partials/navbar.html
index e77ce2fdb3f1048ee88d67ecfe3ee95e348346bc..fd8dced8bee5f53c524dd0d676f258a5ee5e344c 100644 (file)
--- a/themes/droda/layouts/partials/navbar.html
+++ b/themes/droda/layouts/partials/navbar.html
@@ -7,5 +7,6 @@
   {{ range .Site.Sections }}
   <li><a class="hover" href="{{ .Permalink }}">{{ .Title }}</a></li>
   {{ end }}
+  {{ partial "boton.html" . }}
   </ul>
 </nav>