<script setup lang="ts">
import { OnClickOutside } from '@vueuse/components'
</script>
<template>
  <OnClickOutside>
    <UIDropdown class="search-active-hide">
      <template #activator>
        <UIButton :dropdown="true" size="sm" variant="outline" class="topbar-button text-white">
          <i class="fa-fw fa-solid fa-user-gear" />
        </UIButton>
      </template>
      <template #items>
        <NotesSourceSwitcher />
        <AccountSettings />
        <SignOut />
      </template>
    </UIDropdown>
  </OnClickOutside>
</template>
<style scoped lang="scss">
.topbar-button {
  &:focus-within {
    @apply border-white bg-white text-primary;
  }
  @apply hover:border-white hover:bg-white hover:text-primary focus-visible:outline-white;
}
</style>
