<script setup lang="ts">
const menuItems = [
  { label: 'Dashboard', to: '/', icon: 'dashboard' },
  { label: 'Players', to: '/players', icon: 'groups' },
  { label: 'Graphics', to: '/graphics', icon: 'collections' },
  { label: 'Settings', to: '/settings', icon: 'settings' },
  { label: 'About', to: '/about', icon: 'info' },
];

const logoUrl = new URL('./image.png', import.meta.url).href;
</script>

<template>
  <QLayout view="lHh LpR fFf">
    <QDrawer
      show-if-above
      side="left"
      bordered
      :width="220"
      class="sidebar-drawer"
    >
      <div class="sidebar-header q-pa-md">
        <div class="row items-center no-wrap">
          <img
            :src="logoUrl"
            alt="Logo"
            class="sidebar-logo"
          >
          <div class="q-ml-sm">
            <div class="text-subtitle1 text-weight-bold">
              Control Panel
            </div>
            <div class="text-caption">
              <span class="by-label">by</span> <a
                class="by-link"
                href="https://github.com/Pandipipas"
                target="_blank"
                rel="noopener"
              >Pandipipas</a>
            </div>
          </div>
        </div>
      </div>
      <QSeparator class="q-mb-sm" />
      <QList>
        <QItem
          v-for="item in menuItems"
          :key="item.to"
          clickable
          :to="item.to"
          exact
          active-class="sidebar-item-active"
        >
          <QItemSection avatar>
            <QIcon :name="item.icon" />
          </QItemSection>
          <QItemSection>
            <QItemLabel>{{ item.label }}</QItemLabel>
          </QItemSection>
        </QItem>
      </QList>
    </QDrawer>

    <QPageContainer>
      <RouterView />
    </QPageContainer>
  </QLayout>
</template>

<style scoped>
.sidebar-header {
  min-height: 72px;
}

.sidebar-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.by-label {
  font-size: 0.75rem;
}

.by-link {
  font-size: 0.75rem;
  color: #f50a64;
  text-decoration: none;
}

.by-link:hover {
  text-decoration: underline;
}

</style>
