@@ -69,40 +70,48 @@ const TxModal = dynamic(
export default function Home() {
const { account, isConnected, connect, disconnect } = useWeb3Auth();
+ const headerContent = (
+
+
Utility Protocol
+
+ {/* Mobile header - simplified */}
+
+
+
+
+ );
+
+ const footerContent = (
+ <>
+ © {new Date().getFullYear()} Utility Protocol. All rights reserved.
+
+ );
+
return (
-
-
-
-
- Utility Protocol
-
-
-
-
-
+
+
@@ -152,11 +161,7 @@ export default function Home() {
balance=""
/>
-
-
-
-
+
+
);
}
diff --git a/src/components/layout/MobileBottomNav.tsx b/src/components/layout/MobileBottomNav.tsx
new file mode 100644
index 0000000..04a42c8
--- /dev/null
+++ b/src/components/layout/MobileBottomNav.tsx
@@ -0,0 +1,95 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+interface NavItem {
+ label: string;
+ href: string;
+ icon: string;
+ ariaLabel: string;
+}
+
+const NAV_ITEMS: NavItem[] = [
+ {
+ label: "Dashboard",
+ href: "/",
+ icon: "π",
+ ariaLabel: "Dashboard navigation item",
+ },
+ {
+ label: "Fleet",
+ href: "/fleet",
+ icon: "π",
+ ariaLabel: "Fleet navigation item",
+ },
+ {
+ label: "Map",
+ href: "/map",
+ icon: "πΊοΈ",
+ ariaLabel: "Map navigation item",
+ },
+ {
+ label: "Settings",
+ href: "/settings",
+ icon: "βοΈ",
+ ariaLabel: "Settings navigation item",
+ },
+];
+
+export interface MobileBottomNavProps {
+ className?: string;
+}
+
+/**
+ * Mobile bottom navigation component
+ * Provides touch-optimized navigation for mobile devices (< 768px)
+ * Features: 44px minimum tap targets, smooth animations
+ */
+export const MobileBottomNav: React.FC
= ({
+ className = "",
+}) => {
+ const pathname = usePathname();
+
+ return (
+
+ );
+};
diff --git a/src/components/layout/MobileMenu.tsx b/src/components/layout/MobileMenu.tsx
new file mode 100644
index 0000000..0c585ac
--- /dev/null
+++ b/src/components/layout/MobileMenu.tsx
@@ -0,0 +1,187 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+interface MenuItem {
+ label: string;
+ href: string;
+ ariaLabel: string;
+}
+
+const MENU_ITEMS: MenuItem[] = [
+ {
+ label: "Dashboard",
+ href: "/",
+ ariaLabel: "Dashboard menu item",
+ },
+ {
+ label: "Fleet",
+ href: "/fleet",
+ ariaLabel: "Fleet menu item",
+ },
+ {
+ label: "Map",
+ href: "/map",
+ ariaLabel: "Map menu item",
+ },
+ {
+ label: "Settings",
+ href: "/settings",
+ ariaLabel: "Settings menu item",
+ },
+ {
+ label: "Documentation",
+ href: "/docs",
+ ariaLabel: "Documentation menu item",
+ },
+];
+
+export interface MobileMenuProps {
+ isOpen: boolean;
+ onClose: () => void;
+ className?: string;
+}
+
+/**
+ * Mobile collapsible menu component
+ * Features: Smooth slide animation, backdrop overlay, touch-optimized
+ * 44px+ minimum tap targets for accessibility
+ */
+export const MobileMenu: React.FC = ({
+ isOpen,
+ onClose,
+ className = "",
+}) => {
+ const pathname = usePathname();
+ const menuRef = useRef(null);
+ const backdropRef = useRef(null);
+
+ // Handle escape key to close menu
+ useEffect(() => {
+ const handleEscape = (e: KeyboardEvent) => {
+ if (e.key === "Escape" && isOpen) {
+ onClose();
+ }
+ };
+
+ if (isOpen) {
+ window.addEventListener("keydown", handleEscape);
+ // Prevent body scroll when menu is open
+ document.body.style.overflow = "hidden";
+ }
+
+ return () => {
+ window.removeEventListener("keydown", handleEscape);
+ document.body.style.overflow = "unset";
+ };
+ }, [isOpen, onClose]);
+
+ // Handle click outside to close menu
+ useEffect(() => {
+ const handleClickOutside = (e: MouseEvent) => {
+ if (
+ backdropRef.current &&
+ e.target === backdropRef.current &&
+ isOpen
+ ) {
+ onClose();
+ }
+ };
+
+ if (isOpen) {
+ document.addEventListener("click", handleClickOutside);
+ }
+
+ return () => {
+ document.removeEventListener("click", handleClickOutside);
+ };
+ }, [isOpen, onClose]);
+
+ return (
+ <>
+ {/* Backdrop overlay */}
+
+
+ {/* Menu panel */}
+
+
+ {/* Header with close button */}
+
+
Menu
+
+
+
+ {/* Menu items */}
+
+
+ {MENU_ITEMS.map((item) => {
+ const isActive = pathname === item.href;
+
+ return (
+ -
+
+ {item.label}
+
+
+ );
+ })}
+
+
+
+ {/* Footer info */}
+
+
Utility Protocol v1.0
+
+
+
+ {/* Header with mobile menu toggle */}
+ {header && (
+
+ )}
+
+ {/* Main content with bottom padding for mobile nav */}
+
+ {children}
+
+
+ {/* Footer */}
+ {footer && (
+
+ )}
+
+ {/* Mobile bottom navigation */}
+
+
+ {/* Mobile menu with swipe gesture support */}
+
+
Content
+
+ );
+
+ const main = container.querySelector("[role='main']");
+ expect(main).toBeInTheDocument();
+ });
+
+ it("should render header when provided", () => {
+ render(
+ Header Content