From 75d4da380e2304a8d887a8427ad995d415be8b40 Mon Sep 17 00:00:00 2001
From: achmad <anakinskywalk1@gmail.com>
Date: Fri, 29 May 2026 03:33:50 +0700
Subject: [PATCH] fix: truly center logo on mobile using absolute positioning

---
 components/layout/NavbarClient.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/components/layout/NavbarClient.tsx b/components/layout/NavbarClient.tsx
index cee1bb1..ee8a1db 100644
--- a/components/layout/NavbarClient.tsx
+++ b/components/layout/NavbarClient.tsx
@@ -38,20 +38,23 @@ export default function NavbarClient({ categories }: Props) {
           {/* Mobile hamburger */}
           <button
             onClick={() => setMenuOpen(true)}
-            className="sm:hidden mr-3 text-text-muted hover:text-text-secondary transition-colors"
+            className="sm:hidden text-text-muted hover:text-text-secondary transition-colors w-10"
             aria-label="Open menu"
           >
             <Menu size={20} />
           </button>
 
-          {/* Logo — center on mobile, left on desktop */}
+          {/* Logo — truly centered on mobile */}
           <Link
             href="/"
-            className="text-lg font-black text-accent tracking-[3px] shrink-0 sm:mr-6 sm:ml-0 mx-auto sm:mx-0"
+            className="text-lg font-black text-accent tracking-[3px] sm:mr-6 sm:ml-0 absolute left-1/2 -translate-x-1/2 sm:static sm:translate-x-0"
           >
             言羽
           </Link>
 
+          {/* Spacer to balance hamburger on mobile */}
+          <div className="sm:hidden w-10" />
+
           {/* Desktop nav links */}
           <div className="hidden sm:flex items-center gap-1 flex-1 overflow-x-auto">
             <div className="w-px h-4 bg-border shrink-0 mr-4" />