<template>
  <div id="content">
    <!-- Header and hamburger navigation -->
    <NavigationHeader class="header" />

    <div class="navigation-icons-gutter desktop-only">
      <NavigationIcons />
    </div>

    <!-- Display the component assigned to the given route (default: home) -->
    <router-view :key="router.currentRoute.value.path" class="content" />

    <!-- Popup that will show above existing rendered content -->
    <popup />

    <darkmode-toggle />

    <!-- Command Palette -->
    <command-palette />
  </div>
</template>

<script setup lang="ts">
  import { useRouter } from "vue-router";
  import NavigationHeader from "@/components/header/NavigationHeader.vue";
  import NavigationIcons from "@/components/header/NavigationIcons.vue";
  import Popup from "@/components/Popup.vue";
  import DarkmodeToggle from "@/components/ui/DarkmodeToggle.vue";
  import CommandPalette from "@/components/ui/CommandPalette.vue";

  const router = useRouter();
</script>

<style lang="scss">
  @import "scss/main";
  @import "scss/media-queries";

  #content {
    display: grid;
    grid-template-rows: var(--header-size);
    grid-template-columns: var(--header-size) 100%;

    @include mobile {
      grid-template-columns: 1fr;
    }

    .header {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 15;
    }

    .navigation-icons-gutter {
      position: fixed;
      height: 100vh;
      margin: 0;
      top: var(--header-size);
      width: var(--header-size);
      background-color: var(--background-color-secondary);
    }

    .content {
      display: grid;
      grid-column: 2 / 3;
      width: calc(100% - var(--header-size));
      grid-row: 2;

      @include mobile {
        grid-column: 1 / 3;
        width: 100%;
      }
    }
  }
</style>
