Joururi/leim-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added sidebar to left side of calendar view

Browse Source
This commit is contained in:
Alexis
2024-04-29 21:09:46 +02:00
parent ffaf54bccd
commit 5adc7db425
16 changed files with 242 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/components/calendar/CalendarMenu.vue
View File

@@ -1,60 +1,43 @@
<script lang="ts" setup>
import { getRelativeString } from '@/models/Date'
import { useCalendar } from '@/stores/CalendarStore'
import { storeToRefs } from 'pinia'
import { computed } from 'vue'
import { PhMapPin } from '@phosphor-icons/vue'
import CalendarMenuNav from './CalendarMenuNav.vue'
import CalendarMenuToday from './CalendarMenuToday.vue'
import CalendarSwitch from './CalendarSwitch.vue'
import CalendarCurrentDate from './CalendarCurrentDate.vue'
import CalendarSearch from './search/CalendarSearch.vue'
const { defaultDate, getFormattedDateTitle, currentDate } = useCalendar()
const { selectedDate } = storeToRefs(useCalendar())
const mainDateTitle = computed(() => getFormattedDateTitle(selectedDate.value, true))
const dateDifference = computed(() => getRelativeString(defaultDate, selectedDate.value))
const { currentDate } = useCalendar()
</script>
<template>
<header class="border-slate-700 border-b-[1px]">
<div class="pt-4 container">
<div class="grid md:grid-cols-12 items-center">
<div class="md:col-span-9">
<div class="flex items-center gap-6">
<menu class="flex items-center gap-2">
<li>
<CalendarSwitch />
</li>
<li>
<CalendarMenuToday />
</li>
<li>
<CalendarMenuNav />
</li>
</menu>
<div>
<h1 class="text-2xl font-bold flex items-center gap-1">
<PhMapPin size="26" weight="bold" /> {{ mainDateTitle }}
</h1>
<h2 class="text-lg italic opacity-75">
{{ dateDifference }}
</h2>
</div>
</div>
</div>
<div class="md:col-span-3 flex justify-end">
<header class="pt-4 border-slate-700 border-b-[1px]">
<div class="px-6 flex justify-between">
<menu class="flex items-center gap-2">
<li class="flex items-center">
<CalendarMenuToday />
</li>
<li>
<CalendarMenuNav />
</li>
<li class="ml-6">
<CalendarCurrentDate />
</li>
</menu>
<menu class="flex items-center gap-2">
<li>
<CalendarSearch />
</div>
</div>
</li>
<li>
<CalendarSwitch />
</li>
</menu>
</div>
<div class="container">
<div class="flex">
<div class="px-4 py-2 border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm">
<span class="text-sm">{{ currentDate.currentDateTitle }}</span>
</div>
<div class="ml-12 flex">
<div class="px-4 py-2 border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm">
<span class="text-sm">{{ currentDate.currentDateTitle }}</span>
</div>
</div>
</header>