Versión del botón que abre el aside en la versión móvil

diff --git a/themes/droda/assets/css/main.css b/themes/droda/assets/css/main.css
index 52014616a6683b68a54d97f082b6ec275664774c..1576bc9fda73731a80a22fc0661f101d0ba6f8c6 100644 (file)
--- a/themes/droda/assets/css/main.css
+++ b/themes/droda/assets/css/main.css
@@ -79,19 +79,21 @@ body {
 }
 
 aside {
+   position: absolute;
+   inset: 0 50%;
    grid-area: aside;
    display: none;
    flex-flow: column nowrap;
    align-items: flex-start;
    justify-content: flex-start;
-   width: 100%;
+   width: 50%;
    padding: 0 1rem;
    background-color: var(--bgColorDark);
 }
 
 aside .item {
    display: flex;
-   flex-flow: row nowrap;
+   flex-flow: column nowrap;
    align-items: center;
    justify-content: space-between;
    font-size: 1.5rem;
@@ -122,7 +124,7 @@ nav div img:first-child {
 }
 
 nav ul {
-   display: flex;
+   display: none;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-end;
@@ -164,6 +166,29 @@ nav a {
    text-decoration: none;
  }
 
+nav button {
+   display: flex;
+   position: absolute;
+   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;
+
+}
+
+nav button[data-visible="true"] {
+   background-image: url('../images/menu-abierto.png');
+} 
+
 main {
    grid-area: main;
    padding: 2rem;
@@ -236,29 +261,6 @@ 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;
@@ -272,11 +274,18 @@ footer {
         "footer footer";
    }
 
-   aside {
+   nav ul {
       display: flex;
    }
 
-   .boton-movil {
+   aside {
+      display: flex;
+      position: relative;
+      width: 100%;
+      inset: 0;
+   }
+   
+   nav button, aside li a {
       display: none;
    }
    

diff --git a/themes/droda/assets/js/main.js b/themes/droda/assets/js/main.js
index 1315b0c9a643be3ec54b846a7614a42518a982dc..37ebccc1971976efc7419e556e9aca1f1117e58e 100644 (file)
--- a/themes/droda/assets/js/main.js
+++ b/themes/droda/assets/js/main.js
@@ -1,4 +1,16 @@
 // CODE SECTION: greetings
 const title = document.querySelector("title");
+const hamButton = document.querySelector("nav button");
+const aside = document.querySelector("aside");
 
 console.log("Gracias por visitar a " + title.innerHTML);
+
+hamButton.addEventListener("click", (e)=>{
+    if(e.target.attributes[0].nodeValue === 'true'){
+        e.target.attributes[0].nodeValue = false;
+        aside.setAttribute("style", "display: none");
+    } else {
+        e.target.attributes[0].nodeValue = true;
+        aside.setAttribute("style", "display: flex");
+    }
+});

diff --git a/themes/droda/layouts/_default/baseof.html b/themes/droda/layouts/_default/baseof.html
index cbd82f86180064f3c4d1e152c940934bafa0db9d..87d2040f88fbc47c9c4c8b8e8820fc13e2cd5cd3 100644 (file)
--- a/themes/droda/layouts/_default/baseof.html
+++ b/themes/droda/layouts/_default/baseof.html
@@ -12,7 +12,7 @@
     <link rel="stylesheet" href="{{ $homeStyles.Permalink }}">
     {{ "<!-- Main Script -->" | safeHTML }}
     {{ $mainScript := resources.Get "js/main.js" }}
-    <script src="{{ $mainScript.Permalink }}"></script>
+    <script src="{{ $mainScript.Permalink }}" defer></script>
     {{ "<!-- JS Thirparties -->" | safeHTML }}
     {{ range .Site.Params.plugins.js }}
     <script src="{{ .link | absURL }}" crossorigin="anonymous"></script>

diff --git a/themes/droda/layouts/partials/aside.html b/themes/droda/layouts/partials/aside.html
index 67087259d5e28dc08b34c83e71d260e62ed229c2..c084298af3d906eac480b8b46444c724f053f21a 100644 (file)
--- a/themes/droda/layouts/partials/aside.html
+++ b/themes/droda/layouts/partials/aside.html
@@ -5,4 +5,7 @@
     {{ .Pre }}<a href="{{ .URL }}" title="{{ .Identifier }}" target="_blank">{{ .Name }}</a>
   </div>
   {{ end }}
+  {{ range .Site.Sections }}
+    <li class="item"><a class="hover" href="{{ .Permalink }}">{{ .Title }}</a></li>
+  {{ end }}
 </aside>

diff --git a/themes/droda/layouts/partials/boton.html b/themes/droda/layouts/partials/boton.html
deleted file mode 100644 (file)
index 4606e06..0000000
--- a/themes/droda/layouts/partials/boton.html
+++ /dev/null
@@ -1,8 +0,0 @@
-{{ "<!-- 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 fd8dced8bee5f53c524dd0d676f258a5ee5e344c..1bfa934855b5a3497d29628b9396e5a252afe9b2 100644 (file)
--- a/themes/droda/layouts/partials/navbar.html
+++ b/themes/droda/layouts/partials/navbar.html
@@ -7,6 +7,6 @@
   {{ range .Site.Sections }}
   <li><a class="hover" href="{{ .Permalink }}">{{ .Title }}</a></li>
   {{ end }}
-  {{ partial "boton.html" . }}
   </ul>
+  <button data-visible="false"></button>
 </nav>