From 0bacdcf91edf27a13f4bf2a7eeb221139c8578e8 Mon Sep 17 00:00:00 2001
From: Alexandra Janin <contact.ajanin@gmail.com>
Date: Thu, 4 Oct 2018 15:08:24 +0200
Subject: [PATCH] Add toggle on mobile menu and enhance menu style

---
 sass/style.sass           | 53 ++++++++++++++++++++++++++-------------
 static/css/style.sass.css | 51 +++++++++++++++++++++++++------------
 templates/_layout.jinja2  | 14 +++++++----
 3 files changed, 80 insertions(+), 38 deletions(-)

diff --git a/sass/style.sass b/sass/style.sass
index 0ece60a..bd2463f 100644
--- a/sass/style.sass
+++ b/sass/style.sass
@@ -98,36 +98,53 @@ header
   order: 1
   padding: 0 1em
 
+.wrapper
+  width: 100%
+  max-width: 1200px
+  margin: 0 auto
+  box-sizing: border-box
+
 .menu
   display: flex
-  flex-direction: column
+  flex-direction: row
   justify-content: flex-start
-  align-items: flex-start
+  align-items: center
   padding: 0 1em
   min-height: 70px
-
-  @media screen and (min-width: 640px)
-    flex-direction: row
-    justify-content: center
-    align-items: center
-    
+  
   // Footer navigation
   &--footer
     background: $header
     box-sizing: border-box
     margin-top: 2em
     order: 4
+  
+  &__toggle
+    order: 2
+    text-align: right
+    align-self: flex-start
+    padding-top: 1em
+    @media screen and (min-width: 840px)
+      display: none
+
+  &__checkbox
+    display: none
+    &:checked + .menu__list
+      max-height: 84px
+      overflow: hidden
 
   // ul element
   &__list
+    flex: 1 1 100%
     display: flex
     flex-direction: column
     list-style: none
     margin: 0
     padding: 0
-    width: 100%
+    max-height: 1000px
+    transition: max-height .3s
 
-    @media screen and (min-width: 640px)
+    @media screen and (min-width: 840px)
       flex-direction: row
       justify-content: center
       align-items: center
@@ -136,20 +153,27 @@ header
       color: $text
       display: block
       font-weight: 600
-      padding: 1em
       text-decoration: none
 
     .active a
       color: $action-secondary
 
   &__item
+    padding: 1em 0
     font-size: .8em
     text-transform: uppercase
+    white-space: nowrap
+    @media screen and (min-width: 840px)
+      padding: 1em
+
+    &--brand
+      flex: 1 1 100%
+      padding-left: 0 
 
     .brand
+      flex: 1 1 100%
       display: flex
       flex-direction: row
-      justify-content: center
       align-items: center
       font-size: 1.5em
       img 
@@ -181,11 +205,6 @@ footer
     list-style: none
     padding: 0
 
-    a
-      color: inherit
-      text-decoration: inherit
-      padding: 1em
-
 h1
   color: $action-secondary
   font-weight: 300
diff --git a/static/css/style.sass.css b/static/css/style.sass.css
index 8752813..6a2625a 100644
--- a/static/css/style.sass.css
+++ b/static/css/style.sass.css
@@ -85,31 +85,47 @@ header {
   order: 1;
   padding: 0 1em; }
 
+.wrapper {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  box-sizing: border-box; }
+
 .menu {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   justify-content: flex-start;
-  align-items: flex-start;
+  align-items: center;
   padding: 0 1em;
   min-height: 70px; }
-  @media screen and (min-width: 640px) {
-    .menu {
-      flex-direction: row;
-      justify-content: center;
-      align-items: center; } }
   .menu--footer {
     background: #1d1e23;
     box-sizing: border-box;
     margin-top: 2em;
     order: 4; }
+  .menu__toggle {
+    order: 2;
+    text-align: right;
+    align-self: flex-start;
+    padding-top: 1em; }
+    @media screen and (min-width: 840px) {
+      .menu__toggle {
+        display: none; } }
+  .menu__checkbox {
+    display: none; }
+    .menu__checkbox:checked + .menu__list {
+      max-height: 84px;
+      overflow: hidden; }
   .menu__list {
+    flex: 1 1 100%;
     display: flex;
     flex-direction: column;
     list-style: none;
     margin: 0;
     padding: 0;
-    width: 100%; }
-    @media screen and (min-width: 640px) {
+    max-height: 1000px;
+    transition: max-height .3s; }
+    @media screen and (min-width: 840px) {
       .menu__list {
         flex-direction: row;
         justify-content: center;
@@ -118,17 +134,24 @@ header {
       color: #eaeaea;
       display: block;
       font-weight: 600;
-      padding: 1em;
       text-decoration: none; }
     .menu__list .active a {
       color: #ffcd05; }
   .menu__item {
+    padding: 1em 0;
     font-size: .8em;
-    text-transform: uppercase; }
+    text-transform: uppercase;
+    white-space: nowrap; }
+    @media screen and (min-width: 840px) {
+      .menu__item {
+        padding: 1em; } }
+    .menu__item--brand {
+      flex: 1 1 100%;
+      padding-left: 0; }
     .menu__item .brand {
+      flex: 1 1 100%;
       display: flex;
       flex-direction: row;
-      justify-content: center;
       align-items: center;
       font-size: 1.5em; }
       .menu__item .brand img {
@@ -158,10 +181,6 @@ footer ul {
   justify-content: center;
   list-style: none;
   padding: 0; }
-  footer ul a {
-    color: inherit;
-    text-decoration: inherit;
-    padding: 1em; }
 
 h1 {
   color: #ffcd05;
diff --git a/templates/_layout.jinja2 b/templates/_layout.jinja2
index 74731fb..eb1b9e8 100644
--- a/templates/_layout.jinja2
+++ b/templates/_layout.jinja2
@@ -10,9 +10,11 @@
   </head>
   <body id="{{ body_id }}">
     <header>
-      {% block header %}{% endblock header %}
+      <div class="wrapper">
+        {% block header %}{% endblock header %}
+      </div>
     </header>
-    <nav class="menu menu--main">
+    <nav class="wrapper menu menu--main">
       {% set navigation_bar = [
         (url_for('index'), 'index', 'Accueil'),
         (url_for('rest', name='a-propos'), 'a-propos', 'Qui sommes-nous ?'),
@@ -22,8 +24,10 @@
         (url_for('pages', name='discussion'), 'discussion', 'Discussion'),
         (url_for('pages', name='adhesions'), 'adhesions', 'Adhésions')
       ] -%}
+      <label for="toggle" class="menu__toggle">Menu</label>
+      <input class="menu__checkbox" type="checkbox" name="toggle" id="toggle" checked>
       <ul class="menu__list">
-        <li class="menu__item">
+        <li class="menu__item menu__item--brand">
           <a class="brand" href="{{ url_for('index') }}">
             <img src="{{ url_for('static', filename='images/logo.svg') }}" title="Logo afpy" />
             <span>AFPy</span>
@@ -38,11 +42,11 @@
     <main>
       {% block main %}{% endblock main %}
     </main>
-    <footer class="menu menu--footer">
+    <footer class="wrapper menu menu--footer">
       {% set navigation_bar = [
         (url_for('rest', name='contact'), 'Contact'),
         (url_for('rest', name='charte'), 'Charte'),
-        (url_for('rest', name='legal'), 'Offres \'Mentions légales'),
+        (url_for('rest', name='legal'), 'Mentions légales'),
         (url_for('rest', name='rss'), 'Flux RSS'),
         ('https://twitter.com/asso_python_fr', 'Twitter'),
         (url_for('admin', name='actualites'), 'Admin actualités'),