From a80c7ec6f93591a75a5044ffb6f4b2a8661af59a Mon Sep 17 00:00:00 2001
From: nzambello <nzambello@protonmail.com>
Date: Tue, 18 Jul 2023 11:03:50 +0200
Subject: [PATCH] fix: menu mobile, change links

---
 src/components/Header.astro | 88 +++++++++++++++++++++++++++++++++++--
 src/pages/index.astro       | 68 +++++++++++++++++++++++++---
 2 files changed, 146 insertions(+), 10 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 246048a..fb06b71 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -22,9 +22,8 @@ import Logo from './Logo.astro';
     </button>
     <div class="menu-backdrop"></div>
     <ul class="menu">
-      <HeaderLink href="/#tech">Tech</HeaderLink>
-      <HeaderLink href="/#opensource">Open-source</HeaderLink>
-      <HeaderLink href="/#plone">Plone</HeaderLink>
+      <HeaderLink href="https://app.memorytwin.com/en/nzambello/Nicola" target="_blank" rel="noopener noreferrer">Twin</HeaderLink>
+      <HeaderLink href="https://github.com/nzambello" target="_blank" rel="noopener noreferrer">GitHub</HeaderLink>
       <HeaderLink href="/#contacts">Contacts</HeaderLink>
     </ul>
     <ul class="theme-button-container">
@@ -110,6 +109,7 @@ import Logo from './Logo.astro';
     background-color: var(--text-color);
   }
 
+  nav#navigation.opened ul.menu,
   ul.menu:focus,
   ul.menu:focus-within,
   .mobile-icon-button.hamburger:focus ~ ul.menu,
@@ -123,6 +123,7 @@ import Logo from './Logo.astro';
     display: none;
   }
 
+  nav#navigation.opened .menu-backdrop,
   .mobile-icon-button.hamburger:focus ~ .menu-backdrop,
   .mobile-icon-button.hamburger:focus-within ~ .menu-backdrop {
     display: block;
@@ -144,6 +145,7 @@ import Logo from './Logo.astro';
     z-index: 10;
   }
 
+  nav#navigation.opened .mobile-icon-button.close,
   .mobile-icon-button.hamburger:focus ~ .mobile-icon-button.close,
   .mobile-icon-button.hamburger:focus-within ~ .mobile-icon-button.close {
     display: inline-block;
@@ -189,6 +191,7 @@ import Logo from './Logo.astro';
       padding: 0;
       margin-right: 1rem;
     }
+    nav#navigation.opened ul.menu,
     ul.menu:focus,
     ul.menu:focus-within {
       padding: 0;
@@ -201,3 +204,82 @@ import Logo from './Logo.astro';
     }
   }
 </style>
+<script>
+  (() => {
+    if (window.innerWidth < 768) {
+      let nav = document.getElementById('navigation');
+      let hamburger = document.querySelector('.mobile-icon-button.hamburger');
+      let close = document.querySelector('.mobile-icon-button.close');
+      let menuItems = document.querySelectorAll('ul.menu li a');
+
+      if (!hamburger) {
+        console.error('Missing navigation elements');
+        return;
+      }
+      hamburger.addEventListener('click', function (e) {
+        e.preventDefault();
+
+        if (!nav || !hamburger || !close) {
+          console.error('Missing navigation elements');
+          return;
+        }
+
+        if (nav.classList.contains('opened')) {
+          nav.classList.remove('opened');
+          hamburger.setAttribute('aria-expanded', 'false');
+          close.setAttribute('aria-expanded', 'false');
+        } else {
+          nav.classList.add('opened');
+          hamburger.setAttribute('aria-expanded', 'true');
+          close.setAttribute('aria-expanded', 'true');
+        }
+      });
+
+      let backdrop = document.querySelector('.menu-backdrop');
+      if (backdrop) {
+        backdrop.addEventListener('click', function (e) {
+          e.preventDefault();
+
+          if (!nav || !hamburger || !close) {
+            console.error('Missing navigation elements');
+            return;
+          }
+
+          nav.classList.remove('opened');
+          hamburger.setAttribute('aria-expanded', 'false');
+          close.setAttribute('aria-expanded', 'false');
+        });
+      }
+
+      if (close) {
+        close.addEventListener('click', function (e) {
+          e.preventDefault();
+
+          if (!nav || !hamburger || !close) {
+            console.error('Missing navigation elements');
+            return;
+          }
+
+          nav.classList.remove('opened');
+          hamburger.setAttribute('aria-expanded', 'false');
+          close.setAttribute('aria-expanded', 'false');
+        });
+      }
+
+      if (menuItems) {
+        menuItems.forEach(item => {
+          item.addEventListener('click', function (e) {
+            if (!nav || !hamburger || !close) {
+              console.error('Missing navigation elements');
+              return;
+            }
+
+            nav.classList.remove('opened');
+            hamburger.setAttribute('aria-expanded', 'false');
+            close.setAttribute('aria-expanded', 'false');
+          });
+        });
+      }
+    }
+  })();
+</script>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 0b1e50f..941cae8 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -19,13 +19,67 @@ import Privacy from '../components/Privacy.astro';
 
   <div id="content" class="container">
     <div class="contact-links">
-      <a role="button" class="" href="https://github.com/nzambello" target="_blank" rel="noopener noreferrer">
-        <svg height="32" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="32" data-view-component="true" class="octicon octicon-mark-github v-align-middle color-fg-default">
-          <path
-            d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
-          ></path>
-        </svg>
-        GitHub
+      <a role="button" class="" href="https://app.memorytwin.com/en/nzambello/Nicola" target="_blank" rel="noopener noreferrer">
+        <svg
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          xmlns="http://www.w3.org/2000/svg"
+          width="32"
+          height="32"
+          id="screenshot-ee7a4028-0499-8054-8002-d551e0c3ba31"
+          viewBox="-2 -2 150 150"
+          style="-webkit-print-color-adjust: exact;"
+          fill="none"
+          version="1.1"
+          ><g id="shape-ee7a4028-0499-8054-8002-d551e0c3ba31" rx="0" ry="0"
+            ><g id="shape-ee7a4028-0499-8054-8002-d551c1b8f59c"
+              ><defs
+                ><linearGradient
+                  x1="-139"
+                  y1="-42"
+                  x2="184.376"
+                  y2="9.78136"
+                  id="rumext-id-2-paint0_linear_108_7"
+                  gradientUnits="userSpaceOnUse"
+                  gradientTransform="matrix(1.000000, 0.000000, 0.000000, 1.000000, -48.000000, -2.000000)"
+                  ><stop offset="0.572834" stop-color="var(--primary-inverse)"></stop><stop offset="1" stop-color="var(--item-bg-color)"></stop></linearGradient
+                ></defs
+              ><g class="fills" id="fills-ee7a4028-0499-8054-8002-d551c1b8f59c"
+                ><path
+                  fill="url(#rumext-id-2-paint0_linear_108_7)"
+                  rx="0"
+                  ry="0"
+                  d="M31.621,30.914L29.621,30.914L29.621,32.914L29.621,146.000L0.000,146.000L0.000,0.000L146.000,0.000L146.000,146.000L116.379,146.000L116.379,32.914L116.379,30.914L114.379,30.914L31.621,30.914ZZM62.069,60.776L85.224,60.776L85.224,146.000L62.069,146.000L62.069,60.776ZZ"
+                  style='fill: url("#rumext-id-2-paint0_linear_108_7");'></path></g
+              ></g
+            ><g id="shape-ee7a4028-0499-8054-8002-d551c1b906ac"
+              ><g class="fills" id="fills-ee7a4028-0499-8054-8002-d551c1b906ac"
+                ><path
+                  rx="0"
+                  ry="0"
+                  d="M31.621,30.914L29.621,30.914L29.621,32.914L29.621,146.000L0.000,146.000L0.000,0.000L146.000,0.000L146.000,146.000L116.379,146.000L116.379,32.914L116.379,30.914L114.379,30.914L31.621,30.914ZZM62.069,60.776L85.224,60.776L85.224,146.000L62.069,146.000L62.069,60.776ZZ"
+                  style="fill: rgb(255, 255, 255); fill-opacity: 0.18;"></path></g
+              ></g
+            ><g id="shape-ee7a4028-0499-8054-8002-d551c1b9733a" style="mix-blend-mode: overlay;"
+              ><g class="fills" id="fills-ee7a4028-0499-8054-8002-d551c1b9733a"
+                ><path
+                  fill="none"
+                  rx="0"
+                  ry="0"
+                  d="M31.621,30.914L29.621,30.914L29.621,32.914L29.621,146.000L0.000,146.000L0.000,0.000L146.000,0.000L146.000,146.000L116.379,146.000L116.379,32.914L116.379,30.914L114.379,30.914L31.621,30.914ZZM62.069,60.776L85.224,60.776L85.224,146.000L62.069,146.000L62.069,60.776ZZ"
+                  style="fill: none;"></path></g
+              ><g id="strokes-ee7a4028-0499-8054-8002-d551c1b9733a" class="strokes"
+                ><g class="stroke-shape"
+                  ><path
+                    rx="0"
+                    ry="0"
+                    d="M31.621,30.914L29.621,30.914L29.621,32.914L29.621,146.000L0.000,146.000L0.000,0.000L146.000,0.000L146.000,146.000L116.379,146.000L116.379,32.914L116.379,30.914L114.379,30.914L31.621,30.914ZZM62.069,60.776L85.224,60.776L85.224,146.000L62.069,146.000L62.069,60.776ZZ"
+                    style="fill: none; stroke-width: 4; stroke: rgb(200, 200, 200);"></path></g
+                ></g
+              ></g
+            ></g
+          ></svg
+        >
+        Digital Twin
       </a>
       <a role="button" class="" href="https://cal.nzambello.dev" target="_blank" rel="noopener noreferrer">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"