updated appheader

src/components/appHeader/index.tsx

@@ -0,0 +1,30 @@
+import { ArrowLeftIcon, ArrowRightIcon } from '@radix-ui/react-icons';
+import { useRouter } from 'next/router';
+
+export default function AppHeader() {
+  const router = useRouter();
+
+  const goBack = () => {
+    router.back();
+  };
+
+  const goForward = () => {
+    window.history.forward();
+  };
+
+  return (
+    <div data-tauri-drag-region className="flex h-full w-full items-center">
+      <div className="relative w-[68px] shrink-0">{/* macos traffic lights */}</div>
+      <div className="px-2.5">
+        <div className="flex h-full gap-2">
+          <button onClick={() => goBack()} className="group rounded-md p-1 hover:bg-zinc-900">
+            <ArrowLeftIcon className="h-5 w-5 text-zinc-500 group-hover:text-zinc-300" />
+          </button>
+          <button onClick={() => goForward()} className="group rounded-md p-1 hover:bg-zinc-900">
+            <ArrowRightIcon className="h-5 w-5 text-zinc-500 group-hover:text-zinc-300" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/layouts/withSidebar.tsx

@@ -1,3 +1,4 @@
+import AppHeader from '@components/appHeader';
 import AccountColumn from '@components/columns/account';
 import NavigatorColumn from '@components/columns/navigator';
 
@@ -6,12 +7,12 @@ export default function WithSidebarLayout({ children }: { children: React.ReactN
     <div className="flex h-screen w-full flex-col">
       <div
         data-tauri-drag-region
-        className="flex h-11 shrink-0 items-center border-b border-zinc-100 bg-white dark:border-zinc-900 dark:bg-black"
+        className="relative h-11 shrink-0 border-b border-zinc-100 bg-white dark:border-zinc-900 dark:bg-black"
       >
-        <p className="w-full text-center">Header</p>
+        <AppHeader />
       </div>
       <div className="relative flex h-full w-full flex-1 flex-row">
-        <div className="relative w-[67px] shrink-0 border-r border-zinc-900">
+        <div className="relative w-[68px] shrink-0 border-r border-zinc-900">
           <div className="absolute top-0 left-0 h-12 w-full" />
           <AccountColumn />
         </div>