From 10b0e0c37af2f88e3a35ac94d9f16d4a6703563d Mon Sep 17 00:00:00 2001
From: Romain J <romain.ordi@gmail.com>
Date: Fri, 19 Jun 2020 01:36:29 +0200
Subject: [PATCH] fix(sidebar): fix sidebar not working, remove unused classes,
 close #2

---
 apps/gnous_eu/templates/about.html           |  6 ++----
 apps/gnous_eu/templates/index.html           |  5 ++---
 apps/gnous_eu/templates/layouts/foot.html    | 18 ++++++++++++++++++
 apps/gnous_eu/templates/layouts/header.html  |  9 ++++++---
 apps/gnous_eu/templates/layouts/sidebar.html |  9 +++++++--
 apps/gnous_eu/templates/tips.html            |  9 +++------
 6 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/apps/gnous_eu/templates/about.html b/apps/gnous_eu/templates/about.html
index ba078c0..2301260 100644
--- a/apps/gnous_eu/templates/about.html
+++ b/apps/gnous_eu/templates/about.html
@@ -6,13 +6,11 @@
     <div class="uk-flex uk-flex-middle top-wrap-height">
         <div class="uk-container uk-flex-auto uk-position-relative uk-margin-medium-top">
             <div class="uk-grid" data-uk-grid="masonry: true">
-                <div class="uk-width-1"
-                     data-uk-scrollspy="cls: uk-animation-slide-left-medium; target: > *; delay: 100">
+                <div class="uk-width-1">
                     <h1 class="uk-margin-remove-bottom uk-text-bold">{% trans 'À propos' %}</h1>
                 </div>
 
-                <div class="uk-width-1 uk-margin"
-                     data-uk-scrollspy="cls: uk-animation-slide-left-medium; target: > *; delay: 100">
+                <div class="uk-width-1 uk-margin">
                 <!-- attention, indentation pourrie en dessous, raison : flemme de scroll horizontalement -->
 {% blocktrans %}
 <p>GnousEU est une communauté de passionnés du libre ayant débuté en février 2017 sur la plateforme Discord.
diff --git a/apps/gnous_eu/templates/index.html b/apps/gnous_eu/templates/index.html
index 8ae2e1a..503888a 100644
--- a/apps/gnous_eu/templates/index.html
+++ b/apps/gnous_eu/templates/index.html
@@ -6,12 +6,11 @@
     <div class="uk-flex uk-flex-middle top-wrap-height">
         <div class="uk-container uk-flex-auto uk-position-relative uk-margin-medium-top">
             <div class="uk-grid" data-uk-grid="masonry: true">
-                <div class="uk-width-1-2@s"
-                     data-uk-scrollspy="cls: uk-animation-slide-left-medium; target: > *; delay: 100">
+                <div class="uk-width-1-2@s">
                     <h1 class="uk-margin-remove-bottom uk-text-bold">GnousEU</h1>
                     <p class="uk-margin-remove-bottom subtitle-text uk-text-bold">{% trans "Communauté francophone de passionnés du libre depuis 2017." %}</p>
                 </div>
-                <div data-uk-scrollspy="cls: uk-animation-fade" class="uk-width-expand">
+                <div class="uk-width-expand">
                     <img
                          src="{% static 'images/illustrations/services.svg' %}"
                           alt="Image">
diff --git a/apps/gnous_eu/templates/layouts/foot.html b/apps/gnous_eu/templates/layouts/foot.html
index 3fd1db1..c6e8ab1 100644
--- a/apps/gnous_eu/templates/layouts/foot.html
+++ b/apps/gnous_eu/templates/layouts/foot.html
@@ -9,6 +9,8 @@ Don't judge me
 
 {#<script src="{% static 'javascripts/uikit/uikit.min.js' %}"></script>#}
 {#<script src="{% static 'javascripts/uikit/uikit-icons.min.js' %}"></script>#}
+
+<!-- theme -->
 <script>
     window.theme = document.querySelector('input[name=theme]');
     theme.checked = document.documentElement.getAttribute('data-theme') === 'dark';
@@ -33,6 +35,7 @@ Don't judge me
     })
 </script>
 
+<!-- cookie banner -->
 <script>
     cookies = document.cookie.split('; ');
     banner_cookie = document.cookie.split('; ').filter(e => e.startsWith('cookie-banner='))[0];
@@ -48,6 +51,21 @@ Don't judge me
     }
 </script>
 
+<!-- sidebar -->
+<script>
+    offcanvas_nav = document.getElementById("offcanvas-nav");
+    trigger = document.querySelector("a.uk-navbar-toggle")
+
+    trigger.addEventListener("click", e => {
+        offcanvas_nav.classList.add("uk-offcanvas", "uk-offcanvas-overlay", "uk-open")
+    })
+
+    offcanvas_nav.querySelector("button.uk-close").addEventListener("click", e => {
+        offcanvas_nav.classList.remove("uk-offcanvas-overlay", "uk-open")
+    })
+</script>
+
+<!-- save theme -->
 <script>
     theme_session = window.sessionStorage.getItem('theme')
     if (theme_session !== null) {
diff --git a/apps/gnous_eu/templates/layouts/header.html b/apps/gnous_eu/templates/layouts/header.html
index 80c7aac..387d32a 100644
--- a/apps/gnous_eu/templates/layouts/header.html
+++ b/apps/gnous_eu/templates/layouts/header.html
@@ -58,9 +58,12 @@
                     </form>
                 </div>
 
-                <a class="uk-navbar-toggle uk-navbar-item uk-hidden@s"
-                   data-uk-toggle data-uk-navbar-toggle-icon data-turbolinks="false"
-                   href="#offcanvas-nav">
+                <a class="uk-navbar-toggle uk-navbar-item uk-hidden@s">
+                    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="navbar-toggle-icon">
+                        <rect y="9" width="20" height="2"></rect>
+                        <rect y="3" width="20" height="2"></rect>
+                        <rect y="15" width="20" height="2"></rect>
+                    </svg>
                 </a>
             </div>
         </nav>
diff --git a/apps/gnous_eu/templates/layouts/sidebar.html b/apps/gnous_eu/templates/layouts/sidebar.html
index 47a3900..78fb93b 100644
--- a/apps/gnous_eu/templates/layouts/sidebar.html
+++ b/apps/gnous_eu/templates/layouts/sidebar.html
@@ -1,9 +1,14 @@
 {% load static %}
 {% load i18n %}
 
-<div id="offcanvas-nav" data-uk-offcanvas="flip: true; overlay: true;" class="uk-offcanvas">
+<div id="offcanvas-nav" data-uk-offcanvas="flip: true; overlay: true;" class="uk-offcanvas" style="display: block">
     <div class="uk-offcanvas-bar uk-offcanvas-bar-animation uk-offcanvas-slide">
-        <button class="uk-offcanvas-close uk-close uk-icon" type="button" data-uk-close=""></button>
+        <button class="uk-offcanvas-close uk-icon uk-close" type="button">
+            <svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="close-icon">
+                <line fill="none" stroke="#000" stroke-width="1.1" x1="1" y1="1" x2="13" y2="13"></line>
+                <line fill="none" stroke="#000" stroke-width="1.1" x1="13" y1="1" x2="1" y2="13"></line>
+            </svg>
+        </button>
 
         <ul class="uk-nav uk-nav-default">
             <li>
diff --git a/apps/gnous_eu/templates/tips.html b/apps/gnous_eu/templates/tips.html
index bf62d11..5d20ad9 100644
--- a/apps/gnous_eu/templates/tips.html
+++ b/apps/gnous_eu/templates/tips.html
@@ -6,8 +6,7 @@
     <div class="uk-flex uk-flex-middle top-wrap-height">
         <div class="uk-container uk-flex-auto uk-position-relative uk-margin-medium-top">
             <div class="uk-grid" data-uk-grid="masonry: true">
-                <div class="uk-width-1"
-                     data-uk-scrollspy="cls: uk-animation-slide-left-medium; target: > *; delay: 100">
+                <div class="uk-width-1">
                     <h1 class="uk-heading-line uk-margin-remove-bottom uk-text-bold uk-text-center">
                         <span>{% trans 'Donnez à GnousEU' %}</span>
                     </h1>
@@ -19,8 +18,7 @@
                     </div>
                 </div>
 
-                <div class="uk-width-1 uk-margin-large-top"
-                     data-uk-scrollspy="cls: uk-animation-slide-left-medium; target: > *; delay: 100">
+                <div class="uk-width-1 uk-margin-large-top">
                     <h2 class="uk-heading-line uk-margin-remove-bottom uk-text-bold uk-text-center">
                         <span>{% trans 'Vous souhaitez nous donner du materiel ?' %}</span>
                     </h2>
@@ -31,8 +29,7 @@
                     </p>
                 </div>
 
-                <div class="uk-width-1 uk-margin-large-top"
-                     data-uk-scrollspy="cls: uk-animation-slide-left-medium; target: > *; delay: 100">
+                <div class="uk-width-1 uk-margin-large-top">
                     <h2 class="uk-heading-line uk-margin-remove-bottom uk-text-bold uk-text-center">
                         <span>{% trans 'Vous êtes fournisseur de services ?' %}</span>
                     </h2>