<template>
  <div class="navbar">
    <div class="navbar-start">
      <div v-if="false" class="dropdown">
        <button class="btn btn-ghost btn-circle" @click="toggleDrawer">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" /> </svg>
        </button>
      </div>
    </div>

    <div class="navbar-center">
      <RouterLink :to="{name: 'home'}" class="font-medium text-xl flex items-center">
        <div class="mr-2">
          <div v-if="settings.app_icon" class="max-h-10">
            <img :src="settings.app_icon" class="max-h-10" :alt="settings.app_name"/>
          </div>
        </div>

        {{ settings.app_name }}
      </RouterLink>
    </div>

    <div class="navbar-end">
    </div>
  </div>
</template>

<script setup>
import {useSettingsStore} from "@/stores/SettingsStore.js";

const settings = useSettingsStore();
const emits = defineEmits(['drawer']);

function toggleDrawer() {
  emits('drawer');
}
</script>
