<template>
  <NavigationDrawer />

  <v-app-bar v-if="!isLargeScreen && ui.appbar.show" height="64" color="primary" scroll-behavior="hide" :order="2">
    <div class="max-md:px-5 md:px-12 flex flex-grow-1 items-center">
      <v-app-bar-nav-icon variant="text" @click.stop="ui.drawer.open = !ui.drawer.open" />

      <router-link :to="{ name: 'explore' }">
        <h2 class="ml-2 text-lg font-500">Solian</h2>
      </router-link>

      <v-spacer />
    </div>
  </v-app-bar>

  <v-main id="main">
    <router-view />
  </v-main>
</template>

<script setup lang="ts">
import { useUserinfo } from "@/stores/userinfo"
import { useWellKnown } from "@/stores/wellKnown"
import { useMediaQuery } from "@vueuse/core"
import { useUI } from "@/stores/ui"
import NavigationDrawer from "@/components/navigation/NavigationDrawer.vue"

const ui = useUI()

const isLargeScreen = useMediaQuery("(min-width: 768px)")

useUserinfo().readProfiles()
useWellKnown().readWellKnown()
</script>

