Merge pull request #44 from bjohansebas/patch

Co-authored-by: ArmandPhilippot <[email protected]>
Co-authored-by: HiDeoo <[email protected]>
Co-authored-by: delucis <[email protected]>
Co-authored-by: sarah11918 <[email protected]>

Author: 4 people

src/components/Hamburger.astro

@@ -1,13 +1,22 @@
 ---
-import Hamburger from "./Hamburger.astro";
+import Menu from "./Menu.astro";
 import Navigation from "./Navigation.astro";
 import ThemeIcon from "./ThemeIcon.astro";
 ---
 
 <header>
   <nav>
-    <Hamburger />
-    <ThemeIcon />
+    <div>
+      <ThemeIcon />
+      <Menu />
+    </div>
     <Navigation />
   </nav>
 </header>
+
+<style>
+  div {
+    display: flex;
+    justify-content: space-between;
+  }
+</style>

src/components/Header.astro

@@ -0,0 +1,6 @@
+---
+---
+
+<button aria-expanded="false" aria-controls="main-menu" class="menu">
+  Menu
+</button>

src/components/Menu.astro

@@ -1,6 +1,6 @@
 ---
 ---
-<div class="nav-links">
+<div id="main-menu" class="nav-links">
   <a href="/">Home</a>
   <a href="/about/">About</a>
   <a href="/blog/">Blog</a>

src/components/Navigation.astro

@@ -2,8 +2,8 @@
 
 ---
 
-<button id="themeToggle">
-  <svg width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<button id="themeToggle" aria-label="Toggle theme">
+  <svg aria-hidden="true" width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
     <path
       class="sun"
       fill-rule="evenodd"

src/components/ThemeIcon.astro

@@ -15,7 +15,7 @@ const identity = {
 
 const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"];
 
-const skillColor = "navy";
+const skillColor = "crimson";
 const fontWeight = "bold";
 const textCase = "uppercase";
 ---

src/pages/about.astro

@@ -1,3 +1,6 @@
-document.querySelector('.hamburger').addEventListener('click', () => {
-  document.querySelector('.nav-links').classList.toggle('expanded');
+const menu = document.querySelector('.menu')
+
+menu.addEventListener('click', () => {
+  const isExpanded = menu.getAttribute('aria-expanded') === 'true';
+  menu.setAttribute('aria-expanded', !isExpanded);
 });

src/scripts/menu.js

@@ -22,24 +22,18 @@ h1 {
 
 /* nav styles */
 
-.hamburger {
-  padding-right: 20px;
-  cursor: pointer;
+.menu {
+  background-color: #0d0950;
+  border: none;
+  color: #fff;
+  font-size: 1.2rem;
+  font-weight: bold;
+  padding: 5px 10px;
 }
 
-.hamburger .line {
-  display: block;
-  width: 40px;
-  height: 5px;
-  margin-bottom: 10px;
-  background-color: #ff9776;
-}
 
 .nav-links {
   width: 100%;
-  top: 5rem;
-  left: 48px;
-  background-color: #ff9776;
   display: none;
   margin: 0;
 }
@@ -52,14 +46,15 @@ h1 {
   font-size: 1.2rem;
   font-weight: bold;
   text-transform: uppercase;
+  color: #0d0950;
 }
 
 .nav-links a:hover,
 .nav-links a:focus {
   background-color: #ff9776;
 }
 
-.expanded {
+:has(.menu[aria-expanded="true"]) .nav-links {
   display: unset;
 }
 
@@ -77,7 +72,7 @@ h1 {
     padding: 15px 20px;
   }
 
-  .hamburger {
+  .menu {
     display: none;
   }
 }
@@ -87,6 +82,20 @@ html.dark {
   color: #fff;
 }
 
+.dark .menu {
+  background-color: #fff;
+  color: #000;
+}
+
+.dark .nav-links a:hover,
+.dark .nav-links a:focus {
+  color: #0d0950;
+}
+
 .dark .nav-links a {
   color: #fff;
+}
+
+.dark a {
+  color: #ff9776;
 }