initial layout component but in sidebar only

compass/components/RootLayout.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import Sidebar from "@/components/Sidebar/Sidebar";
+import React, { useState, useEffect } from "react";
+import { createClient } from "@/utils/supabase/client";
+import { useRouter } from "next/navigation";
+import User, { Role } from "@/utils/models/User";
+import Loading from "@/components/auth/Loading";
+
+export default function RootLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+    const [user, setUser] = useState<User | null>(null); // Initialize user as null
+    const router = useRouter();
+
+    useEffect(() => {
+        async function getUser() {
+            const supabase = createClient();
+
+            const { data, error } = await supabase.auth.getUser();
+
+            if (error || !data?.user) {
+                console.log("User not logged in or error fetching user");
+                router.push("/auth/login");
+                return;
+            }
+
+            const userData = await fetch(
+                `${process.env.NEXT_PUBLIC_HOST}/api/user?uuid=${data.user.id}`
+            );
+
+            const user: User = await userData.json();
+            setUser(user);  // Set user data after fetching
+        }
+
+        getUser();
+    }, [router]);
+
+    if (!user) {
+        return <Loading />; // Show loading screen while the user is being fetched
+    }
+
+    return (
+        <div className="flex">
+            {/* Sidebar is shared across all pages */}
+            <Sidebar
+                setIsSidebarOpen={setIsSidebarOpen}
+                isSidebarOpen={isSidebarOpen}
+                name={user.username}
+                email={user.email}
+                isAdmin={user.role === Role.ADMIN}
+            />
+
+            {/* Page content */}
+            <div
+                className={`flex-1 transition duration-300 ease-in-out ${
+                    isSidebarOpen ? "ml-64" : "ml-0"
+                }`}
+            >
+                {children} {/* Render page-specific content here */}
+            </div>
+        </div>
+    );
+}

compass/components/auth/LoggingOut.tsx

@@ -0,0 +1,22 @@
+// components/LoggingOut.js
+import styles from "./Loading.module.css";
+import Image from "next/image";
+
+const LoggingOut = () => {
+    return (
+        <div className={styles.loadingOverlay}>
+            <div className={styles.loadingContent}>
+                <Image
+                    src="/logo.png"
+                    alt="Compass Center logo."
+                    width={100}
+                    height={91}
+                />
+                <h1 className={styles.loadingTitle}>Signing out...</h1>
+                <div className={styles.loadingSpinner}></div>
+            </div>
+        </div>
+    );
+};
+
+export default LoggingOut;

compass/components/resource/UserProfile.tsx

@@ -1,28 +1,48 @@
+import { useState } from "react";
 import { signOut } from "@/app/auth/actions";
+import LoggingOut from "../auth/LoggingOut";
 
 interface UserProfileProps {
     name: string;
     email: string;
 }
 
-const handleClick = async (event: React.MouseEvent<HTMLButtonElement>) => {
+const handleClick = async (
+    event: React.MouseEvent<HTMLButtonElement>,
+    setLoading: React.Dispatch<React.SetStateAction<boolean>>
+) => {
+    setLoading(true);  // Set loading state to true
+
+    // Call signOut and wait for the process to complete before redirecting
     await signOut();
+
+    // Once signOut is complete, the redirect should happen, but let's delay it to allow the loading state to be visible for a short time
+    setTimeout(() => {
+        // The signOut already handles the redirect, so we don't need to redirect here again.
+        setLoading(false);  // Reset the loading state after the timeout (just in case)
+    }, 1000);  // You can adjust this delay as needed
 };
 
 export const UserProfile = ({ name, email }: UserProfileProps) => {
+    const [loading, setLoading] = useState(false);
+
+    if (loading) {
+        // Show the "Logging out" screen while the sign-out process is in progress
+        return <LoggingOut />;
+    }
+
     return (
         <div className="flex flex-col items-start space-y-2">
             <div className="flex flex-col">
-                <span className="text-sm font-semibold text-gray-800">
+                <span className="text-sm font-semibold text-gray-800">{name}</span>
-                    {name}
-                </span>
                 <span className="text-xs text-gray-500">{email}</span>
             </div>
             <button
-                onClick={handleClick}
+                onClick={(event) => handleClick(event, setLoading)}
                 className="text-red-600 font-semibold text-xs hover:underline mt-1"
+                disabled={loading} // Disable button while loading
             >
-                Sign out
+                 {loading ? "Signing out..." : "Sign out"} {/* Show appropriate text */}
             </button>
         </div>
     );