correctly style nav menu

src/_layouts/includes/menu.njk

@@ -1,8 +1,13 @@
 {% from '../macros/renderNavListItem.njk' import renderNavListItem with context %}
 
-<nav class="container mx-auto">
+<nav class="w-full bg-blue-600 text-white">
   {% set allEntries = collections.all %}
-  <ul role="list" class="ml-20 list-disc">
+  <ul role="list" class="flex">
+    <li class="relative group">
+    <a href="/" {% if entry.url == "/" %} aria-current="page" {% endif %}
+      class="block p-4 text-nowrap hover:text-blue-300"
+      >ॐ home</a> 
+    </li>
     {%- for entry in allEntries %}
       {% if entry.url.split("/").length === 3 %}
         {# 

src/_layouts/macros/renderNavListItem.njk

@@ -1,3 +1,21 @@
+{% macro aClass(entry) %}
+  {% if entry.url.split("/").length === 3 %}
+    block p-4 text-nowrap hover:text-blue-300
+  {% endif %}
+  {% if entry.url.split("/").length === 4 %}
+    block p-4 text-nowrap hover:underline
+  {% endif %}
+  {% if entry.url.split("/").length >= 5 %}
+    block px-4 py-0 text-sm text-nowrap hover:underline
+  {% endif %}
+{% endmacro %}
+
+{% macro ulClass(entry) %}
+  {% if entry.url.split("/").length === 3 %}
+    absolute left-0 hidden bg-white text-black shadow-lg group-hover:block
+  {% endif %}
+{% endmacro %}
+
 {% macro renderNavListItem(entry) %}
   {% set children = [] %}
   {% set level = entry.url.split("/").length %}
@@ -12,19 +30,26 @@
   {% endfor %}
 
   {% if children.length %}
-    <li>
-      <div>
+    <li class="relative group {% if entry.url.split("/").length === 4 %}hover:bg-gray-100{% endif %}">
+      <div class="">
         <summary>
-          <a href="{{ entry.url }}"{% if entry.url == page.url %} aria-current="page" {% endif %}>{{ entry.data.title }}</a> ({{ level }})
+          <a href="{{ entry.url }}" {% if entry.url == page.url %} aria-current="page"{% endif %} 
+          class="{{aClass(entry)}} 
+          {% if entry.url.split("/").length === 4 %}-mb-4{% endif %}">
+            {{ entry.data.title }}  ({{level}})
+          </a>
         </summary>
-        <ul role="list" class="container ml-5 list-disc">
+        <ul role="list" class="{{ulClass(entry)}}
+          {% if entry.url.split("/").length >= 4 %}ml-2{% endif %}">
           {%- for child in children %}{{ renderNavListItem(child) }}{% endfor -%}
         </ul>
       </div>
     </li>
   {% else %}
-    <li>
-      <a href="{{ entry.url }}"{% if entry.url == page.url %} aria-current="page" {% endif %}>{{ entry.data.title }}</a>
+    <li class="relative group {% if entry.url.split("/").length === 4 %}hover:bg-gray-100{% endif %}">
+      <a href="{{ entry.url }}"{% if entry.url == page.url %} aria-current="page" {% endif %}
+      class="{{aClass(entry)}}"
+      >{{ entry.data.title }} ({{level}})</a> 
     </li>
   {% endif %}
 {% endmacro %}

src/pages/documentation/index.html

@@ -3,6 +3,8 @@
 layout: documentation.njk
 ---
 
+
+
 <main class="container mx-auto flex flex-col flex-wrap items-center px-6 pt-24 md:flex-row md:pt-48">
   <header class="flex w-full flex-col justify-center overflow-y-hidden lg:items-start xl:w-2/5">
     <h1 class="my-4 text-center text-3xl font-bold leading-tight text-blue-500 md:text-left md:text-5xl">

src/pages/secondary/sub-secondary/index.html

@@ -1,5 +1,5 @@
 ---
-title: "Sub secondary page"
+title: "Plessounaille"
 layout: secondary.njk
 ---
 

src/pages/secondary/sub-secondary/onather.html

@@ -0,0 +1,14 @@
+---
+title: "Trebozibordon"
+layout: secondary.njk
+---
+
+<main class="container mx-auto flex flex-col flex-wrap items-center px-6 pt-24 md:flex-row md:pt-48">
+  <header class="flex w-full flex-col justify-center overflow-y-hidden lg:items-start xl:w-2/5">
+    <h1 class="my-4 text-center text-3xl font-bold leading-tight text-blue-500 md:text-left md:text-5xl">
+      {{ metadata.title }}
+    </h1>
+    <p class="mb-6 text-center text-base leading-normal md:text-left md:text-2xl">{{ metadata.description }}</p>
+    <a href="/">index</a> | <a href="/secondary/">secondary</a>
+  </header>
+</main>

src/pages/secondary/sub-secondary/onatherone.html

@@ -0,0 +1,14 @@
+---
+title: "Orthewuut"
+layout: secondary.njk
+---
+
+<main class="container mx-auto flex flex-col flex-wrap items-center px-6 pt-24 md:flex-row md:pt-48">
+  <header class="flex w-full flex-col justify-center overflow-y-hidden lg:items-start xl:w-2/5">
+    <h1 class="my-4 text-center text-3xl font-bold leading-tight text-blue-500 md:text-left md:text-5xl">
+      {{ metadata.title }}
+    </h1>
+    <p class="mb-6 text-center text-base leading-normal md:text-left md:text-2xl">{{ metadata.description }}</p>
+    <a href="/">index</a> | <a href="/secondary/">secondary</a>
+  </header>
+</main>

src/pages/secondary/sub-secondary/subsubotherpage/alonsbon.html

@@ -0,0 +1,14 @@
+---
+title: "Alloonbün"
+layout: secondary.njk
+---
+
+<main class="container mx-auto flex flex-col flex-wrap items-center px-6 pt-24 md:flex-row md:pt-48">
+  <header class="flex w-full flex-col justify-center overflow-y-hidden lg:items-start xl:w-2/5">
+    <h1 class="my-4 text-center text-3xl font-bold leading-tight text-blue-500 md:text-left md:text-5xl">
+      {{ metadata.title }}
+    </h1>
+    <p class="mb-6 text-center text-base leading-normal md:text-left md:text-2xl">{{ metadata.description }}</p>
+    <a href="/">index</a> | <a href="/secondary/">secondary</a>
+  </header>
+</main>

src/pages/secondary/sub-secondary/subsubotherpage/index.html

@@ -1,5 +1,5 @@
 ---
-title: "Sub sub thing other"
+title: "Octuraboustan"
 layout: secondary.njk
 ---
 

src/pages/secondary/sub-secondary/subsubotherpage/onather.html

@@ -0,0 +1,14 @@
+---
+title: "Trebozibordon"
+layout: secondary.njk
+---
+
+<main class="container mx-auto flex flex-col flex-wrap items-center px-6 pt-24 md:flex-row md:pt-48">
+  <header class="flex w-full flex-col justify-center overflow-y-hidden lg:items-start xl:w-2/5">
+    <h1 class="my-4 text-center text-3xl font-bold leading-tight text-blue-500 md:text-left md:text-5xl">
+      {{ metadata.title }}
+    </h1>
+    <p class="mb-6 text-center text-base leading-normal md:text-left md:text-2xl">{{ metadata.description }}</p>
+    <a href="/">index</a> | <a href="/secondary/">secondary</a>
+  </header>
+</main>

src/pages/secondary/sub-secondary/subsubpage.html

@@ -1,5 +1,5 @@
 ---
-title: "Sub sub page page"
+title: "Subkrstarik"
 layout: secondary.njk
 ---