# Mobile Navigation Standardization Guide

This document captures the architecture and best practices for the ZenvyroLabs mobile navigation system to prevent recurring issues across pages or future projects.

## 1. Single Source of Truth
Avoid inline Scripts or fragmented HTML.
- **JavaScript:** All navigation logic must reside in `script.js` (e.g., `initMobileNav()`).
- **HTML:** Every page must include the EXACT same `.mobile-nav` drawer markup.
- **CSS:** Use a single global `style.css` for all positioning and animations.

## 2. State Management Consistency
Always use a unified class name for the "opened" state across CSS and JavaScript.
- **Standard:** Use `.active` (or `.open`), but **NEVER BOTH**.
- **Pitfall:** Using `.active` in JS `classList.add()` while CSS uses `.open` will cause the drawer to slide in but keep the content (links) hidden if they rely on the parent's state.

## 3. Visibility Architecture
Control visibility through hardware-accelerated transforms, not `display` or `opacity` alone.
- **Initial State:** `transform: translateX(100%)` (Off-screen right).
- **Active State:** `transform: translateX(0)`.
- **Reason:** This prevents "jumping" layouts and allows for smooth CSS transitions.
- **Links Visibility:** Hide links by default (`opacity: 0; transform: translateX(20px)`) and animate them in ONLY when the parent has the `.active` class.

## 4. Layering and Interaction
- **Z-Index:** The mobile nav must stay above ALL 3D backgrounds and custom cursors.
  - `.mobile-nav`: `z-index: 9999`
  - `.close-btn`: `z-index: 10000`
- **Body Scroll:** Always add `body.nav-open { overflow: hidden; }` when the menu is active to prevent background scrolling.
- **Relative Paths:** On multi-page sites, ensure relative paths in the menu (e.g., `../index.html`) are correct for the directory level.

## 5. Checklist for New Pages
1. [ ] Wrap navigation links in a `.mobile-nav` container with a `.close-btn`.
2. [ ] Ensure the trigger button has the `.hamburger` class.
3. [ ] Link the global `script.js` before the closing `</body>` tag.
4. [ ] Verify that no page-specific styles or scripts override the global `.active` behavior.
