From a737a3eab1caab8ba7ae0d691316581c3a9e2128 Mon Sep 17 00:00:00 2001
From: Antonio De Lucreziis <antonio.delucreziis@gmail.com>
Date: Sat, 24 Jul 2021 11:23:30 +0200
Subject: [PATCH] Hamburger menu per mobile

---
 appunti/index.html    |  6 +++++-
 cv/index.html         |  6 +++++-
 galleria/index.html   |  6 +++++-
 index.html            |  7 ++++++-
 nav.js                | 11 +++++++++++
 spasticate/index.html |  6 +++++-
 style.css             | 21 +++++++++++++++++++--
 7 files changed, 56 insertions(+), 7 deletions(-)
 create mode 100644 nav.js

diff --git a/appunti/index.html b/appunti/index.html
index bb225c6..223a63b 100644
--- a/appunti/index.html
+++ b/appunti/index.html
@@ -7,6 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Sito Susanna</title>
 
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link rel="stylesheet" href="../style.css">
 </head>
 
@@ -15,7 +16,9 @@
     <header>
         <nav>
             <div class="nav-item" id="mobile-nav-menu">
-                Bla bla bla
+                <span class="material-icons">
+                    more_vert
+                </span>
             </div>
             <div class="nav-item">
                 <a href="..">Home</a>
@@ -54,6 +57,7 @@
                 Lucreziis</a> e <a href="https://poisson.phc.dm.unipi.it/~baldino/">Francesco Baldino</a>
         </div>
     </footer>
+    <script src="../nav.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/cv/index.html b/cv/index.html
index c57599e..30c1fe2 100644
--- a/cv/index.html
+++ b/cv/index.html
@@ -7,6 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Sito Susanna</title>
 
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link rel="stylesheet" href="../style.css">
 </head>
 
@@ -15,7 +16,9 @@
     <header>
         <nav>
             <div class="nav-item" id="mobile-nav-menu">
-                Bla bla bla
+                <span class="material-icons">
+                    more_vert
+                </span>
             </div>
             <div class="nav-item">
                 <a href="..">Home</a>
@@ -44,6 +47,7 @@
                 Lucreziis</a> e <a href="https://poisson.phc.dm.unipi.it/~baldino/">Francesco Baldino</a>
         </div>
     </footer>
+    <script src="../nav.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/galleria/index.html b/galleria/index.html
index 6a7e42d..b1519f4 100644
--- a/galleria/index.html
+++ b/galleria/index.html
@@ -7,6 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Sito Susanna</title>
 
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link rel="stylesheet" href="../style.css">
 </head>
 
@@ -15,7 +16,9 @@
     <header>
         <nav>
             <div class="nav-item" id="mobile-nav-menu">
-                Bla bla bla
+                <span class="material-icons">
+                    more_vert
+                </span>
             </div>
             <div class="nav-item">
                 <a href="..">Home</a>
@@ -44,6 +47,7 @@
                 Lucreziis</a> e <a href="https://poisson.phc.dm.unipi.it/~baldino/">Francesco Baldino</a>
         </div>
     </footer>
+    <script src="../nav.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 856982c..38938e7 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Sito Susanna</title>
 
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link rel="stylesheet" href="style.css">
 </head>
 
@@ -15,7 +16,9 @@
     <header>
         <nav>
             <div class="nav-item" id="mobile-nav-menu">
-                Bla bla bla
+                <span class="material-icons">
+                    more_vert
+                </span>
             </div>
             <div class="nav-item current">
                 <a href="#">Home</a>
@@ -134,6 +137,8 @@
                 Lucreziis</a> e <a href="https://poisson.phc.dm.unipi.it/~baldino/">Francesco Baldino</a>
         </div>
     </footer>
+
+    <script src="./nav.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/nav.js b/nav.js
new file mode 100644
index 0000000..4289c05
--- /dev/null
+++ b/nav.js
@@ -0,0 +1,11 @@
+
+const $mobileMenuButton = document.querySelector('#mobile-nav-menu');
+
+$mobileMenuButton.addEventListener('click', () => {
+    $mobileMenuButton.classList.toggle('openned');
+});
+
+
+
+
+
diff --git a/spasticate/index.html b/spasticate/index.html
index fc99c7b..9ed9289 100644
--- a/spasticate/index.html
+++ b/spasticate/index.html
@@ -7,6 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Sito Susanna</title>
 
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link rel="stylesheet" href="../style.css">
 </head>
 
@@ -15,7 +16,9 @@
     <header>
         <nav>
             <div class="nav-item" id="mobile-nav-menu">
-                Bla bla bla
+                <span class="material-icons">
+                    more_vert
+                </span>
             </div>
             <div class="nav-item">
                 <a href="..">Home</a>
@@ -44,6 +47,7 @@
                 Lucreziis</a> e <a href="https://poisson.phc.dm.unipi.it/~baldino/">Francesco Baldino</a>
         </div>
     </footer>
+    <script src="../nav.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/style.css b/style.css
index b5b7003..15f3d33 100644
--- a/style.css
+++ b/style.css
@@ -196,20 +196,32 @@ h1, h2, h3, h4 {
 
 /* Mobile */
 
+@media screen and (min-width: 513px) {
+    #mobile-nav-menu {
+        display: none;
+    }
+}
+
 @media screen and (max-width: 512px) {
     header {
         padding: 0;
         height: unset;
     }
+
+    header h1 {
+        padding-left: 1rem;
+    }
     
     nav {
         display: flex;
         flex-direction: column;
 
-        position: absolute;
-        top: 0;
+        /* position: absolute;
+        top: 0; */
 
         z-index: 1;
+
+        background: var(--color-4);
     }
     
     nav .nav-item, nav .nav-item.current {
@@ -222,5 +234,10 @@ h1, h2, h3, h4 {
 
     #mobile-nav-menu {
         display: flex;
+        justify-content: flex-start;
+    }
+
+    #mobile-nav-menu:not(.openned) ~ .nav-item {
+        display: none;
     }
 }
\ No newline at end of file