<script setup lang="ts">
import { addNote, setActiveNote, rootNote } from '@/composables/useNotes'
const props = defineProps<{
  sideBarCollapsed: boolean
}>()

const emit = defineEmits<{
  toggleSideBar: []
}>()
</script>
<template>
  <div class="fixed left-0 right-0 top-0 z-[500] flex h-[50px] bg-primary">
    <div class="mx-auto flex w-full max-w-app items-center py-2.5 text-white">
      <div
        class="flex items-center pl-3"
        :class="sideBarCollapsed ? 'w-fit' : 'w-sidebar pr-3'"
      >
        <Hamburger
          :side-bar-collapsed="props.sideBarCollapsed"
          @toggle-side-bar="emit('toggleSideBar')"
        />
        <Logo
          class="ml-auto pl-5 text-2xl hover:drop-shadow"
          id="logo"
          @click="setActiveNote(rootNote?.id)"
        />
      </div>
      <div class="flex h-full flex-grow flex-row items-center gap-2 pl-5 pr-3">
        <SearchBar />
        <button
          class="btn-outline btn-sm btn py-1 text-white"
          @click="addNote('Untitled new note', '', true)"
        >
          <i class="fas fa-plus-circle text-[1.1rem]" />
        </button>
        <button class="btn-outline btn-sm btn py-1 text-white">Sign in</button>
      </div>
    </div>
  </div>
</template>
<style lang="css">
#logo {
  @apply cursor-pointer transition-all duration-200 hover:text-primary;
}
#logo:hover {
  text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white;
}
.btn-outline {
  @apply hover:border-white hover:bg-white hover:text-primary focus-visible:outline-white;
}
</style>
