From 23c1cc6b726aa3bdee5c046eee8dd2596ed8591f Mon Sep 17 00:00:00 2001
From: Break27 <buzybreakerbear@gmail.com>
Date: Fri, 20 Sep 2024 18:31:34 +0800
Subject: [PATCH] tweak: navigation font size on mobile devices

---
 src/scripts/object.js |  8 +++++---
 src/scripts/search.js | 15 +++++++++++----
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/scripts/object.js b/src/scripts/object.js
index 6936dfb..4b43a5f 100644
--- a/src/scripts/object.js
+++ b/src/scripts/object.js
@@ -183,7 +183,7 @@ export class Folder extends BaseNode {
                           data-[active=true]:text-red-600 hover:text-neutral-950 
                           data-[active=true]:border-red-600 hover:border-neutral-800"
               >
-                <a class="truncate" href="/${node.path}"
+                <a class="truncate md:text-base text-lg" href="/${node.path}"
                    @click="router.emit('navigate'); router.from($event)"
                 >${node.name}</a>
               </div>
@@ -199,9 +199,11 @@ export class Folder extends BaseNode {
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5" :class="open ? 'rotate-90' : ''">
                 <path fill-rule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
               </svg>
-              <span class="md:order-last order-first">${this.name}</span>
+              <span class="md:order-last order-first md:text-base text-lg">
+                ${this.name}
+              </span>
             </div>
-            <div x-show="open" style="--max: ${maxHeight}px" class="flex flex-col md:ml-4 ml-1 mb-1 md:pr-0 pr-8 overflow-hidden transition-[max-height]"
+            <div x-show="open" style="--max: ${maxHeight}px" class="flex flex-col md:ml-4 ml-1 mb-1 md:pr-0 pr-1.5 overflow-hidden transition-[max-height]"
                  x-transition:enter="ease-out duration-100"
                  x-transition:enter-start="max-h-0"
                  x-transition:enter-end="max-h-[var(--max)]"
diff --git a/src/scripts/search.js b/src/scripts/search.js
index 41045eb..6e1127b 100644
--- a/src/scripts/search.js
+++ b/src/scripts/search.js
@@ -25,14 +25,21 @@ export class Engine {
 
     template(namespace) {
         return `
-          <div x-data="{ value: '', active: false }" class="relative mx-5 mt-6" @focusin="active = true" @focusout="active = false">
+          <div class="relative mx-5 mt-6 md:text-base text-xl"
+               x-data="{ value: '', active: false }"
+               @focusin="active = true" @focusout="active = false"
+          >
             <div class="flex focus-within:ring-2 ring-neutral-300 transition w-full items-center rounded-md border pl-1 py-0.5">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 text-neutral-400">
                 <path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z" clip-rule="evenodd" />
               </svg>
-              <input type="text" x-model="value" class="w-full px-2 placeholder:text-neutral-300 focus:outline-none" placeholder="Search page or heading...">
+              <input x-model="value"
+                     class="w-full px-2 placeholder:text-neutral-300 placeholder:text-sm focus:outline-none"
+                     type="text"
+                     placeholder="Search page or heading..."
+              >
             </div>
-            <div x-show="active && value" class="absolute rounded-md border bg-white left-0 top-0 mt-9 min-w-48 max-h-96 shadow-xl overflow-y-auto overscroll-contain">
+            <div x-effect="console.log(active)" x-show="active && value" class="absolute rounded-md border bg-white left-0 top-0 mt-9 min-w-48 max-h-96 shadow-xl overflow-y-auto overscroll-contain">
               <div x-data="{ results: [] }" x-effect="results = ${namespace}.search(value)" class="empty:hidden flex flex-col p-1.5">
                 <template x-for="result in results">
                   <div x-html="${namespace}.generateHTML(result)" class="flex size-full"></div>
@@ -51,7 +58,7 @@ export class Engine {
     generateHTML(result) {
         return `
           <button class="flex flex-col size-full gap-y-1.5 text-start rounded-md hover:bg-neutral-200 p-2"
-                  @click="router.goto(&quot;${result.path}&quot;); active = false"
+                  @click="$nextTick(() => active = false); router.goto(&quot;${result.path}&quot;)"
           >
           <span>${result.name}</span>
           <span class="text-xs text-neutral-500"