Patterns / Headers

Preview

Left Aligned Logo, Right Aligned Menu

---
import Container from '@components/Container.astro';
import Logo from '@components/Logo.astro';
import Menu from '@components/Menu.astro';
import MobileMenu from '@components/MobileMenu.astro';
---

<Container
	as="header"
	class="flex items-center justify-between gap-8 py-6 relative z-50"
>
	<Logo />
	<Menu name="demo" />
	<MobileMenu name="demo" showPhoneNumber />
</Container>

<!-- /*
Usage:
<Header />
*/ -->

Nova

Preview

Left Aligned Logo, Left Aligned Menu, Right Aligned Actions

---
import site from '@src/site.js';
import Container from '@components/Container.astro';
import Logo from '@components/Logo.astro';
import Menu from '@components/Menu.astro';
import MobileMenu from '@components/MobileMenu.astro';
---

<Container
	as="header"
	class="flex items-center justify-between gap-8 py-6 relative z-50"
>
	<div class="flex items-center gap-8">
		<Logo />
		<Menu name="demo" />
	</div>
	<div class="flex items-center gap-8">
		<a class="no-underline text-lg weight-bold" href={`tel:${site.phone}`}>
			{site.phone}
		</a>
		<MobileMenu name="demo" showPhoneNumber />
	</div>
</Container>

<!-- /*
Usage:
<Header />
*/ -->

Nova

0208 300 8833

Preview

Left Aligned Logo, Right Aligned Menu, Right Aligned Actions

---
import site from '@src/site.js';
import Container from '@components/Container.astro';
import Logo from '@components/Logo.astro';
import Icon from '@components/Icon.astro';
import Menu from '@components/Menu.astro';
import MobileMenu from '@components/MobileMenu.astro';
---

<Container
	as="header"
	class="flex items-center justify-between gap-8 py-6 relative z-50"
>
	<Logo />
	<div class="flex flex-col items-end gap-1">
		<div class="flex items-center gap-8">
			<p class="hidden items-center gap-1.5 sm:flex">
				<Icon name="map-marker" class="w-5 h-5" />
				<span class="text-gray-700">Bromley, UK</span>
			</p>
			<a
				class="no-underline text-lg weight-bold"
				href={`tel:${site.phone}`}
			>
				{site.phone}
			</a>
			<MobileMenu name="demo" showPhoneNumber />
		</div>
		<Menu name="demo" />
	</div>
</Container>

<!-- /*
Usage:
<Header />
*/ -->

Nova

Bromley, UK

0208 300 8833

Preview

Left Aligned Logo, Right Aligned Menu & Actions

---
import site from '@src/site.js';
import Container from '@components/Container.astro';
import Logo from '@components/Logo.astro';
import Menu from '@components/Menu.astro';
import MobileMenu from '@components/MobileMenu.astro';
import Icon from '@components/Icon.astro';
---

<Container
	as="header"
	class="flex items-center justify-between gap-8 py-6 relative z-50"
>
	<Logo />
	<div class="flex items-center gap-8">
		<Menu name="demo" />
		<a
			class="flex items-center gap-2 no-underline text-lg weight-bold"
			href={`tel:${site.phone}`}
		>
			<Icon name="phone" class="w-7 h-7" />
			{site.phone}
		</a>
		<MobileMenu name="demo" showPhoneNumber />
	</div>
</Container>

<!-- /*
Usage:
<Header />
*/ -->

Nova

0208 300 8833

Preview

Centered Logo, Split Menu

---
import Container from '@components/Container.astro';
import Logo from '@components/Logo.astro';
import Menu from '@components/Menu.astro';
import MobileMenu from '@components/MobileMenu.astro';
---

<Container
	as="header"
	class="flex items-center justify-between gap-8 py-6 relative z-50 md:justify-center"
>
	<Logo class="md:hidden" />
	<MobileMenu showPhoneNumber />
	<div class="hidden items-center justify-center gap-8 md:flex">
		<Menu name="demoSplitLeft" />
		<Logo />
		<Menu name="demoSplitRight" />
	</div>
</Container>

<!-- /*
Usage:
<Header />
*/ -->

Nova