44. Git and GitHub Project - Task 5

1## Feature Request
2Make navigation responsive for mobile devices.
3
4## Requirements
5- [ ] Hamburger menu icon on mobile
6- [ ] Slide-out menu
7- [ ] Smooth animations
8
9## Design Notes
10- Menu icon appears below 768px
11- Menu slides from right
12- Close button in menu
13
14## Acceptance Criteria
15- Works on all mobile devices
16- Animations are smooth
17- Menu closes when clicking outside

1cd portfolio-project
2git checkout main
3git pull origin main
4git checkout -b feature/responsive-nav

1/* Mobile Navigation */
2@media (max-width: 768px) {
3    header nav {
4        display: none;
5        position: fixed;
6        top: 0;
7        right: 0;
8        width: 250px;
9        height: 100vh;
10        background: #222;
11        padding: 60px 20px;
12        transform: translateX(100%);
13        transition: transform 0.3s ease;
14    }
15
16    header nav.active {
17        display: block;
18        transform: translateX(0);
19    }
20
21    header nav a {
22        display: block;
23        margin: 20px 0;
24        font-size: 1.2rem;
25    }
26
27    .menu-toggle {
28        display: block;
29        background: none;
30        border: none;
31        color: white;
32        font-size: 1.5rem;
33        cursor: pointer;
34    }
35
36    .menu-close {
37        position: absolute;
38        top: 20px;
39        right: 20px;
40        font-size: 1.5rem;
41        color: white;
42        background: none;
43        border: none;
44        cursor: pointer;
45    }
46}
47
48@media (min-width: 769px) {
49    .menu-toggle,
50    .menu-close {
51        display: none;
52    }
53}

1<header>
2    <h1>Welcome to My Portfolio</h1>
3    <button class="menu-toggle" onclick="toggleMenu()">☰</button>
4    <nav id="main-nav">
5        <button class="menu-close" onclick="toggleMenu()">×</button>
6        <a href="#about">About</a>
7        <a href="#skills">Skills</a>
8        <a href="#projects">Projects</a>
9        <a href="#contact">Contact</a>
10    </nav>
11</header>

1// Mobile menu toggle
2function toggleMenu() {
3    const nav = document.getElementById('main-nav');
4    nav.classList.toggle('active');
5}
6
7// Close menu when clicking outside
8document.addEventListener('click', function(event) {
9    const nav = document.getElementById('main-nav');
10    const toggle = document.querySelector('.menu-toggle');
11    
12    if (!nav.contains(event.target) && !toggle.contains(event.target)) {
13        nav.classList.remove('active');
14    }
15});

1git add .
2git commit -m "Add responsive navigation menu
3
4- Add hamburger menu for mobile
5- Implement slide-out navigation
6- Add click-outside to close
7
8Closes #3"
9
10git push -u origin feature/responsive-nav

1## Description
2Implement responsive navigation for mobile devices.
3
4## Changes
5- Added hamburger menu button
6- Created slide-out navigation panel
7- Added smooth CSS transitions
8- Implemented click-outside to close
9
10## Testing
111. Open site on desktop - normal navigation
122. Resize to < 768px - hamburger appears
133. Click hamburger - menu slides out
144. Click outside or × - menu closes
15
16## Screenshots
17[Add mobile and desktop screenshots]
18
19## Checklist
20- [x] Tested on mobile
21- [x] Animations smooth
22- [x] Closes #3
23
24Closes #3

1git checkout main
2git pull origin main
3git branch -d feature/responsive-nav