added calendar and rough structure of calendar

web/components/ui/Sidebar.vue

@@ -5,6 +5,10 @@ import Title1 from './Title1.vue';
 
 const selectedDate = shallowRef(new CalendarDate(2024, 6, 29));
 
+const dropDownItems = ref<DropDownMenuItems>([
+	{label: "Profile", icon: "i-lucide-user"}
+])
+
 defineProps<{
 	todos: string[]
 }>()
@@ -12,20 +16,39 @@ defineProps<{
 </script>
 
 <template>
-	<UCard class="w-64 h-full">
-		<template #header class="flex flex-col gap-2">
-			<Title1>Calendar</Title1>
-			<UCalendar v-model="selectedDate" />
-		</template>
-		<template #default class="flex-col gap-2">
-			<Title1>Todos</Title1>
-			<div class="flex gap-2 flex-col">
-				<ListItem v-for="todo in todos">{{ todo }}</ListItem>
+	<UCard class="flex w-64 h-full">
+		<div class="flex flex-col h-full w-full">
+			<header>
+				<Title1>Calendar</Title1>
+				<UCalendar v-model="selectedDate" />
+			</header>
+			<div class="flex flex-col grow justify-between">
+				<div>
+					<Title1>Todos</Title1>
+					<div class="flex gap-2 flex-col">
+						<ListItem v-for="todo in todos">{{ todo }}</ListItem>
+					</div>
+				</div>
+				<div class="flex">
+					<UButton class="w-full flex justify-center">
+						+
+					</UButton>
+				</div>
 			</div>
-			<UButton class="flex w-full justify-center ga">
-				+
-			</UButton>
-		</template>
+			<footer class="pt-4">
+				<UDropdownMenu
+					:items="dropDownItems"
+					:ui="{
+						content: 'w-full'
+					}"
+				>
+					<UButton class="flex gap-1 items-center">
+						<UAvatar src="https://github.com/benjamincanac.png" />
+						Sebastian Peinbauer
+					</Ubutton>
+				</UDropdownMenu>
+			</footer>
+		</div>
 	</UCard>
 </template>