Skip to content

add burger menu on mobile #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

Merged
ewalid merged 1 commit into from
Jan 12, 2026
Merged

add burger menu on mobile #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 2 additions & 4 deletions frontend/src/components/features/about/AboutRosetta.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,8 @@ export function AboutRosetta() {
viewport={{ once: true }}
transition={{ duration: 0.5 }}
className="about-section-title"
>
Why Rosetta Exists
</motion.h2>

/>

{/* Bento Grid Layout */}
<div className="bento-grid">
{/* Row 1: Three equal cards - Problem, Result, Built for AI */}
Expand Down
104 changes: 101 additions & 3 deletions frontend/src/components/layout/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import { Link, useLocation } from 'react-router-dom';
import { Github, Moon, Sun } from 'lucide-react';
import { useState } from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import { Github, Moon, Sun, Menu, X } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
import logo from '../../assets/logo.svg';

interface HeaderProps {
Expand All @@ -9,8 +11,15 @@ interface HeaderProps {

export function Header({ isDarkMode, onToggleDarkMode }: HeaderProps) {
const location = useLocation();
const navigate = useNavigate();
const [isMenuOpen, setIsMenuOpen] = useState(false);
const isActive = (path: string) => location.pathname === path;

const handleNavClick = (path: string) => {
setIsMenuOpen(false);
navigate(path);
};

return (
<nav className="fixed top-0 left-0 right-0 z-50 backdrop-blur-md bg-white/80 dark:bg-gray-950/80 border-b border-gray-200 dark:border-gray-800">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
Expand All @@ -22,7 +31,8 @@ export function Header({ isDarkMode, onToggleDarkMode }: HeaderProps) {
</span>
</Link>

<div className="flex items-center gap-6">
{/* Desktop Navigation */}
<div className="hidden md:flex items-center gap-6">
<Link
to="/"
className={`relative px-4 py-2 transition-all ${
Expand Down Expand Up @@ -71,8 +81,96 @@ export function Header({ isDarkMode, onToggleDarkMode }: HeaderProps) {
<Github className="w-5 h-5 text-gray-600 dark:text-gray-400" />
</button>
</div>

{/* Mobile Actions */}
<div className="md:hidden flex items-center gap-2">
<button
onClick={onToggleDarkMode}
className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
aria-label={isDarkMode ? 'Switch to light mode' : 'Switch to dark mode'}
>
{isDarkMode ? (
<Sun className="w-5 h-5 text-gray-600 dark:text-gray-400" />
) : (
<Moon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
)}
</button>

<button
onClick={() => setIsMenuOpen(!isMenuOpen)}
className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
aria-label="Toggle menu"
>
{isMenuOpen ? (
<X className="w-5 h-5 text-gray-600 dark:text-gray-400" />
) : (
<Menu className="w-5 h-5 text-gray-600 dark:text-gray-400" />
)}
</button>
</div>
</div>
</div>

{/* Mobile Menu */}
<AnimatePresence>
{isMenuOpen && (
<>
{/* Backdrop */}
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.2 }}
className="fixed inset-0 top-16 bg-black/50 backdrop-blur-sm z-40 md:hidden"
onClick={() => setIsMenuOpen(false)}
/>

{/* Menu */}
<motion.div
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -20 }}
transition={{ duration: 0.2 }}
className="md:hidden absolute top-16 left-0 right-0 bg-white dark:bg-gray-950 border-b border-gray-200 dark:border-gray-800 shadow-lg z-40"
>
<div className="px-4 py-2">
<button
onClick={() => handleNavClick('/')}
className={`w-full text-left px-4 py-3 rounded-lg transition-colors ${
isActive('/')
? 'bg-emerald-50 dark:bg-emerald-950/20 text-emerald-600 dark:text-emerald-400'
: 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
}`}
>
Home
</button>

<button
onClick={() => handleNavClick('/about')}
className={`w-full text-left px-4 py-3 rounded-lg transition-colors ${
isActive('/about')
? 'bg-emerald-50 dark:bg-emerald-950/20 text-emerald-600 dark:text-emerald-400'
: 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
}`}
>
About
</button>

<a
href="https://github.com/ewalid/rosetta"
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-3 w-full px-4 py-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
onClick={() => setIsMenuOpen(false)}
>
<Github className="w-5 h-5" />
GitHub
</a>
</div>
</motion.div>
</>
)}
</AnimatePresence>
</nav>
);
}
20 changes: 17 additions & 3 deletions frontend/src/pages/About.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export function About() {

<main className="flex-1 pt-16">
{/* Hero Section */}
<section className="relative overflow-hidden bg-gradient-to-br from-emerald-50 via-white to-teal-50 dark:from-gray-950 dark:via-gray-900 dark:to-emerald-950 py-20">
<section className="relative overflow-hidden bg-gradient-to-br from-emerald-50 via-white to-teal-50 dark:from-gray-950 dark:via-gray-900 dark:to-emerald-950 pt-20 pb-10">
{/* Animated background grid */}
<div className="absolute inset-0 opacity-20">
<div
Expand Down Expand Up @@ -53,8 +53,22 @@ export function About() {
</section>

{/* Meet the Builder Section */}
<section className="py-20 bg-white dark:bg-gray-950" id="builder">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<section className="relative overflow-hidden bg-gradient-to-br from-emerald-50 via-white to-teal-50 dark:from-gray-950 dark:via-gray-900 dark:to-emerald-950 pt-10 pb-20" id="builder">
{/* Animated background grid */}
<div className="absolute inset-0 opacity-20">
<div
className="absolute inset-0"
style={{
backgroundImage: `
linear-gradient(to right, rgb(16 185 129 / 0.1) 1px, transparent 1px),
linear-gradient(to bottom, rgb(16 185 129 / 0.1) 1px, transparent 1px)
`,
backgroundSize: '40px 40px'
}}
/>
</div>

<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
Expand Down