<script lang="ts">
  import '../app.css';
  import Sidebar from '$lib/components/Sidebar.svelte';
  import SearchBar from '$lib/components/SearchBar.svelte';

  let sidebarOpen = false;
</script>

<svelte:head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="icon" href="/favicon.png" />
</svelte:head>

<header class="site-header">
  <div style="display:flex;align-items:center;gap:0.75rem;">
    <button class="hamburger" on:click={() => (sidebarOpen = !sidebarOpen)} aria-label="Toggle menu">
      ☰
    </button>
    <a href="/" class="site-logo">
      <span>How Do You</span><span class="logo-accent">Convert</span><span style="opacity:0.4;font-weight:400">.com</span>
    </a>
  </div>
  <div class="header-right">
    <SearchBar />
  </div>
</header>

<div class="site-body">
  <Sidebar bind:open={sidebarOpen} />
  <main class="main-content">
    <slot />
  </main>
</div>

<footer class="site-footer">
  © {new Date().getFullYear()} HowDoYouConvert.com — Free unit conversion calculators. All rights reserved.
</footer>
