Merge pull request #50 from heem42/feat/hamburger-menu

Feature: hamburger menu

Author: madcampos

src/components/PostHeader/index.astro

@@ -1,6 +1,6 @@
 ---
-import { Image } from 'astro:assets';
 import { Icon } from 'astro-icon/components';
+import { Image } from 'astro:assets';
 
 import { getFormattedAuthorsList } from '../../utils/post';
 import SiteNav from '../SiteNav/index.astro';

src/components/SiteNav/index.astro

@@ -1,19 +1,16 @@
 ---
+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="site-nav">
-	<ul>
+
+<nav id="desktop-navigation" aria-label="Main blog navigation">
+	<ul class="nav-links">
 		<li>
 			<a href={BLOG_URL}>
-				<Image src={logo} alt="TorontoJS Logo!" height={70} width={70} id="logo-rounded" />
-			</a>
-		</li>
-		<li>
-			<a href={`${BLOG_URL}about`}>
-				About
+				<Image src={logo} class="logo-rounded" alt="TorontoJS Logo!" height={70} width={70} />
 			</a>
 		</li>
 		<li>
@@ -26,5 +23,53 @@ const BLOG_URL = Astro.site?.href;
 				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>

src/components/SiteNav/styles.css

@@ -1,21 +1,74 @@
-#site-nav {
-	padding: var(--size-2);
+#desktop-navigation, #mobile-navigation {
 	background-color: var(--tjs-dark-bg);
 	font-weight: bold;
+	padding: var(--size-2);
 }
 
-#site-nav ul {
+.nav-links {
 	gap: var(--size-2);
 	align-items: center;
-	padding: var(--size-3);
+	list-style: none;
+	display: flex;
+	padding: var(--size-3)
 }
 
-#site-nav a { color: white; }
+.nav-links a {
+	color: white;
+}
 
-#logo-rounded {
+.logo-rounded {
 	border-radius: var(--size-2);
 }
 
-@media (max-width: 500px) {
-	#site-nav ul { flex-direction: column; }
+#hamburger-button {
+	background-color: transparent;
+	padding: var(--size-3)
+}
+
+#mobile-navigation {
+	display: none;
+}
+
+#mobile-menu:popover-open {
+	width: 100%;
+	height: 100%;
+	text-align: center;
+	display: flex;
+	flex-direction: column;
+	padding: var(--size-3)
+}
+
+#mobile-menu:popover-open ul {
+	display: flex;
+	flex-direction: column;
+	padding: var(--size-2);
+}
+
+#mobile-menu:popover-open button {
+	background-color: transparent;
+	margin-left: auto;
+	padding: var(--size-2);
+}
+
+#mobile-logo {
+	align-content: center;
+	padding: var(--size-3);
+}
+
+@media (max-width: 32rem) {
+	#mobile-navigation {
+		display: flex;
+		justify-content: space-between;
+		text-align: right;
+	}
+
+	#desktop-navigation {
+		display: none;
+	}
+}
+
+@media (max-width: 32rem) {
+	.nav-links {
+		flex-direction: column;
+	}
 }