Skip to content

feat(ui): add responsive hamburger navbar for mobile devices #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
KGFCH2 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat(ui): add responsive hamburger navbar for mobile devices #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
109fa8d
feat(ui): add responsive hamburger navbar for mobile devices
KGFCH2 Jun 2, 2026
5dc7d80
Merge branch 'main' into fix/navbar-mobile-hamburger-menu
KGFCH2 Jun 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 65 additions & 18 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,46 +4,93 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="LearnSphere provides a world-class education to everyone, anywhere. Join our platform for high quality educational resources.">
<meta name="description" content="LearnSphere – An AI-powered educational platform providing world-class education to everyone, anywhere.">
<title>LearnSphere - Quality Education</title>
<link rel="stylesheet" href="styles.css">
</head>

<body>

<header class="navbar">
<div class="logo">LearnSphere</div>
<nav>
<header class="navbar" role="banner">
<div class="logo"><a href="index.html" aria-label="LearnSphere Home">LearnSphere</a></div>

<!-- Hamburger button — visible only on mobile -->
<button
class="hamburger"
id="hamburgerBtn"
aria-label="Toggle navigation menu"
aria-expanded="false"
aria-controls="navMenu"
>
<span></span>
<span></span>
<span></span>
</button>

<nav id="navMenu" role="navigation" aria-label="Main navigation">
<ul>
<li><a href="explore.html">Explore</a></li>
<li><a href="courses.html">Courses</a></li>
<li><a href="resources.html">Resources</a></li>
<li><a href="community.html">Community</a></li>
</ul>
</nav>

<div class="buttons">
<button class="login"><a href="log/login.html">Log in</a></button>
<button class="signup"><a href="log/register.html">Sign up</a></button>
</div>
</header>

<section class="hero">
<div class="hero-content">
<h1>For every student, every classroom.</h1>
<h2>Real results.</h2>
<p>We aim to provide a world-class education to everyone, anywhere.</p>
<div class="cta-buttons">
<button class="cta"><a href="learner.html">Learners</a></button>
<button class="cta"><a href="teachers.html">Teachers</a></button>
<button class="cta"><a href="parents.html">Parents</a></button>
<main>
<section class="hero" aria-label="Welcome section">
<div class="hero-content">
<h1>For every student, every classroom.</h1>
<h2>Real results.</h2>
<p>We aim to provide a world-class education to everyone, anywhere.</p>
<div class="cta-buttons" role="group" aria-label="User type selection">
<button class="cta"><a href="learner.html">Learners</a></button>
<button class="cta"><a href="teachers.html">Teachers</a></button>
<button class="cta"><a href="parents.html">Parents</a></button>
</div>
</div>
</div>
<div class="hero-image">
<img src="student.png" alt="Happy Student" loading="lazy">
</div>
</section>
<div class="hero-image">
<img src="student.png" alt="Happy student studying on LearnSphere" loading="lazy" width="400" height="400">
</div>
</section>
</main>

<script src="script.js"></script>
<script>
// Hamburger menu toggle
const hamburgerBtn = document.getElementById("hamburgerBtn");
const navMenu = document.getElementById("navMenu");

hamburgerBtn.addEventListener("click", () => {
const isOpen = navMenu.classList.toggle("is-open");
hamburgerBtn.classList.toggle("is-open", isOpen);
hamburgerBtn.setAttribute("aria-expanded", isOpen.toString());
});

// Close menu when a nav link is clicked (single-page anchor behaviour)
navMenu.querySelectorAll("a").forEach(link => {
link.addEventListener("click", () => {
navMenu.classList.remove("is-open");
hamburgerBtn.classList.remove("is-open");
hamburgerBtn.setAttribute("aria-expanded", "false");
});
});

// Close menu on Escape key
document.addEventListener("keydown", (e) => {
if (e.key === "Escape" && navMenu.classList.contains("is-open")) {
navMenu.classList.remove("is-open");
hamburgerBtn.classList.remove("is-open");
hamburgerBtn.setAttribute("aria-expanded", "false");
hamburgerBtn.focus();
}
});
</script>
</body>

</html>
207 changes: 113 additions & 94 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,78 +1,3 @@
/* ── CSS Custom Properties (Theme Tokens) ─────────────────────────────────── */
:root {
--color-bg: linear-gradient(135deg, #0d0d0d, #1a1a2e);
--color-text: #ffffff;
--color-navbar: #002244;
--color-nav-shadow: rgba(0, 255, 255, 0.3);
--color-accent: cyan;
--color-link: white;
--color-btn: #007bff;
--color-btn-hover: #0056b3;
--color-hero-h2: #00d9ff;
}

/* Light mode overrides — applied when data-theme="light" on <html> */
[data-theme="light"] {
--color-bg: linear-gradient(135deg, #f0f4ff, #e8f0fe);
--color-text: #1a1a2e;
--color-navbar: #1a3a6e;
--color-nav-shadow: rgba(0, 100, 200, 0.2);
--color-accent: #0056b3;
--color-link: #ffffff;
--color-btn: #0056b3;
--color-btn-hover: #003a8c;
--color-hero-h2: #0056b3;
}

[data-theme="light"] body {
background: var(--color-bg);
color: var(--color-text);
}

[data-theme="light"] .navbar {
background: var(--color-navbar);
}

[data-theme="light"] .logo {
color: var(--color-accent);
}

[data-theme="light"] .navbar ul li a {
color: var(--color-link);
}

[data-theme="light"] .hero h2 {
color: var(--color-hero-h2);
}

/* ── Theme Toggle Button ──────────────────────────────────────────────────── */
#themeToggleBtn {
position: fixed;
bottom: 20px;
right: 20px;
background: var(--color-btn);
color: white;
border: none;
padding: 10px 16px;
border-radius: 24px;
cursor: pointer;
font-size: 0.9rem;
font-weight: bold;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
transition: background 0.3s ease, transform 0.2s ease;
z-index: 999;
}

#themeToggleBtn:hover {
background: var(--color-btn-hover);
transform: scale(1.05);
}

#themeToggleBtn:focus-visible {
outline: 3px solid cyan;
outline-offset: 3px;
}

* {
box-sizing: border-box;
}
Expand All @@ -87,21 +12,29 @@ body {
min-height: 100vh;
}


/* Navbar */
/* ─── Navbar ──────────────────────────────────────────────────────────────── */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background: #002244;
padding: 15px 20px;
box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
position: relative;
z-index: 100;
}

.logo {
font-size: 1.8rem;
font-weight: bold;
color: cyan;
flex-shrink: 0;
}

.logo a {
text-decoration: none;
color: inherit;
font-weight: bold;
}

.navbar ul {
Expand All @@ -119,11 +52,21 @@ body {
text-decoration: none;
color: white;
font-size: 1.2rem;
transition: 0.3s;
transition: color 0.3s;
}

.navbar ul li a:hover {
.navbar ul li a:hover,
.navbar ul li a:focus {
color: cyan;
outline: 2px solid cyan;
outline-offset: 2px;
border-radius: 2px;
}

.buttons {
display: flex;
gap: 8px;
flex-shrink: 0;
}

.buttons button {
Expand All @@ -134,7 +77,7 @@ body {
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
transition: 0.3s;
transition: background 0.3s;
}

.buttons button a {
Expand All @@ -146,7 +89,43 @@ body {
background: #0056b3;
}

/* Hero Section */
/* ─── Hamburger Menu Button ───────────────────────────────────────────────── */
.hamburger {
display: none;
flex-direction: column;
justify-content: space-between;
width: 28px;
height: 20px;
background: none;
border: none;
cursor: pointer;
padding: 0;
z-index: 200;
}

.hamburger span {
display: block;
height: 3px;
width: 100%;
background: #ffffff;
border-radius: 3px;
transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Animate hamburger to X when open */
.hamburger.is-open span:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}

.hamburger.is-open span:nth-child(2) {
opacity: 0;
}

.hamburger.is-open span:nth-child(3) {
transform: translateY(-9px) rotate(-45deg);
}

/* ─── Hero Section ────────────────────────────────────────────────────────── */
.hero {
display: flex;
justify-content: center;
Expand Down Expand Up @@ -187,35 +166,74 @@ body {
font-size: 1rem;
cursor: pointer;
border: none;
transition: 0.3s;
transition: background 0.3s;
}

.cta:hover {
background: #0056b3;
}

.logo a {
text-decoration: none;
color: inherit;
font-weight: bold;
}

.cta a {
text-decoration: none;
color: inherit;
font-weight: bold;
text-decoration: none;
color: inherit;
font-weight: bold;
}

.hero-image img {
width: 400px;
max-width: 100%;
border-radius: 10px;
/* box-shadow: 0 0 15px rgba(0, 255, 255, 0.3); */
filter: drop-shadow(0 0 15px rgba(0, 255, 255, 0.3));
}

/* Responsive Design */
/* ─── Responsive — Mobile ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
/* Show hamburger button */
.hamburger {
display: flex;
}

/* Nav slides in from the top when open */
.navbar nav {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #002244;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
padding: 12px 0;
z-index: 99;
}

.navbar nav.is-open {
display: block;
}

.navbar ul {
flex-direction: column;
align-items: center;
gap: 0;
}

.navbar ul li {
margin: 0;
width: 100%;
}

.navbar ul li a {
display: block;
padding: 12px 20px;
text-align: center;
font-size: 1.1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Hide auth buttons on very small screens to save space */
.buttons {
display: none;
}

.hero {
flex-direction: column;
text-align: center;
Expand All @@ -226,7 +244,8 @@ body {
}
}

/* ─── Animations ──────────────────────────────────────────────────────────── */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
to { opacity: 1; transform: translateY(0); }
}
Loading