index.astro

---
import { Icon } from 'astro-icon/components';
import { Image } from 'astro:assets';
import logo from '../../assets/icons/logo.svg';
import './styles.css';
const BLOG_URL = Astro.site?.href;
---

<nav id="desktop-navigation" aria-label="Main blog navigation">
	<ul class="nav-links">
		<li>
			<a href={BLOG_URL}>
				<Image src={logo} class="logo-rounded" alt="TorontoJS Logo!" height={70} width={70} />
			</a>
		</li>
		<li>
			<a href={`${BLOG_URL}accessibility`}>
				Accessibility
			</a>
		</li>
		<li>
			<a href={`${BLOG_URL}license`}>
				License
			</a>
		</li>
		<li>
			<a href={`${BLOG_URL}about`}>
				About
			</a>
		</li>
	</ul>
</nav>

<div id="mobile-navigation">
	<a id="mobile-logo" href={BLOG_URL}>
		<Image src={logo} alt="TorontoJS Logo!" height={70} width={70} class="logo-rounded" />
	</a>
	<button
		id="hamburger-button" aria-controls="mobile-menu" aria-expanded="false" aria-haspopup="true"
		aria-label="Open blog navigation" popovertarget="mobile-menu"
	>
		<Icon
			id="hamburger-icon" name="mdi:hamburger-menu" title="Hamburger Menu Icon" width={70} height={70}
		/>
	</button>
	<nav popover id="mobile-menu" aria-label="Main blog navigation">
		<button popovertarget="mobile-menu" aria-controls="mobile-menu" aria-label="Close blog navigation">
			<Icon
				id="close-icon" name="mdi:close" title="Close Icon" width={70} height={70}
			/>
		</button>
		<ul class="nav-links">
			<li>
				<a href={BLOG_URL}>
					<Image src={logo} alt="TorontoJS Logo!" height={70} width={70} class="logo-rounded" />
				</a>
			</li>
			<li>
				<a href={`${BLOG_URL}accessibility`}>
					Accessibility
				</a>
			</li>
			<li>
				<a href={`${BLOG_URL}license`}>
					License
				</a>
			</li>
			<li>
				<a href={`${BLOG_URL}about`}>
					About
				</a>
			</li>
		</ul>
	</nav>
</div>