Implement header component

src/components/Button.astro

@@ -0,0 +1,12 @@
+---
+const { class: className } = Astro.props
+---
+
+<button
+  class:list={[
+    'bg-blue-600 hover:bg-blue-700 py-2 px-3.5 rounded-lg',
+    className
+  ]}
+>
+  <slot />
+</button>

src/components/Header.astro

@@ -0,0 +1,103 @@
+---
+import { gql } from '@/graphql/__generated__/client'
+import { getApolloClient } from '@/graphql/apolloClient.mjs'
+import { Image } from 'astro:assets'
+import { getSession } from 'auth-astro/server'
+import * as m from '../paraglide/messages.js'
+
+import logo from '@/img/logos/winter.png'
+// import logoEs from '@/img/logos/default_es.png'
+
+import Button from './Button.astro'
+import Dropdown from './header/Dropdown.astro'
+import DropdownItem from './header/DropdownItem.astro'
+import Toggler from './header/Toggler.astro'
+import NavButton from './header/NavButton.astro'
+
+const headerQuery = gql(`
+    query HeaderInfo {
+      config(name: "banner") {
+        value
+      }
+    }
+  `)
+
+const client = await getApolloClient()
+const { data: headerInfo } = await client.query({ query: headerQuery })
+
+const session = await getSession(Astro.request)
+---
+
+<header class='relative'>
+  <div
+    class='h-[150px] bg-top bg-no-repeat bg-cover'
+    style={{
+      backgroundImage: `url(https://cdn.sittingonclouds.net/live/${headerInfo.config.value}.png)`
+    }}
+  >
+    <div class='relative px-20 size-full'>
+      <a href='/'>
+        <Image
+          src={logo}
+          class='h-full py-0.5 w-auto'
+          alt='logo'
+          height={150}
+          width={265}
+        />
+      </a>
+
+      <div class='absolute top-0 right-0 space-x-2 mr-10'>
+        {
+          session === null ? (
+            <Button class='rounded-t-none'>{m.login()}</Button>
+          ) : (
+            <Button class='rounded-t-none'>{m.logout()}</Button>
+          )
+        }
+        <Button class='rounded-t-none'>{m.register()}</Button>
+      </div>
+    </div>
+  </div>
+  <nav class='w-full md:h-[55px] bg-dark'>
+    <Toggler>
+      <a href='/'><NavButton>{m.home()}</NavButton></a>
+      <a href='/last-added'><NavButton>{m.lastaddednav()}</NavButton></a>
+      <a href='/album/list'><NavButton>{m.albumlist()}</NavButton></a>
+
+      <Dropdown>
+        {m.games()}
+        <Fragment slot='items'>
+          <DropdownItem href='/game'>{m.albums()}</DropdownItem>
+          <DropdownItem href='/series'>{m.series()}</DropdownItem>
+          <DropdownItem href='/publisher/list'>{m.publishers()}</DropdownItem>
+          <DropdownItem href='/platforms/list'>{m.platforms()}</DropdownItem>
+          <DropdownItem href='/game/list'>{m.gamelist()}</DropdownItem>
+        </Fragment>
+      </Dropdown>
+
+      <Dropdown>
+        {m.animation()}
+        <Fragment slot='items'>
+          <DropdownItem href='/anim'>{m.albums()}</DropdownItem>
+          <DropdownItem href='/anim/list'>{m.animationlist()}</DropdownItem>
+          <DropdownItem href='/studio/list'>{m.studios()}</DropdownItem>
+        </Fragment>
+      </Dropdown>
+
+      <!-- <a href='/requests'><NavButton>{m.requests()}</NavButton></a>
+      <a href='#'><NavButton>{m.submitalbum()}</NavButton></a> -->
+
+      <!-- <Dropdown>
+      {m.admingrounds()}
+      <Fragment slot='items'>
+        <DropdownItem href='/admin'>{m.managealbums()}</DropdownItem>
+        <DropdownItem href='/admin/user'>{m.manageusers()}</DropdownItem>
+        <DropdownItem href='/admin/request'>{m.managerequests()}</DropdownItem>
+        <DropdownItem href='/admin/submission'
+          >{m.managesubmissions()}</DropdownItem
+        >
+      </Fragment>
+    </Dropdown> -->
+    </Toggler>
+  </nav>
+</header>

src/components/header/Dropdown.astro

@@ -0,0 +1,33 @@
+---
+import NavButton from './NavButton.astro'
+---
+
+<nav-dropdown>
+  <NavButton class='dropdown-btn group relative'>
+    <div class='after:content-["▼"] after:text-xs'><slot /></div>
+    <div
+      class='dropdown-items md:absolute flex-col bg-gray hidden md:group-hover:flex top-full left-0 py-1 min-w-36 rounded-md md:rounded-t-none mt-1.5 md:mt-0'
+    >
+      <slot name='items' />
+    </div>
+  </NavButton>
+</nav-dropdown>
+
+<script>
+  class Dropdown extends HTMLElement {
+    constructor() {
+      super()
+
+      const button = this.querySelector('.dropdown-btn')
+      const items = this.querySelector('.dropdown-items')
+
+      button.addEventListener('click', () => {
+        console.log('click')
+        items.classList.toggle('hidden')
+        items.classList.toggle('flex')
+      })
+    }
+  }
+
+  customElements.define('nav-dropdown', Dropdown)
+</script>

src/components/header/DropdownItem.astro

@@ -0,0 +1,10 @@
+---
+const { class: className, href } = Astro.props
+---
+
+<a
+  href={href}
+  class:list={['hover:bg-gray-hover py-1 text-left ps-4', className]}
+>
+  <slot />
+</a>

src/components/header/NavButton.astro

@@ -0,0 +1,14 @@
+---
+import Button from '../Button.astro'
+
+const { class: className } = Astro.props
+---
+
+<Button
+  class:list={[
+    'w-full md:w-fit md:h-full bg-dark hover:bg-dark-hover py-3.5 md:py-1 px-2 rounded-none text-left md:text-center',
+    className
+  ]}
+>
+  <slot />
+</Button>

src/components/header/Toggler.astro

@@ -0,0 +1,35 @@
+---
+import { Icon } from 'astro-icon/components'
+---
+
+<nav-toggler
+  class='flex flex-col md:flex-row max-[990px]:justify-center min-[990px]:ps-20 size-full'
+>
+  <div class='md:hidden h-[52px]'>
+    <Icon
+      id='nav-toggler'
+      class='py-3.5 px-3.5 h-full w-auto fill-white cursor-pointer'
+      name='hamburger'
+    />
+  </div>
+  <div class='nav-items hidden md:block'>
+    <slot />
+  </div>
+</nav-toggler>
+
+<script>
+  class Toggler extends HTMLElement {
+    constructor() {
+      super()
+
+      const items = this.querySelector('.nav-items')
+      const btn = document.getElementById('nav-toggler')
+
+      btn.addEventListener('click', () => {
+        items.classList.toggle('hidden')
+      })
+    }
+  }
+
+  customElements.define('nav-toggler', Toggler)
+</script>