okay

frontend/src/components/navbar/HomeNav.module.css

@@ -36,6 +36,10 @@ nav.isSticky-nav{
 nav ul #nav-logo{
     border-right: 0.2em solid var(--c-lines);
 }
+/* Add class alias for logo used in TSX */
+.logo {
+    border-right: 0.2em solid var(--c-lines);
+}
 nav ul #nav-logo span{
     line-height: 0.75;
     font-size: 1.5em;
@@ -47,10 +51,21 @@ nav a{
     position: relative;
     text-decoration: none;
 }
-
 nav a:hover{
     color: #fff;
 }
+/* Unify link/summary layout to prevent distortion */
+nav a,
+nav summary {
+    color: #fff;
+    transition: color 1s;
+    position: relative;
+    text-decoration: none;
+    cursor: pointer;
+    display: inline-block;            /* ensure consistent inline sizing */
+    vertical-align: middle;           /* align with neighbors */
+    padding: 0;                       /* keep padding controlled by li */
+}
 
 nav a::before {
     content: "";
@@ -67,7 +82,125 @@ nav a::before {
 nav a:hover::before {
     transform: scaleX(1);
 }
+nav summary:hover {
+    color: #fff;
+}
 
+/* underline effect shared for links and summary */
+nav a::before,
+nav summary::before {
+    content: "";
+    position: absolute;
+    display: block;
+    width: 100%;
+    height: 2px;
+    bottom: 0;
+    left: 0;
+    background-color: #fff;
+    transform: scaleX(0);
+    transition: transform 0.3s ease;
+}
+nav a:hover::before,
+nav summary:hover::before {
+    transform: scaleX(1);
+}
+
+/* Submenu support */
+.hasSubmenu {
+    position: relative;
+    vertical-align: middle;           /* align with other inline items */
+}
+
+/* Keep details inline to avoid breaking the first row flow */
+.hasSubmenu details {
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+}
+
+/* Ensure "Services" and caret stay on the same line */
+.hasSubmenu details > summary {
+    display: inline-flex;       /* horizontal layout */
+    align-items: center;        /* vertical alignment */
+    gap: 0.5em;                 /* space between text and icon */
+    white-space: nowrap;        /* prevent wrapping */
+}
+
+/* Hide native disclosure icon/marker on summary */
+.hasSubmenu details > summary {
+    list-style: none;
+    outline: none;
+}
+.hasSubmenu details > summary::-webkit-details-marker {
+    display: none;
+}
+.hasSubmenu details > summary::marker {
+    content: "";
+}
+
+/* Reusable caret for submenu triggers */
+.caret {
+    transition: transform 0.2s ease-in-out;
+}
+
+/* Rotate caret when submenu is open */
+.hasSubmenu details[open] .caret {
+    transform: rotate(180deg);
+}
+
+/* Submenu box: place directly under nav with a tiny gap (no overlap) */
+.submenu {
+    list-style: none;
+    margin: 1em 0;
+    padding: 0.5em 0;
+    position: absolute;
+    left: 0;
+    top: calc(100% + 0.25em);
+    display: none;
+    background: var(--c-background-light);
+    border: 1px solid var(--c-lines);
+    border-radius: 0.75em;
+    min-width: max-content;
+    text-align: left;
+    z-index: 10;
+}
+.submenu li {
+    display: block;
+    padding: 0;
+}
+.submenu a {
+    display: inline-block;
+    padding: 0;             /* remove padding so underline equals text width */
+    margin: 0.35em 0;  /* spacing without affecting underline width */
+}
+
+/* Show submenu when open */
+.hasSubmenu details[open] .submenu {
+    display: flex;
+    flex-direction: column;
+}
+
+/* Hamburger toggle class (used by TSX) */
+.toggle {
+    display: none;
+    transition: transform 0.5s ease;
+}
+.toggleRotated {
+    transform: rotate(180deg);
+}
+
+/* Bridge TSX classnames to existing rules */
+.navList {
+    list-style: none;
+    padding: 0;
+}
+.navList li {
+    display: inline;
+    padding: 0 3em;
+}
+.navList li a {
+    text-decoration: none;
+}
 
 nav ul {
     list-style: none;
@@ -129,6 +262,11 @@ nav ul li a {
 
         max-height: 2em;
     }
+    /* When TSX adds styles.open to the UL, expand it */
+    .open {
+        max-height: 20em;
+    }
+
     nav ul:last-child{
         padding-bottom: 1em;
     }
@@ -139,4 +277,28 @@ nav ul li a {
         border-bottom: 0.2em solid var(--c-lines);
         border-right: none;
     }
-  }
+    /* Show hamburger on mobile */
+    .toggle {
+        margin-top: 0.25em;
+        margin-left: 0.75em;
+        position: absolute;
+        left: 0;
+        display: block;
+        font-size: 2em;
+    }
+
+    /* Submenu stacks inline under the parent item on mobile */
+    .submenu {
+        position: static;
+        border: none;
+        border-radius: 0;
+        background: transparent;
+        padding: 0 0 0.5em 0.5em;
+        min-width: unset;
+    }
+    .submenu a {
+        display: inline-block;
+        padding: 0;            /* keep no padding on mobile too */
+        margin: 0.25em 0.5em;  /* spacing via margin */
+    }
+}

frontend/src/components/navbar/HomeNav.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react"
 import styles from "./HomeNav.module.css"
-import { FaBars } from "react-icons/fa";
+import { FaBars, FaChevronDown } from "react-icons/fa";
 
 export default function HomeNav() {
   const [navOpen, setNavOpen] = useState(false)
@@ -9,7 +9,12 @@ export default function HomeNav() {
 
   return (
     <nav className={styles.nav}>
-      <FaBars className={styles.toggle} onClick={toggleNav} />
+      <FaBars
+        className={`${styles.toggle} ${navOpen ? styles.toggleRotated : ""}`}
+        onClick={toggleNav}
+        aria-label="Toggle navigation"
+        aria-expanded={navOpen}
+      />
 
       <ul className={`${styles.navList} ${navOpen ? styles.open : ""}`}>
         <li id="nav-logo" className={styles.logo}>
@@ -21,8 +26,18 @@ export default function HomeNav() {
         <li>
           <a href="#portfolio">Portfolio</a>
         </li>
-        <li>
-          <a href="#services">Services</a>
+        <li className={styles.hasSubmenu}>
+          <details>
+            <summary>
+              Services
+              <FaChevronDown className={`${styles.caret} ml-2 inline-block`} aria-hidden="true" />
+            </summary>
+            <ul className={styles.submenu}>
+              <li><a href="#web">Web development</a></li>
+              <li><a href="#integration">Integrations</a></li>
+              <li><a href="#support">Support</a></li>
+            </ul>
+          </details>
         </li>
         <li>
           <a href="#contactme-form">Contact me</a>