add layout and hook

client-electron/src/App.tsx

@@ -1,19 +1,52 @@
-import { HashRouter, Route, Routes } from 'react-router-dom'
-import Home from './pages/Home'
+import {
+  createBrowserRouter,
+  createHashRouter,
+  RouterProvider,
+  type RouteObject
+} from 'react-router-dom'
 import AuthCallBack from './AuthCallBack'
+import MainLayout from './layouts/MainLayout'
+import Home from './pages/Home'
+
+function router() {
+  const routes: RouteObject[] = [
+    {
+      path: '/',
+      element: (
+        <MainLayout>
+          <Home />
+        </MainLayout>
+      ),
+      children: [
+        {
+          path: 'recipes',
+          element: <div>Recipes</div>
+        }
+      ]
+    },
+    {
+      path: '/auth/callback',
+      element: <AuthCallBack />
+    },
+    {
+      path: '*',
+      element: (
+        <div className="flex flex-col items-center justify-center h-screen">
+          <h1 className="text-3xl font-bold text-gray-900">404</h1>
+          <p className="text-gray-500">Page Not Found</p>
+        </div>
+      )
+    }
+  ]
+
+  if (import.meta.env.MODE == 'electron') {
+    return createHashRouter(routes)
+  }
+  return createBrowserRouter(routes)
+}
 
 const App: React.FC = () => {
-  return (
-    <HashRouter>
-      <header>{/* header here */}</header>
-      <main>
-        <Routes>
-          <Route path="/" element={<Home />} />
-          <Route path="/callback" element={<AuthCallBack />} />
-        </Routes>
-      </main>
-    </HashRouter>
-  )
+  return <RouterProvider router={router()} />
 }
 
 export default App

client-electron/src/components/Header.tsx

@@ -0,0 +1,9 @@
+const Header: React.FC = () => {
+  return (
+    <header className="fixed bg-black w-full z-0 px-4 shadow-sm shadow-slate-500/40 pl-[20rem]">
+      <h2>Header</h2>
+    </header>
+  )
+}
+
+export default Header

client-electron/src/components/Sidebar.tsx

@@ -0,0 +1,9 @@
+const Sidebar: React.FC = () => {
+  return (
+    <aside className="fixed bg-black text-gray-500 z-50 h-full shadow-lg shadow-gray-900/20 transition duration-300 ease-in-out w-[20rem]">
+      <h2>Sidebar</h2>
+    </aside>
+  )
+}
+
+export default Sidebar

client-electron/src/hooks/userAuth.ts

@@ -0,0 +1,14 @@
+import { create } from 'zustand'
+
+interface UserAuth {
+  username: string | undefined
+  email: string | undefined
+}
+
+const userAuthStore = create<UserAuth>(() => ({
+  username: undefined,
+  email: undefined
+}))
+
+export const getUserName = userAuthStore(state => state.username)
+export const getUserEmail = userAuthStore(state => state.email)

client-electron/src/index.css

@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+* {
+    min-width: 0px;
+    top: 0px;
+    left: 0px;
+}

client-electron/src/layouts/MainLayout.tsx

@@ -0,0 +1,14 @@
+import Header from '../components/Header'
+import Sidebar from '../components/Sidebar'
+
+const MainLayout = ({ children }: React.PropsWithChildren) => {
+  return (
+    <div>
+      <Sidebar />
+      <Header />
+      <main className="fixed pt-14 px-4 pl-[21rem]">{children}</main>
+    </div>
+  )
+}
+
+export default MainLayout