<script setup>
import { useUi } from '@/stores/useUi'
const ui = useUi()
</script>

<template>
  <!-- barra superior fija -->
  <header class="fixed top-0 left-0 right-0 h-14 flex items-center justify-between px-4 md:px-6 z-50 shadow-sm"
          :style="{ backgroundColor: 'var(--background-color)', borderBottom: '1px solid var(--secondary-color)' }">
    <!-- título -->
    <h1 class="text-lg font-semibold tracking-wide select-none" :style="{ color: 'var(--primary-color)' }">Núcleo</h1>

    <!-- botón hamburguesa (visible solo en mobile) -->
    <button
      @click="ui.toggleSidebar"
      class="hamburger-button inline-flex items-center justify-center h-9 w-9 rounded-md text-white transition">
      &#9776;
    </button>
  </header>
</template>

<style scoped>
.hamburger-button {
  background-color: var(--primary-color);
}
.hamburger-button:hover {
  filter: brightness(1.1); /* Slight lighten/darken based on primary color */
}
/* Alternative hover if primary is very light or very dark, requiring specific color adjustment */
/* .hamburger-button:hover { background-color: var(--primary-color-hover); } */
/* Ensure --primary-color-hover is defined or calculated based on --primary-color if this approach is used */
</style>
