feat: add navigation

Cecilapp · Feb 1, 2024 · d89d2ec · d89d2ec
1 parent 167f957
commit d89d2ec
Show file tree

Hide file tree

Showing 9 changed files with 65 additions and 43 deletions.
diff --git a/assets/styles.css b/assets/styles.css
@@ -1256,12 +1256,8 @@ video {
   width: 1.75rem;
 }
 
-.w-\[15\.75rem\] {
-  width: 15.75rem;
-}
-
-.w-auto {
-  width: auto;
+.w-80 {
+  width: 20rem;
 }
 
 .w-full {
@@ -1424,6 +1420,10 @@ video {
   border-width: 0px;
 }
 
+.border-b {
+  border-bottom-width: 1px;
+}
+
 .border-t {
   border-top-width: 1px;
 }
@@ -1442,6 +1442,11 @@ video {
   border-color: rgb(148 163 184 / var(--tw-border-opacity));
 }
 
+.border-b-secondary-400 {
+  --tw-border-opacity: 1;
+  border-bottom-color: rgb(148 163 184 / var(--tw-border-opacity));
+}
+
 .border-t-secondary-300 {
   --tw-border-opacity: 1;
   border-top-color: rgb(203 213 225 / var(--tw-border-opacity));
@@ -1529,6 +1534,10 @@ video {
   padding-bottom: 1.5rem;
 }
 
+.pb-4 {
+  padding-bottom: 1rem;
+}
+
 .pl-4 {
   padding-left: 1rem;
 }
@@ -2376,8 +2385,8 @@ main details a {
     width: 75%;
   }
 
-  .lg\:min-w-72 {
-    min-width: 18rem;
+  .lg\:max-w-72 {
+    max-width: 18rem;
   }
 
   .lg\:translate-x-0 {

diff --git a/composer.json b/composer.json
@@ -12,7 +12,7 @@
     }
   ],
   "require": {
-    "cecil/theme-docs": "^2.9",
+    "cecil/theme-docs": "^2.10",
     "cecil/theme-pwa": "^2.1"
   },
   "scripts": {

diff --git a/composer.lock b/composer.lock
diff --git a/config.yml b/config.yml
@@ -20,21 +20,18 @@ languages:
       baseline: Une documentation efficace
       description: Créer et gérer une documentation efficace.
       menus:
-        main:
-          - id: index
-            enabled: false
+        navigation:
           - id: docs
             name: Docs
-            url: docs/introduction/getting-started
-            weight: -1
+            url: /docs/introduction/getting-started
 menus:
-  main:
-    - id: index
-      enabled: false
+  navigation:
     - id: docs
       name: Docs
-      url: docs/introduction/getting-started
-      weight: -1
+      url: /docs/introduction/getting-started
+    - id: about
+      name: About
+      url: /about
 sidebar:
   - Introduction
   - Guides

diff --git a/themes/docs/assets/styles.css b/themes/docs/assets/styles.css
@@ -1256,12 +1256,8 @@ video {
   width: 1.75rem;
 }
 
-.w-\[15\.75rem\] {
-  width: 15.75rem;
-}
-
-.w-auto {
-  width: auto;
+.w-80 {
+  width: 20rem;
 }
 
 .w-full {
@@ -1424,6 +1420,10 @@ video {
   border-width: 0px;
 }
 
+.border-b {
+  border-bottom-width: 1px;
+}
+
 .border-t {
   border-top-width: 1px;
 }
@@ -1442,6 +1442,11 @@ video {
   border-color: rgb(148 163 184 / var(--tw-border-opacity));
 }
 
+.border-b-secondary-400 {
+  --tw-border-opacity: 1;
+  border-bottom-color: rgb(148 163 184 / var(--tw-border-opacity));
+}
+
 .border-t-secondary-300 {
   --tw-border-opacity: 1;
   border-top-color: rgb(203 213 225 / var(--tw-border-opacity));
@@ -1529,6 +1534,10 @@ video {
   padding-bottom: 1.5rem;
 }
 
+.pb-4 {
+  padding-bottom: 1rem;
+}
+
 .pl-4 {
   padding-left: 1rem;
 }
@@ -2376,8 +2385,8 @@ main details a {
     width: 75%;
   }
 
-  .lg\:min-w-72 {
-    min-width: 18rem;
+  .lg\:max-w-72 {
+    max-width: 18rem;
   }
 
   .lg\:translate-x-0 {

diff --git a/themes/docs/layouts/_default/page.html.twig b/themes/docs/layouts/_default/page.html.twig
@@ -18,13 +18,9 @@
     <header class="fixed top-0 inset-x-0 z-30 flex space-x-3 space-x-reverse items-center h-14 pl-4 pr-1 lg:pr-2 py-3 bg-primary-700 dark:bg-primary-900 text-primary-100 hover:text-primary-50 shadow-md">
       <div class="hidden"></div>
       {{- include('partials/menu-title.html.twig') ~}}
-      {#- menu ~#}
-      <div class="hidden lg:flex flex-row space-x-4">
-        {%- for entry in site.menus.main|sort_by_weight ~%}
-        <a class="hidden md:inline-block" href="{{ url(entry.url) }}" data-weight="{{ entry.weight }}">
-          {{ entry.name }}
-        </a>
-        {%- endfor -%}
+      {#- navigation menu ~#}
+      <div class="hidden lg:flex space-x-4 pl-4">
+        {{- include('partials/navigation.html.twig') ~}}
       </div>
       <div class="grow"></div>
       {#- DocSearch ~#}

diff --git a/themes/docs/layouts/partials/menu-title.html.twig b/themes/docs/layouts/partials/menu-title.html.twig
@@ -8,6 +8,6 @@
         </svg>
       </button>
       {#- site title ~#}
-      <div class="w-[15.75rem]">
+      <div>
         <a href="{{ url(site.home) }}" title="{{ site.title }}" class="text-xl text-inherit hover:text-inherit no-underline hover:no-underline py-2">{{ site.title }}</a>
       </div>
diff --git a/themes/docs/layouts/partials/navigation.html.twig b/themes/docs/layouts/partials/navigation.html.twig
@@ -0,0 +1,6 @@
+        {#- navigation menu ~#}
+        {%- for entry in site.menus.navigation|sort_by_weight ~%}
+        <a href="{{ url(entry.url) }}" data-weight="{{ entry.weight }}">
+          {{ entry.name }}
+        </a>
+        {%- endfor -%}
diff --git a/themes/docs/layouts/partials/sidebar.html.twig b/themes/docs/layouts/partials/sidebar.html.twig
@@ -1,11 +1,16 @@
       {#- sidebar ~#}
-      <div id="sidebar" class="fixed z-50 lg:z-0 top-0 lg:top-auto lg:flex lg:flex-col w-auto lg:min-w-72 h-screen overflow-auto bg-primary-100 dark:bg-primary-900 shadow-md lg:shadow-none -translate-x-full {% if page.type != 'homepage' %}lg:translate-x-0{% endif %} transition-all duration-200 ease-out">
+      <div id="sidebar" class="fixed z-50 lg:z-0 top-0 lg:top-auto lg:flex lg:flex-col w-80 lg:max-w-72 h-screen overflow-auto bg-primary-100 dark:bg-primary-900 shadow-md lg:shadow-none -translate-x-full {% if page.type != 'homepage' %}lg:translate-x-0{% endif %} transition-all duration-200 ease-out">
         <div class="lg:hidden flex space-x-3 space-x-reverse items-center h-14 pl-4 pr-1 lg:pl-6 lg:pr-2 py-3">
           <div class="hidden"></div>
           {{- include('partials/menu-title.html.twig') ~}}
         </div>
         <nav class="px-4 py-3">
           {%- block navigation ~%}
+          {#- navigation menu ~#}
+          <div class="lg:hidden flex flex-col space-y-2 pb-4 mb-4 border-b border-b-secondary-400">
+            {{- include('partials/navigation.html.twig') ~}}
+          </div>
+          {#- sidebar groups ~#}
           {%- for group in site.sidebar ~%}
             {%- if site.page('docs/' ~ group|slugify) ~%}
               {%- set group_title = site.page('docs/' ~ group|slugify).title ~%}