Added /users/me route, and handling auth in frontend

frontend/components/app-sidebar.tsx

@@ -10,6 +10,7 @@ import {
 	GalleryVerticalEnd,
 	Settings2,
 	Calendar,
+	Loader2,
 } from "lucide-react";
 
 import { NavMain } from "@/components/nav-main";
@@ -23,6 +24,8 @@ import {
 	SidebarHeader,
 	SidebarRail,
 } from "@/components/ui/sidebar";
+import useMe from "@/hooks/use-me";
+import { useEffect } from "react";
 
 // This is sample data.
 const data = {
@@ -93,6 +96,8 @@ const data = {
 };
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+	const { user, isLoading, success, error } = useMe();
+
 	return (
 		<Sidebar collapsible="icon" {...props}>
 			<SidebarHeader>
@@ -102,7 +107,11 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
 				<NavMain items={data.navMain} />
 			</SidebarContent>
 			<SidebarFooter>
-				<NavUser user={data.user} />
+				{isLoading ? (
+					<Loader2 className="flex w-full min-w-0 flex-col gap-1 justify-center animate-spin" />
+				) : (
+					<NavUser user={user!} />
+				)}
 			</SidebarFooter>
 			<SidebarRail />
 		</Sidebar>