blob: e9d0f5bd2379374d03d67836d5f441faab0686e7 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
import { useState, useEffect } from 'react';
export default function Navigation() {
const [isMenuOpen, setIsMenuOpen] = useState(false);
// Close menu when window is resized to desktop size
useEffect(() => {
const handleResize = () => {
if (window.innerWidth >= 640 && isMenuOpen) {
setIsMenuOpen(false);
}
};
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, [isMenuOpen]);
const toggleMenu = () => {
setIsMenuOpen(!isMenuOpen);
};
return (
<nav className="w-full max-w-6xl mx-auto mb-4 py-2 px-4">
<div className="flex justify-between items-center">
<a
href="/"
className="text-2xl font-bold flex items-center gap-2"
>
<img
src="/ico/icon-192.png"
alt="CIDR.xyz logo"
className="w-6 h-6"
/>
CIDR.xyz
</a>
{/* Hamburger button for mobile */}
<button
onClick={toggleMenu}
className="sm:hidden flex items-center px-3 py-2 border rounded text-gray-700 border-gray-700 hover:text-blue-600 hover:border-blue-600"
aria-label="Toggle menu"
>
<svg className="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
</svg>
</button>
{/* Desktop menu */}
<div className="hidden sm:flex space-x-6">
<NavLinks />
</div>
</div>
{/* Mobile menu */}
<div className={`${isMenuOpen ? '' : 'hidden'} sm:hidden mt-4 pt-4 border-t border-gray-200`}>
<div className="flex flex-col space-y-3">
<NavLinks mobile={true} />
</div>
</div>
</nav>
);
}
// Separated NavLinks component for reuse
function NavLinks({ mobile = false }: { mobile?: boolean }) {
const linkClass = `text-gray-700 hover:text-blue-600 ${mobile ? 'py-2' : ''}`;
return (
<>
<a href="/" className={linkClass}>
CIDR Calculator
</a>
<a href="/subnet-guide/" className={linkClass}>
Subnet Guide
</a>
<a href="/embed-widget/" className={linkClass}>
Embed
</a>
<a
href="https://github.com/yuvadm/cidr.xyz"
className={`${linkClass} flex items-center gap-1`}
target="_blank"
rel="noopener noreferrer"
>
Github
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
/>
</svg>
</a>
</>
);
}
|
