From 612613859c21c870e4932117c0c68a509ad1067b Mon Sep 17 00:00:00 2001
From: rusconn <rusconn3@gmail.com>
Date: Sat, 14 Oct 2023 23:36:37 +0900
Subject: [PATCH] refactor: simplify some markups and styles

---
 app/layout.tsx                   | 12 ++++--------
 components/sidebar.tsx           |  6 +++---
 components/sidebar/tool-link.tsx |  4 ++--
 components/site-header.tsx       | 21 ++++++++++++---------
 4 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/app/layout.tsx b/app/layout.tsx
index 71b5117..618a281 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -51,14 +51,10 @@ export default function RootLayout({ children }: RootLayoutProps) {
       >
         <ThemeProvider attribute="class" defaultTheme="system" disableTransitionOnChange>
           <SearchTextProvider>
-            <div className="relative flex h-full flex-col">
-              <SiteHeader />
-              <div className="flex flex-1 overflow-y-hidden">
-                <Sidebar />
-                <main className="h-full flex-1 overflow-y-auto rounded-tl-md border bg-page p-12">
-                  {children}
-                </main>
-              </div>
+            <div className="grid h-full grid-cols-[18rem_1fr] grid-rows-[3.5rem_1fr]">
+              <SiteHeader className="col-span-full" />
+              <Sidebar />
+              <main className="overflow-y-auto rounded-tl-md border bg-page p-12">{children}</main>
             </div>
             <TailwindIndicator />
           </SearchTextProvider>
diff --git a/components/sidebar.tsx b/components/sidebar.tsx
index ef19b93..1d39bcf 100644
--- a/components/sidebar.tsx
+++ b/components/sidebar.tsx
@@ -7,12 +7,12 @@ import { ToolGroups } from "./sidebar/tool-groups";
 
 export function Sidebar() {
   return (
-    <nav className="flex w-72 flex-col">
+    <nav className="flex flex-col overflow-y-auto">
       <div className="mt-px px-4">
         <SearchBar />
       </div>
       <div className="flex-1 overflow-y-auto">
-        <div className="mb-2 mt-4 px-2">
+        <div className="mt-2 p-2">
           <AllTools />
         </div>
         <Separator />
@@ -21,7 +21,7 @@ export function Sidebar() {
         </div>
       </div>
       <Separator />
-      <div className="justify-end p-2">
+      <div className="p-2">
         <Settings />
       </div>
     </nav>
diff --git a/components/sidebar/tool-link.tsx b/components/sidebar/tool-link.tsx
index 783fcfe..4a54c57 100644
--- a/components/sidebar/tool-link.tsx
+++ b/components/sidebar/tool-link.tsx
@@ -26,9 +26,9 @@ function RawToolLink({ Icon, shortTitle: title, href, onClick, className, highli
       <span className={cn("invisible flex items-center", highlight !== "none" && "visible")}>
         <Indicator />
       </span>
-      <span className="flex select-none items-center">
+      <span className="flex select-none items-center gap-4">
         <Icon size={16} />
-        <span className="ml-4">{title}</span>
+        <span>{title}</span>
       </span>
     </Link>
   );
diff --git a/components/site-header.tsx b/components/site-header.tsx
index fcd7e2b..f083d7c 100644
--- a/components/site-header.tsx
+++ b/components/site-header.tsx
@@ -1,13 +1,18 @@
 import Link from "next/link";
 
 import { siteConfig } from "@/config/site";
+import { cn } from "@/lib/style";
 import { icons } from "@/components/icons";
 import { ThemeToggle } from "@/components/theme-toggle";
 
-export function SiteHeader() {
+type Props = {
+  className?: string;
+};
+
+export function SiteHeader({ className }: Props) {
   return (
-    <header className="flex h-14 items-center justify-between px-4">
-      <div className="flex items-baseline space-x-2.5">
+    <header className={cn("flex items-center justify-between px-4", className)}>
+      <div className="flex items-baseline gap-x-2.5">
         <Link className="text-lg" href="/">
           {siteConfig.name}
         </Link>
@@ -23,17 +28,15 @@ export function SiteHeader() {
           </a>
         </small>
       </div>
-      <div className="flex items-center space-x-1">
+      <div className="flex gap-x-1">
         <a
-          className="group rounded-md p-2"
+          className="group h-10 w-10 rounded-md p-2"
           href={siteConfig.links.github}
           target="_blank"
           rel="noreferrer"
         >
-          <div>
-            <icons.GitHub className="h-6 w-6 group-hover:opacity-70" />
-            <span className="sr-only">GitHub</span>
-          </div>
+          <icons.GitHub className="group-hover:opacity-70" />
+          <span className="sr-only">GitHub</span>
         </a>
         <ThemeToggle />
       </div>