<template>
  <q-layout view="LHh lpR fFf">
    <q-drawer
      v-model="leftDrawerOpen"
      bordered
      :width="270"
      :mini="miniState"
      show-if-above
    >
      <div
        :class="$q.dark.isActive ? 'drawer_dark' : 'drawer_normal'"
        class="full-height q-px-sm"
      >
        <q-toolbar class="q-px-md q-py-md">
          <q-avatar class="q-pt-xs">
            <img src="https://cdn.quasar.dev/img/boy-avatar.png" />
          </q-avatar>

          <q-toolbar-title class="q-pt-sm">Mohit Ransubhe</q-toolbar-title>
        </q-toolbar>
        <hr />
        <q-list class="q-mt-sm q-pt-xs q-gutter-sm">
          <q-item
            active-class="tab-active"
            to="/"
            exact
            class="navigation-item"
            clickable
            v-ripple
          >
            <q-item-section avatar>
              <q-icon name="dashboard" />
            </q-item-section>

            <q-item-section v-if="!miniState"> Dashboard </q-item-section>
          </q-item>

          <q-item
            active-class="tab-active"
            to="/analytics"
            class="navigation-item"
            clickable
            v-ripple
          >
            <q-item-section avatar>
              <q-icon name="insights" />
            </q-item-section>

            <q-item-section v-if="!miniState"> Analytics </q-item-section>
          </q-item>

          <q-item
            active-class="tab-active"
            to="/statistics"
            class="navigation-item"
            clickable
            v-ripple
          >
            <q-item-section avatar>
              <q-icon name="analytics" />
            </q-item-section>

            <q-item-section v-if="!miniState"> Statistics </q-item-section>
          </q-item>

          <q-item
            active-class="tab-active"
            to="/customer_management"
            class="navigation-item"
            clickable
            v-ripple
          >
            <q-item-section avatar>
              <q-icon name="manage_accounts" />
            </q-item-section>

            <q-item-section v-if="!miniState">
              Customer Management
            </q-item-section>
          </q-item>

          <q-item
            active-class="tab-active"
            to="/transactions"
            class="navigation-item"
            clickable
            v-ripple
          >
            <q-item-section avatar>
              <q-icon name="paid" />
            </q-item-section>

            <q-item-section v-if="!miniState"> Transactions </q-item-section>
          </q-item>

          <q-item
            active-class="tab-active"
            to="/sales_invoices"
            class="navigation-item"
            clickable
            v-ripple
          >
            <q-item-section avatar>
              <q-icon name="receipt" />
            </q-item-section>

            <q-item-section v-if="!miniState"> Sales Invoices </q-item-section>
          </q-item>

          <q-item
            active-class="tab-active"
            to="/my_profile"
            class="navigation-item"
            clickable
            v-ripple
          >
            <q-item-section avatar>
              <q-icon name="person_pin" />
            </q-item-section>

            <q-item-section v-if="!miniState"> My Profile </q-item-section>
          </q-item>
        </q-list>
      </div>
    </q-drawer>

    <q-page-container :class="$q.dark.isActive ? '' : 'bg-grey-1'">
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'MainLayout',

  setup() {
    return {
      leftDrawerOpen: ref(false),
      miniState: ref(false),
      search: ref(''),
    };
  },

  methods: {
    toggleLeftDrawer() {
      this.leftDrawerOpen = !this.leftDrawerOpen;
    },
  },
});
</script>

<style>
.custom-banner {
  position: fixed;
  background: linear-gradient(145deg, rgb(65, 66, 143) 10%, rgb(138, 149, 252));
}

.drawer_normal {
  background: #2e3d57;
  color: white;
}

.drawer_dark {
  background: linear-gradient(145deg, #2e3d57 15%, rgb(7, 18, 34) 70%);
  /* background: #2e3d57; */
  color: white;
}

.header_normal {
  background: white;
}

.header_dark {
  background: linear-gradient(145deg, #2e3d57 15%, rgb(7, 18, 34) 70%);
  /* background: black; */
}

.navigation-item {
  border-radius: 5px;
}

.tab-active {
  /* background: linear-gradient(to right, white, #a32e4b); */
  /* background: rgba(255, 255, 255, 0.05); */
  background: rgba(122, 146, 177, 0.986);
  /* box-shadow: 0 8px 32px 0 rgba(184, 186, 204, 0.37); */
  /* backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px); */
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.custom-border {
  border-radius: 5px;
}
</style>
