initial commit

components/menubar.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { useRef, type MouseEvent } from 'react';
+import './Menubar.css';
+
+const menuLinks = [
+  { label: 'Home', href: '/' },
+  { label: 'About', href: '/about-us' },
+  { label: 'Plans', href: '/plans' },
+  { label: 'Contact', href: '#' },
+];
+
+export default function Menubar() {
+  const menuToggleRef = useRef<HTMLInputElement>(null);
+
+  const closeMobileMenu = () => {
+    if (menuToggleRef.current) {
+      menuToggleRef.current.checked = false;
+    }
+  };
+
+  const handleLinkClick = (event: MouseEvent<HTMLAnchorElement>) => {
+    closeMobileMenu();
+    event.currentTarget.blur();
+  };
+
+  return (
+    <nav className="menubar">
+      <div className="menubar-content">
+        <div className="desktop-menu">
+          {menuLinks.map((link) => (
+            <a key={link.label} href={link.href} className="menu-item">
+              {link.label}
+            </a>
+          ))}
+        </div>
+        <div className="mobile-menu">
+          <input
+            ref={menuToggleRef}
+            type="checkbox"
+            id="mobile-nav-toggle"
+            className="mobile-menu-checkbox"
+          />
+          <label
+            htmlFor="mobile-nav-toggle"
+            className="burger-icon"
+            aria-controls="mobile-nav-menu"
+          >
+            <span className="burger-icon-menu" aria-hidden="true">
+              &#9776;
+            </span>
+            <span className="burger-icon-close" aria-hidden="true">
+              &times;
+            </span>
+          </label>
+          <div id="mobile-nav-menu" className="mobile-dropdown">
+            <div className="mobile-dropdown-inner">
+              {menuLinks.map((link) => (
+                <a
+                  key={link.label}
+                  href={link.href}
+                  className="menu-item mobile-dropdown-item"
+                  onClick={handleLinkClick}
+                >
+                  {link.label}
+                </a>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+}