initialize each function page

src/components/DrawerOption.tsx

@@ -1,13 +1,14 @@
 import { Link } from "@tanstack/react-router";
 import { useState } from "react";
-import { CalendarIcon, HStack, SidebarArrowDownIcon, SidebarArrowRightIcon, VStack } from "../components";
+import { HStack, SidebarArrowDownIcon, SidebarArrowRightIcon, 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 },
+    { name: "首頁", engName: "Home", pageNav: "/" },
+    { name: "活動/揪人", engName: "Events", pageNav: "/events" },
+    { name: "拍賣", engName: "Market", pageNav: "/sales" },
+    { name: "行事曆", engName: "Calendar", pageNav: "/calendar" },
+    { name: "地圖", engName: "Map", pageNav: "/map" },
+    { name: "今晚吃什麼", engName: "Dinner Decider", pageNav: "/dinner" },
 ];
 
 export const DrawerOption = () => {
@@ -36,7 +37,7 @@ export const DrawerOption = () => {
                     <Link to={option.pageNav}>
                         <li className="bg-white">
                             <VStack className="justify-start">
-                                <a className="bg-green-100">{option.name}({option.engName})</a>
+                                <p className="bg-green-100">{option.name}({option.engName})</p>
                             </VStack>
                         </li>
                     </Link>

src/components/DrawerSideBar.tsx

@@ -1,38 +1,51 @@
 import { Image, VStack } from "../components";
+import { supabase } from "../utils/supabase";
 import { DrawerOption } from "./DrawerOption";
 
-const UserInfo = {
-    name: "NCU APP",
-    avatar: "src/assets/logo.png"
+
+const signOut = async () => {
+    await supabase.auth.signOut().then(() => {
+        window.location.href = '/';
+    });
 };
 
-export const DrawerSideBar = () => {
+export const DrawerSideBar = ({ name, avatar }: { name: string, avatar: string }) => {
     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>
+                    <Image src={avatar} children={undefined} className='w-10 rounded-full'></Image>
                 </label>
             </div>
 
             {/* Indise Drawer */}
-            <div className="drawer-side">
+            <div className="drawer-side grid content-between">
                 <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">
+                <ul className="menu bg-base-200 text-base-content h-screen w-80 p-4 grid">
                     {/* 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>
+                    <VStack className="h-full self-start">
+                        <Image src={avatar} children={undefined} className='mb-2 w-10 rounded-full'></Image>
+                        <p className="font-bold">{name}</p>
+                        <p className="text-xs">View Profile</p>
+
 
-                    <div className="divider divider-neutral" />
+                        <div className="divider divider-neutral" />
+
+                        <DrawerOption />
+
+
+                    </VStack>
 
-                    <DrawerOption />
+                    <div className="self-end mb-5">
+                        <div className="divider divider-neutral" />
+                        <p className="text-left text-lg">Settings</p>
+                        <p className="text-left text-lg">About Us</p>
+                        <p className="text-left text-lg" onClick={signOut}>Sign Out</p>
+                    </div>
                 </ul>
             </div>
         </div>

src/components/Header.tsx

@@ -0,0 +1,61 @@
+import { HStack } from "../components";
+import { supabase } from "../utils/supabase";
+import { DrawerSideBar } from "./DrawerSideBar";
+
+
+
+import React, { useEffect, useState } from 'react';
+
+export const Header: React.FC = () => {
+
+    const [userName, setUserName] = useState<string>('');
+    const [userAvatar, setUserAvatar] = useState<string>('');
+    const [error, setError] = useState<unknown>('');
+
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                const userId = (await supabase.auth.getUser()).data?.user?.id;
+                if (!userId) {
+                    throw new Error('User ID is undefined');
+                }
+                const { data } = await supabase
+                    .from('members')
+                    .select(`*, identities ( identity_no, identity_name )`)
+                    .eq('uuid', userId);
+
+                if (data && data.length > 0) {
+                    setUserName(data[0].name);
+                    setUserAvatar(data[0].avatar);
+                } else {
+                    throw new Error('User data not found');
+                }
+            } catch (error: unknown) {
+                if (error instanceof Error) {
+                    setError(error.message);
+                } else {
+                    setError(String(error));
+                }
+            }
+        };
+        fetchData();
+    }, []);
+
+    if (!userName || !userAvatar) {
+        return <div>Loading...</div>;
+    }
+    if (error) {
+        console.log('error', error);
+    }
+
+    return (
+        <div className="p-2 gap-2 justify-start">
+            <HStack className='items-center'>
+                <DrawerSideBar name={userName} avatar={userAvatar} />
+                <div className='flex flex-1 justify-center'>
+                    <span className='mr-10'>NCU App</span>
+                </div>
+            </HStack>
+        </div>
+    );
+};

src/components/icons/SidebarArrowDownIcon.tsx

@@ -5,7 +5,7 @@ import { BasicIcon } from './BasicIcon';
 
 export const SidebarArrowDownIcon: React.FC<IconProps> = ({ fill, stroke, size }) => (
     <BasicIcon fill={fill} stroke={stroke} size={size}>
-        <path fill-rule="evenodd" d="M18.425 10.271C19.499 8.967 18.57 7 16.88 7H7.12c-1.69 0-2.618 1.967-1.544 3.271l4.881 5.927a2 2 0 0 0 3.088 0l4.88-5.927Z" clip-rule="evenodd" />
+        <path fillRule="evenodd" d="M18.425 10.271C19.499 8.967 18.57 7 16.88 7H7.12c-1.69 0-2.618 1.967-1.544 3.271l4.881 5.927a2 2 0 0 0 3.088 0l4.88-5.927Z" clipRule="evenodd" />
     </BasicIcon>
 );
 

src/components/icons/SidebarArrowRightIcon.tsx

@@ -5,7 +5,7 @@ import { BasicIcon } from './BasicIcon';
 
 export const SidebarArrowRightIcon: React.FC<IconProps> = ({ fill, stroke, size }) => (
     <BasicIcon fill={fill} stroke={stroke} size={size}>
-        <path fill-rule="evenodd" d="M10.271 5.575C8.967 4.501 7 5.43 7 7.12v9.762c0 1.69 1.967 2.618 3.271 1.544l5.927-4.881a2 2 0 0 0 0-3.088l-5.927-4.88Z" clip-rule="evenodd" />
+        <path fillRule="evenodd" d="M10.271 5.575C8.967 4.501 7 5.43 7 7.12v9.762c0 1.69 1.967 2.618 3.271 1.544l5.927-4.881a2 2 0 0 0 0-3.088l-5.927-4.88Z" clipRule="evenodd" />
     </BasicIcon>
 );
 

src/components/index.ts

@@ -4,6 +4,7 @@ export { Button } from './Common/customButton';
 export { HStack } from './Common/HStack';
 export { Image } from './Common/Image';
 export { VStack } from './Common/VStack';
+export { Header } from './Header';
 // Icons
 export { CalendarIcon } from './icons/CalendarIcon';
 export { LogoutIcon } from './icons/LogoutIcon';