Newer
Older
<template>
<div
class="tw-shadow-inner tw-bg-gray-100 tw-border-solid tw-border-gray-200 tw-border-0 tw-border-r"
>
<div class="tw-sticky tw-top-0 tw-flex tw-flex-col tw-h-screen tw-pb-3">
<header
class="sidebar-item tw-gap-6 tw-rounded-none tw-bg-gray-700 tw-text-white tw-flex-none"
>
<LogoHeader />
<AUserPreview
v-if="authStore.steeringUser"
:user="authStore.steeringUser"
class="tw-bg-gray-800 tw-text-gray-200"
>
<button
type="button"
class="btn btn-default tw-p-0 tw-w-10 tw-h-10 tw-rounded-full tw-flex-none"
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
@click="logoutRedirect"
>
<icon-system-uicons-exit-right />
</button>
</AUserPreview>
<button
v-else
type="button"
class="btn btn-default tw-bg-white tw-flex tw-gap-2 tw-items-center tw-ml-auto"
@click="loginRedirect"
>
<icon-system-uicons-enter />
{{ t('auth.signIn') }}
</button>
</header>
<div class="tw-flex tw-flex-col tw-gap-6 tw-px-3 tw-flex-1">
<AMainNavMenu v-if="authStore.steeringUser" />
<div class="sidebar-item tw-p-0 tw-mt-auto">
<ShowSelector
class="tw-w-full tw-rounded"
input-class="tw-border-0 tw-w-full tw-pt-8 tw-pb-3 tw-px-3 tw-bg-transparent tw-rounded"
label-class="tw-text-sm tw-absolute tw-left-3 tw-top-3 tw-font-semibold"
drawer-class="tw-text-gray-900 md:tw-left-0 tw-bottom-full !tw-top-auto tw-mb-3"
keyboard-shortcut-class="tw-bg-gray-100 tw-text-gray-500 tw-inset-y-center tw-h-min tw-right-3"
/>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import LogoHeader from '../../../public/assets/logo-header.svg?component'
import { useAuthStore } from '@/stores/auth'
import ShowSelector from '@/components/shows/ShowSelector.vue'
import AUserPreview from '@/components/generic/AUserPreview.vue'
import { useI18n } from '@/i18n'
import { loginRedirect, logoutRedirect } from '@/oidc'
import AMainNavMenu from '@/components/nav/AMainNavMenu.vue'
const { t } = useI18n()
const authStore = useAuthStore()
</script>
<style>
.sidebar-item {
@apply tw-flex tw-gap-2 tw-items-center tw-shadow tw-p-3 tw-rounded tw-bg-white tw-text-inherit;
}
</style>