Skip to content

Commit 8f51e88

Browse files
Hrishikesh-DalalHrishikesh-Dalal
authored
Merge pull request #90 from pratap360/main
enhancement in navbar
2 parents 522d89a + 247680b commit 8f51e88

File tree

11 files changed

+348
-85
lines changed

11 files changed

+348
-85
lines changed

‎favicon/android-chrome-192x192.png‎

16.4 KB
Loading

‎favicon/android-chrome-512x512.png‎

50.6 KB
Loading

‎favicon/apple-touch-icon.png‎

14.8 KB
Loading

‎favicon/favicon-16x16.png‎

675 Bytes
Loading

‎favicon/favicon-32x32.png‎

1.74 KB
Loading

‎favicon/favicon.ico‎

15 KB
Binary file not shown.

‎index.html‎

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,24 @@
11
<!doctype html>
22
<html lang="en" data-theme="light">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>React Verse - Free API Dashboard</title>
7-
<meta name="description" content="All-in-one dashboard showcasing multiple free public APIs (Hacktoberfest)." />
8-
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
9-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css">
10-
</head>
11-
<body>
12-
<div id="root"></div>
13-
<script type="module" src="/src/main.jsx"></script>
14-
</body>
15-
</html>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>React Verse - Free API Dashboard</title>
8+
<meta name="description" content="All-in-one dashboard showcasing multiple free public APIs (Hacktoberfest)." />
9+
<link rel="icon" type="image/svg+xml" href="favicon/favicon.ico" />
10+
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/apple-touch-icon.png">
11+
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/android-chrome-512x512.png">
12+
<link rel="apple-touch-icon" sizes="180x180" href="favicon/android-chrome-192x192.png">
13+
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-32x32.png">
14+
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
15+
16+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css">
17+
</head>
18+
19+
<body>
20+
<div id="root"></div>
21+
<script type="module" src="/src/main.jsx"></script>
22+
</body>
23+
24+
</html>

‎src/App.jsx‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -41,19 +41,30 @@ import JokesQuotes from './pages/JokesQuotes.jsx';
4141
import Pets from './pages/Pets.jsx';
4242
import Covid from './pages/Covid.jsx';
4343
import Navbar from './components/Navbar.jsx';
44-
import ThemeSwitcher from './components/ThemeSwitcher.jsx';
4544

4645
// TODO: Extract theme state into context (see todo 5).
47-
import { useState } from 'react';
46+
import { useState, useEffect } from 'react';
4847

4948
export default function App() {
50-
const [theme, setTheme] = useState('light');
51-
const toggleTheme = () => setTheme(t => (t === 'light' ? 'dark' : 'light'));
49+
const [theme, setTheme] = useState(() => {
50+
return localStorage.getItem('theme') || 'light';
51+
});
52+
53+
const toggleTheme = () => {
54+
setTheme(t => {
55+
const newTheme = t === 'light' ? 'dark' : 'light';
56+
localStorage.setItem('theme', newTheme);
57+
return newTheme;
58+
});
59+
};
60+
61+
useEffect(() => {
62+
localStorage.setItem('theme', theme);
63+
}, [theme]);
5264

5365
return (
5466
<div className={`app theme-${theme}`}>
55-
<Navbar />
56-
<ThemeSwitcher theme={theme} toggleTheme={toggleTheme} />
67+
<Navbar theme={theme} toggleTheme={toggleTheme} />
5768
<main className="container">
5869
<Routes>
5970
{/* Different Routes */}

‎src/components/Navbar.jsx‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
import { NavLink } from 'react-router-dom';
22

3-
export default function Navbar() {
3+
export default function Navbar({ theme, toggleTheme }) {
44
return (
55
<nav className="navbar">
6-
<h1 className="logo">React Verse</h1>
7-
<button className="nav-toggle" aria-label="Toggle navigation" onClick={() => {
8-
document.body.classList.toggle('nav-open');
9-
}}>☰</button>
6+
<h1 className="logo">🌐 ReactVerse</h1>
7+
108
<ul>
119
<li><NavLink to="/">Home</NavLink></li>
1210
<li><NavLink to="/weather">Weather</NavLink></li>
@@ -18,7 +16,25 @@ export default function Navbar() {
1816
<li><NavLink to="/jokes-quotes">Jokes & Quotes</NavLink></li>
1917
<li><NavLink to="/pets">Pets</NavLink></li>
2018
<li><NavLink to="/covid">COVID-19</NavLink></li>
19+
<li className="theme-item">
20+
<button
21+
className="theme-toggle"
22+
onClick={toggleTheme}
23+
aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
24+
>
25+
<span className="theme-text">Theme Switcher</span>
26+
<span className="theme-icon">{theme === 'light' ? '🌙' : '☀️'}</span>
27+
</button>
28+
</li>
2129
</ul>
30+
31+
<button
32+
className="nav-toggle"
33+
aria-label="Toggle navigation"
34+
onClick={() => document.body.classList.toggle('nav-open')}
35+
>
36+
☰
37+
</button>
2238
</nav>
2339
);
2440
}

‎src/components/ThemeSwitcher.jsx‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

0 commit comments

Comments
 (0)