hermes-config/skills/software-development/web-ui-repair/references/repair-orders-header-fix.md

Repair Orders Page Fix: Missing Mobile Navigation

Bug

Hamburger menu button (top-right, next to account settings) did nothing when tapped on mobile. Page didn't have mobile navigation at all.

Diagnosis

Compared repair-orders.html against working pages (customers.html, appointments.html). Found three missing pieces:

1. Missing script include — shared/header-functionality.js was not loaded. This file contains the setupHeaderEventListeners() function that registers the click handler for #mobile-menu-btn.

2. Missing HTML — The #mobile-navigation div (the nav panel that slides in on hamburger click) didn't exist in the page. Working pages had it after the desktop #main-navigation block.

3. Missing CSS — #mobile-navigation z-index and slide-in animation styles were not present in the inline <style> block.

Fix Applied

1. Added script tag (alongside existing scripts at page bottom)

<script type="module" src="shared/header-functionality.js"></script>

2. Added mobile-navigation HTML after #main-navigation close

<div id="mobile-navigation" class="lg:hidden hidden py-3 md:py-4 border-t border-white/20">
  <div class="space-y-2">
    <!-- Dashboard link -->
    <!-- Repair Orders link (highlighted active) -->
    <!-- Appointments link -->
    <!-- Customers link -->
  </div>
</div>

Nav links use mobile-nav-link class and include inline SVG icons for each page. Active page gets bg-white/20 text-white shadow-sm highlight.

3. Added CSS (within <style> block)

/* Mobile Navigation */
#mobile-navigation {
    z-index: 10000 !important;
}

#mobile-navigation {
    animation: mobileNavSlideIn 0.3s ease-out;
}

@keyframes mobileNavSlideIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    #mobile-navigation {
        transition: none;
        animation: none;
    }
}

Pattern

This follows a recurring pattern in multi-page static web apps: when a UI feature works on some pages but not others, it's almost always one of:

1. Script not loaded on the broken page
2. HTML element not present on the broken page
3. CSS rule missing on the broken page

Check all three layers systematically.