feat: update layout styles and iframe source for improved UI consistency

src/modules/layout/index.tsx

@@ -61,13 +61,13 @@ export const LayoutMain = (props: LayoutMainProps) => {
   }, []);
 
   return (
-    <div className='flex gap-2 text-lg w-full relative'>
+    <div className='flex gap-2 text-lg w-full h-12 items-center'>
       <div
-        className={clsx('layout-menu items-center  w-full', !mount && 'invisible!')}
+        className={clsx('layout-menu items-center bg-gray-200 w-full h-full', !mount && 'invisible!')}
         style={{
           cursor: isElectron ? 'move' : 'default',
         }}>
-        <div className='flex grow justify-between pl-4 py-2 items-center bg-gray-200'>
+        <div className='flex grow justify-between pl-4 py-2 items-center '>
           <div className='flex items-center gap-2'>
             <div className='text-xl font-bold '>{props.title}</div>
             <div className='flex items-center gap-2 text-sm '>

src/pages/page.tsx

@@ -1,7 +1,7 @@
 export default function Home() {
   return (
     <div className="flex h-full items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <iframe src="/root/router-studio" className="w-full  border-0" style={{
+      <iframe src="/root/router-studio?noHeader=true" className="w-full  border-0" style={{
         height: 'calc(100vh - 48px)'
       }} />
     </div>

src/routes/__root.tsx

@@ -1,18 +1,23 @@
-import { Link, Outlet, createRootRoute, useNavigate } from '@tanstack/react-router'
+import { LayoutMain } from '@/modules/layout'
+
+import { Link, Outlet, createRootRoute } from '@tanstack/react-router'
 import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
 import { Toaster } from '@/components/ui/sonner'
 import { AuthProvider } from '@/pages/auth'
 import { TooltipProvider } from '@/components/ui/tooltip'
-import { LayoutMain } from '@/modules/layout'
+import { Home } from 'lucide-react';
 export const Route = createRootRoute({
   component: RootComponent,
 })
 
-function RootComponent() {
+const BaseHeader = (props: { children?: React.ReactNode }) => {
+  if (props.children) {
+    return props.children
+  }
   return (
-    <div className='h-full w-full overflow-hidden'>
-      {/* 
-      <div className="p-2 flex gap-2 text-lg">
+    <>
+      <div className="flex gap-2 text-lg w-full h-12 items-center">
+        <div className='px-2'>
           <Link
             to="/"
             activeProps={{
@@ -20,14 +25,21 @@ function RootComponent() {
             }}
             activeOptions={{ exact: true }}
           >
-          Home
+            <Home className='w-5 h-5' />
           </Link>
         </div>
-      <hr /> */}
+      </div>
+      <hr />
+    </>
+  )
+}
+function RootComponent() {
+  return (
+    <div className='h-full overflow-hidden'>
+      <BaseHeader><LayoutMain /></BaseHeader>
       <AuthProvider mustLogin={true}>
-        <LayoutMain />
         <TooltipProvider>
-          <main className='h-[calc(100%-4rem)] overflow-auto scrollbar'>
+          <main className='h-[calc(100%-3rem)] overflow-auto scrollbar'>
             <Outlet />
           </main>
         </TooltipProvider>
@@ -35,6 +47,5 @@ function RootComponent() {
       <TanStackRouterDevtools position="bottom-right" />
       <Toaster />
     </div>
-
   )
 }