core-data-places/src/layouts/Header.astro at ecbdf6aed92e74781aa76f3df96f86efdf741d01 · performant-software/core-data-places · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
---
import LanguagePicker from '@components/LanguagePicker';
import MobileHeader from '@components/MobileHeader';
import NavBar from '@layouts/NavBar.astro';
import { getRelativeLocaleUrl, getRelativeLocaleUrlList } from 'astro:i18n';
import clsx from 'clsx';

const locales = getRelativeLocaleUrlList();
const currentLocale = Astro.currentLocale;
const currentUrl = Astro.url;

const {
  fullscreen,
  image,
  imageAlt,
  items,
  title
} = Astro.props;

---

<div
  class='flex flex-row justify-center w-full bg-primary'
>
  <div
    class={clsx(
      'hidden lg:flex flex-row justify-between items-center px-6 py-5 h-[80px] w-full',
      { '3xl:max-w-(--breakpoint-3xl)': !fullscreen }
    )}
  >
    <a
      class='flex flex-row items-center gap-6'
      href={getRelativeLocaleUrl(currentLocale)}
    >
      { image && (
        <img
          alt={imageAlt}
          class='h-10'
          src={image}
        />
      )}
      { title && (
        <h1
          class='text-lg font-medium'
        >
          { title }
        </h1>
      )}
    </a>
    <NavBar
      className='flex flex-row gap-x-12 pe-10 align-baseline justify-around'
      items={items}
    >
      <LanguagePicker
        locales={locales}
        currentLocale={currentLocale}
        currentUrl={currentUrl.pathname}
        client:only='react'
      />
    </NavBar>
  </div>

  <MobileHeader
    items={items}
    title={title}
    client:load
  >
    <LanguagePicker
      locales={locales}
      currentLocale={currentLocale}
      currentUrl={currentUrl.pathname}
    />
  </MobileHeader>
</div>