adding homepae and sidemenu

.gitignore

@@ -16,6 +16,7 @@ dev-dist
 # Editor directories and files
 .idea
 .DS_Store
+.env
 *.suo
 *.ntvs*
 *.njsproj

src/components/DrawerOption.tsx

@@ -0,0 +1,27 @@
+import { Link } from "@tanstack/react-router";
+import { CalendarIcon, VStack } from "../components";
+
+const options = [
+    { name: "活動/揪人", engName: "Events", pageNav: "/events", icon: CalendarIcon },
+    { name: "拍賣", engName: "Market", pageNav: "/sales", icon: CalendarIcon },
+    { name: "行事曆", engName: "Calendar", pageNav: "/calendar", icon: CalendarIcon },
+    { name: "地圖", engName: "Map", pageNav: "/map", icon: CalendarIcon },
+    { name: "今晚吃什麼", engName: "Dinner Decider", pageNav: "/dinner", icon: CalendarIcon },
+];
+
+export const DrawerOption = () => {
+    return (
+        <VStack id="all-nav-func">
+            {options.map((option) => (
+                <Link to={option.pageNav}>
+                    <li key={option.name}>
+                        <VStack className="justify-start">
+                            <a>{option.name}</a>
+                            <a>{option.engName}</a>
+                        </VStack>
+                    </li>
+                </Link>
+            ))}
+        </VStack>
+    );
+};

src/components/DrawerSideBar.tsx

@@ -0,0 +1,40 @@
+import { Image, VStack } from "../components";
+import { DrawerOption } from "./DrawerOption";
+
+const UserInfo = {
+    name: "NCU APP",
+    avatar: "src/assets/logo.png"
+};
+
+export const DrawerSideBar = () => {
+    return (
+        <div className="flex w-fit drawer">
+            <input id="my-drawer" type="checkbox" className="drawer-toggle" />
+
+            {/* Drawer Portal */}
+            <div className="drawer-content">
+                <label htmlFor="my-drawer" className="drawer-button">
+                    <Image src={UserInfo.avatar} children={undefined} className='w-10 rounded-full'></Image>
+                </label>
+            </div>
+
+            {/* Indise Drawer */}
+            <div className="drawer-side">
+                <label htmlFor="my-drawer" aria-label="close sidebar" className="drawer-overlay"></label>
+
+                <ul className="menu bg-base-200 text-base-content min-h-full w-80 p-4">
+                    {/* Sidebar content here */}
+                    <VStack id="user-avatar">
+                        <Image src={UserInfo.avatar} children={undefined} className='mb-2 w-10 rounded-full'></Image>
+                        <text className="font-bold">{UserInfo.name}</text>
+                        <text className="text-xs">View Profile</text>
+                    </VStack>
+
+                    <div className="divider divider-neutral" />
+
+                    <DrawerOption />
+                </ul>
+            </div>
+        </div>
+    );
+};

src/routeTree.gen.ts

@@ -11,23 +11,41 @@
 // Import Routes
 
 import { Route as rootRoute } from './routes/__root'
+import { Route as LogoutImport } from './routes/logout'
 import { Route as LoginImport } from './routes/login'
+import { Route as IndexImport } from './routes/index'
 import { Route as EventsIndexImport } from './routes/events/index'
+import { Route as HomeInfoCardImport } from './routes/home/infoCard'
 import { Route as EventsCreateImport } from './routes/events/create'
 import { Route as EventsEventIdImport } from './routes/events/$eventId'
 
 // Create/Update Routes
 
+const LogoutRoute = LogoutImport.update({
+  path: '/logout',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const LoginRoute = LoginImport.update({
   path: '/login',
   getParentRoute: () => rootRoute,
 } as any)
 
+const IndexRoute = IndexImport.update({
+  path: '/',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const EventsIndexRoute = EventsIndexImport.update({
   path: '/events/',
   getParentRoute: () => rootRoute,
 } as any)
 
+const HomeInfoCardRoute = HomeInfoCardImport.update({
+  path: '/home/infoCard',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const EventsCreateRoute = EventsCreateImport.update({
   path: '/events/create',
   getParentRoute: () => rootRoute,
@@ -42,13 +60,27 @@ const EventsEventIdRoute = EventsEventIdImport.update({
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexImport
+      parentRoute: typeof rootRoute
+    }
     '/login': {
       id: '/login'
       path: '/login'
       fullPath: '/login'
       preLoaderRoute: typeof LoginImport
       parentRoute: typeof rootRoute
     }
+    '/logout': {
+      id: '/logout'
+      path: '/logout'
+      fullPath: '/logout'
+      preLoaderRoute: typeof LogoutImport
+      parentRoute: typeof rootRoute
+    }
     '/events/$eventId': {
       id: '/events/$eventId'
       path: '/events/$eventId'
@@ -63,6 +95,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof EventsCreateImport
       parentRoute: typeof rootRoute
     }
+    '/home/infoCard': {
+      id: '/home/infoCard'
+      path: '/home/infoCard'
+      fullPath: '/home/infoCard'
+      preLoaderRoute: typeof HomeInfoCardImport
+      parentRoute: typeof rootRoute
+    }
     '/events/': {
       id: '/events/'
       path: '/events'
@@ -75,47 +114,85 @@ declare module '@tanstack/react-router' {
 
 // Create and export the route tree
 
-interface FileRoutesByFullPath {
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
   '/login': typeof LoginRoute
+  '/logout': typeof LogoutRoute
   '/events/$eventId': typeof EventsEventIdRoute
   '/events/create': typeof EventsCreateRoute
+  '/home/infoCard': typeof HomeInfoCardRoute
   '/events': typeof EventsIndexRoute
 }
 
-interface FileRoutesByTo {
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
   '/login': typeof LoginRoute
+  '/logout': typeof LogoutRoute
   '/events/$eventId': typeof EventsEventIdRoute
   '/events/create': typeof EventsCreateRoute
+  '/home/infoCard': typeof HomeInfoCardRoute
   '/events': typeof EventsIndexRoute
 }
 
-interface FileRoutesById {
+export interface FileRoutesById {
+  __root__: typeof rootRoute
+  '/': typeof IndexRoute
   '/login': typeof LoginRoute
+  '/logout': typeof LogoutRoute
   '/events/$eventId': typeof EventsEventIdRoute
   '/events/create': typeof EventsCreateRoute
+  '/home/infoCard': typeof HomeInfoCardRoute
   '/events/': typeof EventsIndexRoute
 }
 
-interface FileRouteTypes {
+export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/login' | '/events/$eventId' | '/events/create' | '/events'
+  fullPaths:
+    | '/'
+    | '/login'
+    | '/logout'
+    | '/events/$eventId'
+    | '/events/create'
+    | '/home/infoCard'
+    | '/events'
   fileRoutesByTo: FileRoutesByTo
-  to: '/login' | '/events/$eventId' | '/events/create' | '/events'
-  id: '/login' | '/events/$eventId' | '/events/create' | '/events/'
+  to:
+    | '/'
+    | '/login'
+    | '/logout'
+    | '/events/$eventId'
+    | '/events/create'
+    | '/home/infoCard'
+    | '/events'
+  id:
+    | '__root__'
+    | '/'
+    | '/login'
+    | '/logout'
+    | '/events/$eventId'
+    | '/events/create'
+    | '/home/infoCard'
+    | '/events/'
   fileRoutesById: FileRoutesById
 }
 
-interface RootRouteChildren {
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
   LoginRoute: typeof LoginRoute
+  LogoutRoute: typeof LogoutRoute
   EventsEventIdRoute: typeof EventsEventIdRoute
   EventsCreateRoute: typeof EventsCreateRoute
+  HomeInfoCardRoute: typeof HomeInfoCardRoute
   EventsIndexRoute: typeof EventsIndexRoute
 }
 
 const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
   LoginRoute: LoginRoute,
+  LogoutRoute: LogoutRoute,
   EventsEventIdRoute: EventsEventIdRoute,
   EventsCreateRoute: EventsCreateRoute,
+  HomeInfoCardRoute: HomeInfoCardRoute,
   EventsIndexRoute: EventsIndexRoute,
 }
 
@@ -131,21 +208,33 @@ export const routeTree = rootRoute
     "__root__": {
       "filePath": "__root.tsx",
       "children": [
+        "/",
         "/login",
+        "/logout",
         "/events/$eventId",
         "/events/create",
+        "/home/infoCard",
         "/events/"
       ]
     },
+    "/": {
+      "filePath": "index.tsx"
+    },
     "/login": {
       "filePath": "login.tsx"
     },
+    "/logout": {
+      "filePath": "logout.tsx"
+    },
     "/events/$eventId": {
       "filePath": "events/$eventId.tsx"
     },
     "/events/create": {
       "filePath": "events/create.tsx"
     },
+    "/home/infoCard": {
+      "filePath": "home/infoCard.tsx"
+    },
     "/events/": {
       "filePath": "events/index.tsx"
     }

src/routes/__root.tsx

@@ -1,18 +1,24 @@
-import { createRootRoute, Link, Outlet } from '@tanstack/react-router'
-
+import { createRootRoute, Outlet } from '@tanstack/react-router'
+import { HStack } from '../components'
+import { DrawerSideBar } from '../components/DrawerSideBar'
 export const Route = createRootRoute({
-  component: () => (
+
+  component: RootComponent,
+})
+
+function RootComponent() {
+  return (
     <>
-      <div className="p-2 flex gap-2">
-        <div>
-          <span>NCU App</span>
-        </div>
-        <Link to="/events" className="[&.active]:font-bold">
-          Events
-        </Link>
+      <div className="p-2 gap-2 justify-start">
+        <HStack className='bg-rose-300 items-center'>
+          <DrawerSideBar />
+          <div className='flex flex-1 justify-center'>
+            <span className=''>NCU App</span>
+          </div>
+        </HStack>
       </div>
-      <hr />
+
       <Outlet />
-    </>
-  ),
-})
+    </ >
+  )
+}

src/routes/events/create.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { ChangeEvent, FormEvent, useEffect, useState } from 'react';
-import { Button } from '../../components/Button';
+import { Button } from '../../components/Common/customButton';
 import { UserController } from '../../controllers/user';
 import { AuthGuard } from '../../utils/auth';
 import { supabase } from '../../utils/supabase';

src/routes/home/infoCard.tsx

@@ -0,0 +1,5 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/home/infoCard')({
+  component: () => <div>Hello /home/infoCard!</div>
+})

src/routes/index.tsx

@@ -0,0 +1,35 @@
+import { createFileRoute, Link } from '@tanstack/react-router';
+import { AuthGuard } from '../utils/auth';
+import { supabase } from '../utils/supabase';
+
+const styles = {
+    container: {
+        flex: 1,
+        backgroundColor: '#ffffff',
+    },
+};
+
+export const Route = createFileRoute('/')({
+    beforeLoad: AuthGuard,
+    loader: async () => {
+        const { data, error } = await supabase
+            .from('user')
+            .select()
+
+        if (error !== null) {
+            throw error
+        }
+
+        return { user: data }
+    },
+    component: HomeIndex
+})
+
+function HomeIndex() {
+    return (
+        <div style={styles.container}>
+            <h1>Home</h1>
+            <Link to="/home/infoCard">Go to /home/infoCard</Link>
+        </div>
+    )
+}