Implement header component

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>