ANavSidebar.vue

<template>
  <div
    class="tw-shadow-inner tw-bg-gray-100 tw-border-solid tw-border-gray-200 tw-border-0 tw-border-r tw-relative tw-z-10"
  >
    <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"
          test-id="username"
          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"
            data-testid="menu-logout"
            @click="logoutRedirect"
          >
            <icon-system-uicons-exit-right />
          </button>
        </AUserPreview>
      </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 { logoutRedirect } from '@/oidc'
import AMainNavMenu from '@/components/nav/AMainNavMenu.vue'

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>