<script setup lang="ts">
import { onMounted, ref } from "vue";
</script>

<template>
  <article class="main-page">
    <aside class="aside">
      <section class="logo"></section>
      <ul class="menu">
        <router-link custom to="/" v-slot="{ navigate, isExactActive }">
          <li
            class="item dashboard"
            :class="{ 'exact-active': isExactActive }"
          >
            <iconfont class="icon dsk-dashboard-one" />
          </li>
        </router-link>
        <router-link custom to="/projects" v-slot="{ navigate, isExactActive }">
          <li
            class="item projects"
            @click="navigate"
            :class="{ 'exact-active': isExactActive }"
          >
            <iconfont class="icon dsk-city-one" />
          </li>
        </router-link>
        <router-link custom to="/ration" v-slot="{ navigate, isExactActive }">
          <li
            class="item ration"
            :class="{ 'exact-active': isExactActive }"
          >
            <iconfont class="icon dsk-data" />
          </li>
        </router-link>
        <li class="item message">
          <iconfont class="icon dsk-remind" />
        </li>
      </ul>
      <ul class="tools">
        <li class="item help">
          <iconfont class="icon dsk-help" />
        </li>
        <li class="item avatar">
          <iconfont class="icon dsk-me" />
        </li>
      </ul>
    </aside>
    <main class="main">
      <router-view></router-view>
    </main>
  </article>
</template>

<style lang="scss" src="./style.scss" scoped></style>
