<template>
  <v-app>
    <div class="shell-container">

      <div class="shell-side">
        <side-bar></side-bar>
      </div>

      <div class="shell-view">
        <router-view></router-view>
      </div>

    </div>

  </v-app>
</template>

<script async setup>
import SideBar from "@/views/main/SideBar.vue";
</script>

<style scoped>
.shell-container {
  @apply flex flex-col lg:flex-row;
  @apply font-sans;
  @apply bg-hBackground text-hOnBackground;
  @apply min-h-screen h-full;
}

.shell-side {
  @apply border border-[#3d3d3d];
  @apply lg:max-h-screen;
  @apply lg:fixed;
  @apply border-b lg:border-b-0 lg:border-r;
  @apply flex-shrink-0;
}

.shell-view {
  @apply flex-grow;
  @apply flex justify-center items-center;
  @apply w-full;
  @apply lg:ml-64;
}
</style>
