From b081bdf345efd690b436b7e65cb7aa713a571306 Mon Sep 17 00:00:00 2001
From: +++ <bernd@nr18.space>
Date: Thu, 24 Feb 2022 19:21:27 +0100
Subject: [PATCH] variante mit hamburger menu

---
 public/images/icons/bars-white.svg  |  2 ++
 public/images/icons/times-white.svg |  2 ++
 public/index.php                    | 26 +++++++++++++++++---------
 public/style.css                    | 18 +++++++++++++++---
 4 files changed, 36 insertions(+), 12 deletions(-)
 create mode 100644 public/images/icons/bars-white.svg
 create mode 100644 public/images/icons/times-white.svg

diff --git a/public/images/icons/bars-white.svg b/public/images/icons/bars-white.svg
new file mode 100644
index 0000000..37d72af
--- /dev/null
+++ b/public/images/icons/bars-white.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1664 1344v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/public/images/icons/times-white.svg b/public/images/icons/times-white.svg
new file mode 100644
index 0000000..7a8015e
--- /dev/null
+++ b/public/images/icons/times-white.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/public/index.php b/public/index.php
index 5554a9f..f645060 100644
--- a/public/index.php
+++ b/public/index.php
@@ -53,18 +53,26 @@
               title="Zum Seitenanfang"><h1>kraut.space</h1></a>
           </div>
         </div>
-        <div id="header-right" class="flex-box row">
-          <p>
+        <div id="header-right" class="flex-box row center">
+          <div id="menu-icon" class="icon">
             <a id="open-menu"
-              title="Menu öffnen"
-              href="#menu">Menu</a>
-          </p>
+              title="Navigation öffnen"
+              href="#menu">
+              <img class="icon-img"
+                alt="Navigation öffnen"
+                src="./images/icons/bars-white.svg" />
+            </a>
+          </div>
           <nav id="menu" class="flex-box column">
-            <p>
+            <div id="menu-icon" class="icon">
               <a id="close-menu"
-              title="Menu schliessen"
-                href="#open-menu">Close</a>
-            </p>
+                title="Navigation schliessen"
+                href="#open-menu">
+                <img class="icon-img"
+                  alt="Navigation schliessen"
+                  src="./images/icons/times-white.svg" />
+              </a>
+            </div>
             <ul role="menu">
               <li role="menuitem">
                 <a  title="Was ist der Krautspace?"
diff --git a/public/style.css b/public/style.css
index 228f11e..ec61213 100644
--- a/public/style.css
+++ b/public/style.css
@@ -110,13 +110,17 @@ h1, h2, h3, h4 {
   align-items: center;
 }
 
-.icon {
+div.icon {
   width: 2em;
   height: 2em;
+  overflow: hidden;
+}
+
+div#status-icon,
+div#go-to-top {
   border-radius: 0.5em;
   background-color: #ffffff;
   box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);
-  overflow: hidden;
 }
 
 .icon-img {
@@ -192,6 +196,13 @@ nav#menu a {
   color: #ffffff;
 }
 
+nav div#menu-icon {
+  margin-top: 0.8em;
+  margin-bottom: 0.8em;
+  min-height: 2em;
+  width: 2em;
+}
+
 /* changed by clicking menu button */
 
 nav#menu:target {
@@ -332,7 +343,8 @@ img#to-top {
 
 @media screen and (min-width: 768px) {
 
-  a#open-menu {
+  a#open-menu,
+  a#close-menu {
     display: none;
   }