Tentative 2: navigation sur mobile

content/_index.md

@@ -1,5 +1,5 @@
 +++
-title = "Manuels Deuxfleurs"
+title = "Guide Deuxfleurs"
 sort_by = "weight"
 +++
 

sass/juice.scss

@@ -100,6 +100,10 @@ main {
   padding: 50px 100px;
   margin: 0;
 
+  .toc-homepage {
+    display: none;
+  }
+
   .toc {
     max-width: 260px;
     min-width: 240px;
@@ -253,25 +257,12 @@ main details#navigation-toggle summary {
 
 /* *********** */
 
-
-.menu-button-container {
-  display: none;
-}
-
 #menu-toggle {
   display: none;
 }
 
-.menu-button,
+.menu-button {
-.menu-button::before,
+  display: none;
-.menu-button::after {
-  display: block;
-  background-color: #fff;
-  position: absolute;
-  height: 4px;
-  width: 30px;
-  transition: transform 400ms ease;
-  border-radius: 2px;
 }
 
 .menu-button::before {
@@ -299,18 +290,40 @@ main details#navigation-toggle summary {
 }
 
 @media (max-width: 768px) {
-  .menu-button-container {
+  main .toc-homepage {
-    position: absolute;
     display: block;
-    height: 32px;
-    width: 32px;
-    top: 40px;
-    right: 24px;
   }
-  #menu-toggle ~ .toc {
+
+  .toc-menu-title {
+    font-weight: 600;
+    margin-left: 64px;  
+  }
+  
+  .toc-section {
+    margin-top: 16px;
+  }
+
+  .menu-button {
+    top: 28px;
+    left:24px;
+  }
+
+  .menu-button,
+  .menu-button::before,
+  .menu-button::after {
+    display: block;
+    background-color: #777;
+    position: absolute;
+    height: 4px;
+    width: 30px;
+    transition: transform 400ms ease;
+    border-radius: 2px;
+  }
+
+  #menu-toggle ~ .toc-item {
     display: none;
   }
-  #menu-toggle:checked ~ .toc {
+  #menu-toggle:checked ~ .toc-item {
     display: block;
   }
 }

templates/_nav.html

@@ -133,9 +133,15 @@
 
   {% set root_path = hierarchy | nth(n=0) %}
   {% set root = get_section(path=root_path) %}
+
+  <input id="menu-toggle" type="checkbox" />
+  <label class='menu-button-container' for="menu-toggle">
+    <div class="menu-button"></div>
+    <div class="toc-item toc-menu-title subtext">{{ root.title }}</div>
+  </label>
+  
   <div class="toc-item toc-section">
     <a class="subtext" href="{{root.permalink | safe}}">{{ root.title }}</a>
   </div>
-
   {{ nav::navsection(hierarchy=hierarchy,level=0,current=current) }}
 {% endmacro %}

templates/index.html

@@ -26,21 +26,15 @@
 
     <main>
         {% block mainnav %}
-            {% if page.ancestors or section.ancestors %}
+            <div class="toc {% if page.ancestors or section.ancestors %}{% else %}toc-homepage{% endif %}">
-                <input id="menu-toggle" type="checkbox" {% if section.subsections or section.pages %}checked{% endif %} />
+                <div class="toc-sticky">
-                <label class='menu-button-container' for="menu-toggle">
+                    {% if page %}
-                    <div class='menu-button'></div>
+                    {{ nav::navmenu(current=page) }}
-                </label>
+                    {% else %}
-                <div class="toc" id="navigation">
+                    {{ nav::navmenu(current=section) }}
-                    <div class="toc-sticky">
+                    {% endif %}
-                        {% if page %}
-                        {{ nav::navmenu(current=page) }}
-                        {% else %}
-                        {{ nav::navmenu(current=section) }}
-                        {% endif %}
-                    </div>
                 </div>
-            {% endif %}
+            </div>
         {% endblock mainnav %}
 
         <div class="content text">