added calendar and implemented bridge between small and big calendar

web/components/ui/Sidebar.vue

@@ -2,13 +2,29 @@
 import { CalendarDate } from '@internationalized/date';
 import ListItem from './ListItem.vue';
 import Title1 from './Title1.vue';
+import type { DropdownMenuItem } from '@nuxt/ui';
+import type { Moment } from 'moment';
+import moment from 'moment';
 
-const selectedDate = shallowRef(new CalendarDate(2024, 6, 29));
-
-const dropDownItems = ref<DropDownMenuItems>([
-	{label: "Profile", icon: "i-lucide-user"}
+const dropDownItems = ref<DropdownMenuItem[]>([
+	{ label: "Profile", icon: "i-lucide-user" },
+	{ label: "Settings", icon: "i-lucide-settings" }
 ])
 
+const date = defineModel<Moment>('date', { required: true })
+
+const selectedDate = computed({
+	get() {
+		return new CalendarDate(date.value.year(), date.value.month() + 1, date.value.date())
+	},
+	set(value) {
+		if (value === undefined) {
+			return
+		}
+		date.value = moment(value.toString());
+	}
+})
+
 defineProps<{
 	todos: string[]
 }>()
@@ -17,35 +33,32 @@ defineProps<{
 
 <template>
 	<UCard class="flex w-64 h-full">
-		<div class="flex flex-col h-full w-full">
-			<header>
+		<div class="flex flex-col h-full w-full gap-5">
+			<header class="flex flex-col gap-2">
 				<Title1>Calendar</Title1>
 				<UCalendar v-model="selectedDate" />
 			</header>
 			<div class="flex flex-col grow justify-between">
-				<div>
+				<div class="flex flex-col gap-2">
 					<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 size="xl" class="w-full flex justify-center">
 						+
 					</UButton>
 				</div>
 			</div>
 			<footer class="pt-4">
-				<UDropdownMenu
-					:items="dropDownItems"
-					:ui="{
-						content: 'w-full'
-					}"
-				>
-					<UButton class="flex gap-1 items-center">
+				<UDropdownMenu :items="dropDownItems" size="xl" :ui="{
+					content: 'w-60'
+				}">
+					<UButton variant="ghost" class="flex gap-1 items-center w-full text-text">
 						<UAvatar src="https://github.com/benjamincanac.png" />
 						Sebastian Peinbauer
-					</Ubutton>
+					</UButton>
 				</UDropdownMenu>
 			</footer>
 		</div>