From d084cfed8631c8b2b1c1e1b44cbe627a96925650 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Wed, 19 Aug 2020 11:41:10 +0200
Subject: [PATCH] fix #25: Icon x for closing the big menu

---
 css/sideMenu.css                | 17 +++++++++++++++++
 img/side-menu-opener-closer.svg |  6 ++++++
 src/SideMenuBig.vue             |  3 ++-
 3 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 img/side-menu-opener-closer.svg

diff --git a/css/sideMenu.css b/css/sideMenu.css
index 7c53109..4cac9e6 100644
--- a/css/sideMenu.css
+++ b/css/sideMenu.css
@@ -45,6 +45,11 @@
     border: 0;
 }
 
+.side-menu-closer {
+    background: url('../img/side-menu-opener-closer.svg');
+    display: none;
+}
+
 #side-menu.hide-opener .side-menu-opener, .side-menu-opener.hide {
     display: none;
 }
@@ -193,3 +198,15 @@
         height: 100vh;
     }
 }
+
+@media screen and (min-width: 1024px) {
+    .side-menu-closer {
+        display: block;
+        float: right;
+        margin-right: 9px;
+    }
+
+    .side-menu-big .side-menu-header {
+        max-width: 100%;
+    }
+}
diff --git a/img/side-menu-opener-closer.svg b/img/side-menu-opener-closer.svg
new file mode 100644
index 0000000..3774c6d
--- /dev/null
+++ b/img/side-menu-opener-closer.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 10.583 10.583">
+  <g color="#000" fill="#fff">
+    <rect transform="rotate(135)" ry=".545" rx=".545" y="-8.209" x="-3.608" height="1.451" width="7.216" style="marker:none" overflow="visible" paint-order="stroke markers fill"/>
+    <rect transform="rotate(-135)" ry=".545" rx=".545" y="-.726" x="-11.091" height="1.451" width="7.216" style="marker:none" overflow="visible" paint-order="stroke markers fill"/>
+  </g>
+</svg>
diff --git a/src/SideMenuBig.vue b/src/SideMenuBig.vue
index aac5d91..89be0b8 100644
--- a/src/SideMenuBig.vue
+++ b/src/SideMenuBig.vue
@@ -17,7 +17,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 <template>
     <div id="side-menu" class="side-menu-big">
         <div class="side-menu-header">
-            <button class="side-menu-opener"></button>
+            <button class="side-menu-opener side-menu-closer"></button>
+			<button class="side-menu-opener"></button>
         </div>
 
         <div class="side-menu-categories-wrapper">