I need a clean, minimalistic navigation bar for the login section of my web app. The bar must sit against a dark color palette and feel distraction-free while still giving users the essentials: • a compact logo on the left (SVG or high-resolution PNG) • a centered search bar that expands smoothly on focus • a right-aligned user-profile dropdown with space for an avatar and two placeholder links (e.g., “Settings” and “Log out”) Please build the component in plain HTML, CSS, and lightweight JavaScript (Vanilla JS or a small framework such as Alpine.js is fine). CSS should rely on flexbox or grid, avoid heavy libraries, and keep the code clear enough for me to slot into an existing React view later. All colors, hover states, and focus outlines need to respect WCAG contrast on a dark background. Deliverables: 1. A single, self-contained HTML file demonstrating the navbar. 2. A separate CSS file (or a styled-components snippet if you prefer). 3. A brief read-me explaining class names, customizable variables, and how to swap in my own logo. Once delivered, I’ll plug it into the live login page and run quick tests for responsiveness at 320-1440 px widths.