From 884d55d71d5cae1bfa8d1363e1a5cabcacad4f02 Mon Sep 17 00:00:00 2001
From: Ou <orongxing@gmail.com>
Date: Mon, 21 Oct 2024 20:02:03 +0800
Subject: [PATCH] fx: keep navbar always centered

---
 src/components/header/index.tsx | 10 ++++++----
 src/routes/__root.tsx           | 14 +++++++++-----
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
index d777e6c..ebd8346 100644
--- a/src/components/header/index.tsx
+++ b/src/components/header/index.tsx
@@ -51,7 +51,7 @@ function Refresh() {
 export function Header() {
   return (
     <>
-      <span className="flex">
+      <span className="flex justify-self-start">
         <Link to="/" className="flex gap-2 items-center">
           <div className="h-10 w-10 bg-cover" title="logo" style={{ backgroundImage: "url(/icon.svg)" }} />
           <span className="text-2xl font-brand line-height-none!">
@@ -66,10 +66,12 @@ export function Header() {
           {`v${Version}`}
         </a>
       </span>
-      <span className="hidden md:inline-block">
-        <NavBar />
+      <span className="justify-self-center">
+        <span className="hidden md:(inline-block)">
+          <NavBar />
+        </span>
       </span>
-      <span className="flex gap-2 items-center text-xl text-primary-600 dark:text-primary">
+      <span className="justify-self-end flex gap-2 items-center text-xl text-primary-600 dark:text-primary">
         <GoTop />
         <Refresh />
         <Menu />
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index d9c8680..43cbdbe 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -47,11 +47,15 @@ function RootComponent() {
         "lg:(px-24)",
       ])}
       >
-        <header className={clsx([
-          "flex justify-between items-center py-4 px-5",
-          "lg:(py-6)",
-          "sticky top-0 z-10 backdrop-blur-md",
-        ])}
+        <header
+          className={clsx([
+            "grid items-center py-4 px-5",
+            "lg:(py-6)",
+            "sticky top-0 z-10 backdrop-blur-md",
+          ])}
+          style={{
+            gridTemplateColumns: "50px auto 50px",
+          }}
         >
           <Header />
         </header>