djoka/bentopdf
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

Added hamburger navbar

Browse Source
This commit is contained in:
Yasir Akhlaque
2025-10-20 10:54:17 +05:30
parent 34a00ad74a
commit 584f2f09d1
7 changed files with 324 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
about.html
View File

@@ -12,34 +12,54 @@
</head> </head>
<body class="antialiased bg-gray-900 text-gray-300"> <body class="antialiased bg-gray-900 text-gray-300">
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30"> <nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16"> <div class="flex justify-between items-center h-16">
<a <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
href="index.html" <img src="images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8">
class="flex-shrink-0 flex items-center cursor-pointer" <span class="text-white font-bold text-xl ml-2"> <a href="index.html">BentoPDF</a> </span>
id="home-logo" </div>
>
<img
src="images/favicon.svg"
alt="Bentopdf Logo"
class="h-8 w-8 mr-2"
/>
<span class="text-white font-bold text-xl">BentoPDF</span>
</a>
<div class="hidden md:flex items-center space-x-8">
<a href="index.html" class="nav-link">Home</a>
<a href="./about.html" class="nav-link">About</a>
<a href="./contact.html" class="nav-link">Contact</a>
<a href="index.html#tools-header" class="nav-link">All Tools</a>
</div>
<div class="md:hidden flex items-center gap-4"> <!-- Desktop Navigation -->
<a href="index.html" class="nav-link">Home</a> <div class="hidden md:flex items-center space-x-8">
<a href="index.html#tools-header" class="nav-link">All Tools</a> <a href="index.html" class="nav-link">Home</a>
</div> <a href="./about.html" class="nav-link">About</a>
<a href="./contact.html" class="nav-link">Contact</a>
<a href="index.html#tools-header" class="nav-link">All Tools</a>
</div>
<!-- Mobile Hamburger Button -->
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 transition-colors"
aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<!-- Hamburger Icon -->
<svg id="menu-icon" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
<!-- Close Icon -->
<svg id="close-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Mobile Menu Dropdown -->
<div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="px-2 pt-2 pb-3 space-y-1">
<a href="index.html" class="mobile-nav-link">Home</a>
<a href="./about.html" class="mobile-nav-link">About</a>
<a href="./contact.html" class="mobile-nav-link">Contact</a>
<a href="index.html#tools-header" class="mobile-nav-link">All Tools</a>
</div>
</div> </div>
</div>
</nav> </nav>
<div id="app" class="min-h-screen container mx-auto p-4 md:p-8"> <div id="app" class="min-h-screen container mx-auto p-4 md:p-8">
@@ -286,5 +306,6 @@
<script> <script>
lucide.createIcons(); lucide.createIcons();
</script> </script>
<script type="module" src="src/js/mobileMenu.ts"></script>
</body> </body>
</html> </html>

70
contact.html
View File

@@ -11,32 +11,53 @@
<body class="antialiased bg-gray-900 text-gray-300"> <body class="antialiased bg-gray-900 text-gray-300">
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30"> <nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16"> <div class="flex justify-between items-center h-16">
<a <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
href="index.html" <img src="images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8">
class="flex-shrink-0 flex items-center cursor-pointer" <span class="text-white font-bold text-xl ml-2"> <a href="index.html">BentoPDF</a> </span>
> </div>
<img
src="images/favicon.svg"
alt="Bento PDF Logo"
class="h-8 w-8 mr-2"
/>
<span class="text-white font-bold text-xl"> BentoPDF</span>
</a>
<div class="hidden md:flex items-center space-x-8">
<a href="index.html" class="nav-link">Home</a>
<a href="./about.html" class="nav-link">About</a>
<a href="./contact.html" class="nav-link">Contact</a>
<a href="index.html#tools-header" class="nav-link">All Tools</a>
</div>
<div class="md:hidden flex items-center gap-4"> <!-- Desktop Navigation -->
<a href="index.html" class="nav-link">Home</a> <div class="hidden md:flex items-center space-x-8">
<a href="index.html#tools-header" class="nav-link">All Tools</a> <a href="index.html" class="nav-link">Home</a>
</div> <a href="./about.html" class="nav-link">About</a>
<a href="./contact.html" class="nav-link">Contact</a>
<a href="index.html#tools-header" class="nav-link">All Tools</a>
</div>
<!-- Mobile Hamburger Button -->
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 transition-colors"
aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<!-- Hamburger Icon -->
<svg id="menu-icon" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
<!-- Close Icon -->
<svg id="close-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Mobile Menu Dropdown -->
<div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="px-2 pt-2 pb-3 space-y-1">
<a href="index.html" class="mobile-nav-link">Home</a>
<a href="./about.html" class="mobile-nav-link">About</a>
<a href="./contact.html" class="mobile-nav-link">Contact</a>
<a href="index.html#tools-header" class="mobile-nav-link">All Tools</a>
</div>
</div> </div>
</div>
</nav> </nav>
<div id="app" class="min-h-screen container mx-auto p-4 md:p-8"> <div id="app" class="min-h-screen container mx-auto p-4 md:p-8">
@@ -150,5 +171,6 @@
<script> <script>
lucide.createIcons(); lucide.createIcons();
</script> </script>
<script type="module" src="src/js/mobileMenu.ts"></script>
</body> </body>
</html> </html>

71
faq.html
View File

@@ -14,33 +14,53 @@
<body class="antialiased bg-gray-900 text-gray-300"> <body class="antialiased bg-gray-900 text-gray-300">
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30"> <nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16"> <div class="flex justify-between items-center h-16">
<a <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
href="index.html" <img src="images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8">
class="flex-shrink-0 flex items-center cursor-pointer" <span class="text-white font-bold text-xl ml-2"> <a href="index.html">BentoPDF</a> </span>
id="home-logo" </div>
>
<img
src="images/favicon.svg"
alt="Bento PDF Logo"
class="h-8 w-8 mr-2"
/>
<span class="text-white font-bold text-xl">BentoPDF</span>
</a>
<div class="hidden md:flex items-center space-x-8">
<a href="index.html" class="nav-link">Home</a>
<a href="./about.html" class="nav-link">About</a>
<a href="./contact.html" class="nav-link">Contact</a>
<a href="index.html#tools-header" class="nav-link">All Tools</a>
</div>
<div class="md:hidden flex items-center gap-4"> <!-- Desktop Navigation -->
<a href="index.html" class="nav-link">Home</a> <div class="hidden md:flex items-center space-x-8">
<a href="index.html#tools-header" class="nav-link">All Tools</a> <a href="index.html" class="nav-link">Home</a>
</div> <a href="./about.html" class="nav-link">About</a>
<a href="./contact.html" class="nav-link">Contact</a>
<a href="index.html#tools-header" class="nav-link">All Tools</a>
</div>
<!-- Mobile Hamburger Button -->
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 transition-colors"
aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<!-- Hamburger Icon -->
<svg id="menu-icon" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
<!-- Close Icon -->
<svg id="close-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Mobile Menu Dropdown -->
<div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="px-2 pt-2 pb-3 space-y-1">
<a href="index.html" class="mobile-nav-link">Home</a>
<a href="./about.html" class="mobile-nav-link">About</a>
<a href="./contact.html" class="mobile-nav-link">Contact</a>
<a href="index.html#tools-header" class="mobile-nav-link">All Tools</a>
</div>
</div> </div>
</div>
</nav> </nav>
<div id="app" class="min-h-screen container mx-auto p-4 md:p-8"> <div id="app" class="min-h-screen container mx-auto p-4 md:p-8">
@@ -339,5 +359,6 @@
<script> <script>
lucide.createIcons(); lucide.createIcons();
</script> </script>
<script type="module" src="src/js/mobileMenu.ts"></script>
</body> </body>
</html> </html>

82
index.html
View File

@@ -32,48 +32,53 @@
<body class="antialiased"> <body class="antialiased">
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30"> <nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16"> <div class="flex justify-between items-center h-16">
<div <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
class="flex-shrink-0 flex items-center cursor-pointer" <img src="images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8">
id="home-logo" <span class="text-white font-bold text-xl ml-2"> <a href="index.html">BentoPDF</a> </span>
> </div>
<img
src="images/favicon.svg"
alt="Bento PDF Logo"
class="h-8 w-8"
/>
<span class="text-white font-bold text-xl ml-2">
<a href="index.html">BentoPDF</a>
</span>
</div>
<div class="hidden md:flex items-center space-x-8"> <!-- Desktop Navigation -->
<a href="index.html" class="nav-link">Home</a> <div class="hidden md:flex items-center space-x-8">
<a href="./about.html" class="nav-link">About</a> <a href="index.html" class="nav-link">Home</a>
<a href="./contact.html" class="nav-link">Contact</a> <a href="./about.html" class="nav-link">About</a>
<a href="index.html#tools-header" class="nav-link">All Tools</a> <a href="./contact.html" class="nav-link">Contact</a>
</div> <a href="index.html#tools-header" class="nav-link">All Tools</a>
</div>
<div class="md:hidden flex items-center gap-2"> <!-- Mobile Hamburger Button -->
<a href="index.html" class="nav-link">Home</a> <div class="md:hidden flex items-center">
<a href="index.html#tools-header" class="nav-link">All Tools</a> <button id="mobile-menu-button" type="button"
</div> class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 transition-colors"
aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<!-- Hamburger Icon -->
<svg id="menu-icon" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
<!-- Close Icon -->
<svg id="close-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div> </div>
</div>
<div id="mobile-menu" class="hidden md:hidden"> <!-- Mobile Menu Dropdown -->
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> <div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<a href="./about.html" class="mobile-nav-link">About</a> <div class="px-2 pt-2 pb-3 space-y-1">
<a href="./contact.html" class="mobile-nav-link">Contact</a> <a href="index.html" class="mobile-nav-link">Home</a>
<hr class="border-gray-700 my-2" /> <a href="./about.html" class="mobile-nav-link">About</a>
<a <a href="./contact.html" class="mobile-nav-link">Contact</a>
href="#tool-grid" <a href="index.html#tools-header" class="mobile-nav-link">All Tools</a>
id="mobile-all-tools-link" </div>
class="mobile-nav-link bg-gray-700 text-white"
>View All Tools</a
>
</div> </div>
</div>
</nav> </nav>
<div id="app" class="min-h-screen container mx-auto p-4 md:p-8"> <div id="app" class="min-h-screen container mx-auto p-4 md:p-8">
<section id="hero-section" class="text-center py-20"> <section id="hero-section" class="text-center py-20">
@@ -893,5 +898,6 @@
</footer> </footer>
<script type="module" src="src/js/main.ts"></script> <script type="module" src="src/js/main.ts"></script>
<script type="module" src="src/js/mobileMenu.ts"></script>
</body> </body>
</html> </html>

70
privacy.html
View File

@@ -13,32 +13,53 @@
<body class="antialiased bg-gray-900 text-gray-300"> <body class="antialiased bg-gray-900 text-gray-300">
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30"> <nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16"> <div class="flex justify-between items-center h-16">
<a <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
href="index.html" <img src="images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8">
class="flex-shrink-0 flex items-center cursor-pointer" <span class="text-white font-bold text-xl ml-2"> <a href="index.html">BentoPDF</a> </span>
> </div>
<img
src="images/favicon.svg"
alt="BentoPDF Logo"
class="h-8 w-8 mr-2"
/>
<span class="text-white font-bold text-xl">BentoPDF</span>
</a>
<div class="hidden md:flex items-center space-x-8">
<a href="index.html" class="nav-link">Home</a>
<a href="./about.html" class="nav-link">About</a>
<a href="./contact.html" class="nav-link">Contact</a>
<a href="index.html#tools-header" class="nav-link">All Tools</a>
</div>
<div class="md:hidden flex items-center gap-4"> <!-- Desktop Navigation -->
<a href="index.html" class="nav-link">Home</a> <div class="hidden md:flex items-center space-x-8">
<a href="index.html#tools-header" class="nav-link">All Tools</a> <a href="index.html" class="nav-link">Home</a>
</div> <a href="./about.html" class="nav-link">About</a>
<a href="./contact.html" class="nav-link">Contact</a>
<a href="index.html#tools-header" class="nav-link">All Tools</a>
</div>
<!-- Mobile Hamburger Button -->
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 transition-colors"
aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<!-- Hamburger Icon -->
<svg id="menu-icon" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
<!-- Close Icon -->
<svg id="close-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Mobile Menu Dropdown -->
<div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="px-2 pt-2 pb-3 space-y-1">
<a href="index.html" class="mobile-nav-link">Home</a>
<a href="./about.html" class="mobile-nav-link">About</a>
<a href="./contact.html" class="mobile-nav-link">Contact</a>
<a href="index.html#tools-header" class="mobile-nav-link">All Tools</a>
</div>
</div> </div>
</div>
</nav> </nav>
<div id="app" class="container mx-auto p-4 md:p-8"> <div id="app" class="container mx-auto p-4 md:p-8">
@@ -260,5 +281,6 @@
<script> <script>
lucide.createIcons(); lucide.createIcons();
</script> </script>
<script type="module" src="src/js/mobileMenu.ts"></script>
</body> </body>
</html> </html>

48
src/js/mobileMenu.ts Normal file
View File

@@ -0,0 +1,48 @@
document.addEventListener('DOMContentLoaded', () => {
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
const menuIcon = document.getElementById('menu-icon');
const closeIcon = document.getElementById('close-icon');
if (mobileMenuButton && mobileMenu && menuIcon && closeIcon) {
// Toggle menu on button click
mobileMenuButton.addEventListener('click', () => {
const isExpanded = mobileMenuButton.getAttribute('aria-expanded') === 'true';
// Toggle menu visibility
mobileMenu.classList.toggle('hidden');
// Toggle icons
menuIcon.classList.toggle('hidden');
closeIcon.classList.toggle('hidden');
// Update aria-expanded for accessibility
mobileMenuButton.setAttribute('aria-expanded', (!isExpanded).toString());
});
// Close menu when clicking on a link
const mobileLinks = mobileMenu.querySelectorAll('a');
mobileLinks.forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
menuIcon.classList.remove('hidden');
closeIcon.classList.add('hidden');
mobileMenuButton.setAttribute('aria-expanded', 'false');
});
});
// Close menu when clicking outside
document.addEventListener('click', (event) => {
const target = event.target as Node;
const isClickInsideMenu = mobileMenu.contains(target);
const isClickOnButton = mobileMenuButton.contains(target);
if (!isClickInsideMenu && !isClickOnButton && !mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
menuIcon.classList.remove('hidden');
closeIcon.classList.add('hidden');
mobileMenuButton.setAttribute('aria-expanded', 'false');
}
});
}
});

72
terms.html
View File

@@ -11,33 +11,54 @@
<link href="/src/css/styles.css" rel="stylesheet" /> <link href="/src/css/styles.css" rel="stylesheet" />
</head> </head>
<body class="antialiased bg-gray-900 text-gray-300"> <body class="antialiased bg-gray-900 text-gray-300">
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30"> <nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16"> <div class="flex justify-between items-center h-16">
<a <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
href="index.html" <img src="images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8">
class="flex-shrink-0 flex items-center cursor-pointer" <span class="text-white font-bold text-xl ml-2"> <a href="index.html">BentoPDF</a> </span>
> </div>
<img
src="images/favicon.svg"
alt="BentoPDF Logo"
class="h-8 w-8 mr-2"
/>
<span class="text-white font-bold text-xl">BentoPDF</span>
</a>
<div class="hidden md:flex items-center space-x-8">
<a href="index.html" class="nav-link">Home</a>
<a href="./about.html" class="nav-link">About</a>
<a href="./contact.html" class="nav-link">Contact</a>
<a href="index.html#tools-header" class="nav-link">All Tools</a>
</div>
<div class="md:hidden flex items-center gap-4"> <!-- Desktop Navigation -->
<a href="index.html" class="nav-link">Home</a> <div class="hidden md:flex items-center space-x-8">
<a href="index.html#tools-header" class="nav-link">All Tools</a> <a href="index.html" class="nav-link">Home</a>
</div> <a href="./about.html" class="nav-link">About</a>
<a href="./contact.html" class="nav-link">Contact</a>
<a href="index.html#tools-header" class="nav-link">All Tools</a>
</div>
<!-- Mobile Hamburger Button -->
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 transition-colors"
aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<!-- Hamburger Icon -->
<svg id="menu-icon" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
<!-- Close Icon -->
<svg id="close-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Mobile Menu Dropdown -->
<div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="px-2 pt-2 pb-3 space-y-1">
<a href="index.html" class="mobile-nav-link">Home</a>
<a href="./about.html" class="mobile-nav-link">About</a>
<a href="./contact.html" class="mobile-nav-link">Contact</a>
<a href="index.html#tools-header" class="mobile-nav-link">All Tools</a>
</div>
</div> </div>
</div>
</nav> </nav>
<div id="app" class="container mx-auto p-4 md:p-8"> <div id="app" class="container mx-auto p-4 md:p-8">
<section class="max-w-4xl mx-auto py-12"> <section class="max-w-4xl mx-auto py-12">
@@ -249,5 +270,6 @@
<script> <script>
lucide.createIcons(); lucide.createIcons();
</script> </script>
<script type="module" src="src/js/mobileMenu.ts"></script>
</body> </body>
</html> </html>