From 0deb7c2de16d8c40c35bdecbae8804d3f05cfc65 Mon Sep 17 00:00:00 2001
From: Simon C <simonc@linux.com>
Date: Wed, 13 Mar 2024 09:58:03 +0100
Subject: [PATCH] feat: Move search and color mode toggler

---
 .../partials/header/header-menu-social.html   |  2 +-
 .../layouts/partials/header/header.html       | 80 +++++++++++--------
 2 files changed, 48 insertions(+), 34 deletions(-)

diff --git a/portails/shared/layouts/partials/header/header-menu-social.html b/portails/shared/layouts/partials/header/header-menu-social.html
index 07d7ea9..c677250 100644
--- a/portails/shared/layouts/partials/header/header-menu-social.html
+++ b/portails/shared/layouts/partials/header/header-menu-social.html
@@ -1,4 +1,4 @@
-<ul id="socialMenu" class="nav mx-auto flex-row order-lg-4">
+<ul id="socialMenu" class="nav mx-auto flex-column order-lg-4 flex-lg-row">
   {{- range $service := site.Data.services -}}
     {{- $defaultValues := index site.Data.portails.services $service.name -}}
     {{- $icon := $service.icon | default $defaultValues.icon -}}
diff --git a/portails/shared/layouts/partials/header/header.html b/portails/shared/layouts/partials/header/header.html
index 04565b7..1e850fd 100644
--- a/portails/shared/layouts/partials/header/header.html
+++ b/portails/shared/layouts/partials/header/header.html
@@ -41,6 +41,20 @@
     </button>
     {{ end -}}
 
+    <!-- Color mode toggler mobile -->
+    {{ if and (eq site.Params.doks.colorMode "auto") site.Params.doks.colorModeToggler -}}
+    <button id="buttonColorMode" class="btn btn-link mx-2 nav-link d-lg-none" type="button" aria-label="Toggle theme">
+      <svg data-bs-theme-value="dark" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-moon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+        <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"></path>
+      </svg>
+      <svg data-bs-theme-value="light" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-sun" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+        <path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0m-5 0h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"></path>
+      </svg>
+    </button>
+    {{ end -}}
+
     <!-- Section navigation -->
     {{ if (in site.Params.doks.sectionNav .Section) -}}
     <button class="btn btn-link d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavSection" aria-controls="offcanvasNavSection" aria-label="Open section navigation menu">
@@ -112,38 +126,6 @@
       </div>
       -->
       <div class="offcanvas-body d-flex flex-column flex-lg-row justify-content-between">
-        <ul class="navbar-nav flex-grow-1">
-          {{- $current := . -}}
-          {{- $section := $current.Section -}}
-          {{ range .Site.Menus.main -}}
-            {{- $active := or ($current.IsMenuCurrent "main" .) ($current.HasMenuCurrent "main" .) -}}
-            {{- $active = or $active (eq .Name $current.Title) -}}
-            {{- $active = or $active (and (eq .Name ($section | humanize)) (eq $current.Section $section)) -}}
-            {{- $active = or $active (and (eq .Name "Blog") (eq $current.Section "blog" "authors")) -}}
-            {{ if .HasChildren -}}
-              <li class="nav-item dropdown">
-                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                  {{ .Name -}}
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                    <path d="M6 9l6 6l6 -6"></path>
-                  </svg>
-                </a>
-                <ul class="dropdown-menu shadow rounded border-0">
-                  {{ range .Children -}}
-                  {{- $active = eq .Name $current.Title -}}
-                    <li><a class="dropdown-item{{ if $active }} active{{ end }}" href="{{ .URL | absURL }}"{{ if $active }} aria-current="true"{{ end }}>{{ .Name }}</a></li>
-                  {{ end -}}
-                </ul>
-              </li>
-            {{ else -}}
-              <li class="nav-item">
-                <a class="nav-link{{ if $active }} active{{ end }}" href="{{ .URL | absURL }}"{{ if $active }} aria-current="true"{{ end }}>{{ .Name }}</a>
-              </li>
-            {{ end -}}
-          {{ end -}}
-        </ul>
-
         <!-- FlexSearch desktop -->
         {{ partial "main/showFlexSearch" . }}
         {{ $showFlexSearch := .Scratch.Get "showFlexSearch" -}}
@@ -234,7 +216,7 @@
 
         <!-- Color mode toggler -->
         {{ if and (eq site.Params.doks.colorMode "auto") site.Params.doks.colorModeToggler -}}
-        <button id="buttonColorMode" class="btn btn-link mx-auto nav-link p-0 ms-lg-2 me-lg-1" type="button" aria-label="Toggle theme">
+        <button id="buttonColorMode" class="btn btn-link mx-auto nav-link p-0 ms-lg-2 me-lg-1 d-none d-lg-block" type="button" aria-label="Toggle theme">
           <svg data-bs-theme-value="dark" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-moon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
             <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
             <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"></path>
@@ -246,6 +228,38 @@
         </button>
         {{ end -}}
 
+        <ul class="navbar-nav flex-grow-1">
+          {{- $current := . -}}
+          {{- $section := $current.Section -}}
+          {{ range .Site.Menus.main -}}
+            {{- $active := or ($current.IsMenuCurrent "main" .) ($current.HasMenuCurrent "main" .) -}}
+            {{- $active = or $active (eq .Name $current.Title) -}}
+            {{- $active = or $active (and (eq .Name ($section | humanize)) (eq $current.Section $section)) -}}
+            {{- $active = or $active (and (eq .Name "Blog") (eq $current.Section "blog" "authors")) -}}
+            {{ if .HasChildren -}}
+              <li class="nav-item dropdown">
+                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                  {{ .Name -}}
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                    <path d="M6 9l6 6l6 -6"></path>
+                  </svg>
+                </a>
+                <ul class="dropdown-menu shadow rounded border-0">
+                  {{ range .Children -}}
+                  {{- $active = eq .Name $current.Title -}}
+                    <li><a class="dropdown-item{{ if $active }} active{{ end }}" href="{{ .URL | absURL }}"{{ if $active }} aria-current="true"{{ end }}>{{ .Name }}</a></li>
+                  {{ end -}}
+                </ul>
+              </li>
+            {{ else -}}
+              <li class="nav-item">
+                <a class="nav-link{{ if $active }} active{{ end }}" href="{{ .URL | absURL }}"{{ if $active }} aria-current="true"{{ end }}>{{ .Name }}</a>
+              </li>
+            {{ end -}}
+          {{ end -}}
+        </ul>
+
         <!-- Social menu -->
         {{ if .Site.Menus.social -}}
         <ul id="socialMenu" class="nav mx-auto flex-row order-lg-4">