미니멀리스트 CRM 내비게이션

<nav class="bg-white dark:bg-gray-900 border-b border-purple-100 dark:border-purple-800 shadow-sm">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <div class="flex">
        <div class="flex-shrink-0 flex items-center">
          <a href="#" class="text-purple-600 dark:text-purple-400 text-2xl font-bold tracking-tight">
            CRM<span class="text-purple-400 dark:text-purple-600 text-base ml-1">Lite</span>
          </a>
        </div>
        <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
          <!-- Current: "border-purple-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
          <a href="#" class="border-b-2 border-purple-600 text-purple-800 dark:text-purple-100 dark:border-purple-400 inline-flex items-center px-1 pt-1 text-sm font-medium transition-colors duration-200">
            Dashboard
          </a>
          <a href="#" class="border-b-2 border-transparent text-gray-500 hover:border-purple-300 hover:text-purple-700 dark:text-gray-300 dark:hover:border-purple-600 dark:hover:text-purple-400 inline-flex items-center px-1 pt-1 text-sm font-medium transition-colors duration-200">
            Customers
          </a>
          <a href="#" class="border-b-2 border-transparent text-gray-500 hover:border-purple-300 hover:text-purple-700 dark:text-gray-300 dark:hover:border-purple-600 dark:hover:text-purple-400 inline-flex items-center px-1 pt-1 text-sm font-medium transition-colors duration-200">
            Tasks
          </a>
          <a href="#" class="border-b-2 border-transparent text-gray-500 hover:border-purple-300 hover:text-purple-700 dark:text-gray-300 dark:hover:border-purple-600 dark:hover:text-purple-400 inline-flex items-center px-1 pt-1 text-sm font-medium transition-colors duration-200">
            Reports
          </a>
        </div>
      </div>
      <div class="-mr-2 flex items-center sm:hidden">
        <!-- Mobile menu button -->
        <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-purple-50 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-purple-500 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:bg-gray-700" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <!-- Icon when menu is closed. -->
          <!-- Heroicon name: outline/menu -->
          <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <!-- Icon when menu is open. -->
          <!-- Heroicon name: outline/x -->
          <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="sm:hidden hidden" id="mobile-menu">
    <div class="pt-2 pb-3 space-y-1">
      <!-- Current: "bg-purple-50 border-purple-500 text-purple-700", Default: "border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700" -->
      <a href="#" class="bg-purple-50 border-purple-500 text-purple-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium dark:bg-gray-800 dark:border-purple-400 dark:text-purple-300">
        Dashboard
      </a>
      <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:border-gray-500 dark:hover:text-gray-200">
        Customers
      </a>
      <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:border-gray-500 dark:hover:text-gray-200">
        Tasks
      </a>
      <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:border-gray-500 dark:hover:text-gray-200">
        Reports
      </a>
    </div>
  </div>
</nav>

<script>
  // Basic JS for mobile menu toggle (not part of the HTML-only requirement, but for demonstration)
  document.addEventListener('DOMContentLoaded', () => {
    const mobileMenuButton = document.querySelector('button[aria-controls="mobile-menu"]');
    const mobileMenu = document.getElementById('mobile-menu');

    if (mobileMenuButton && mobileMenu) {
      mobileMenuButton.addEventListener('click', () => {
        const isExpanded = mobileMenuButton.getAttribute('aria-expanded') === 'true';
        mobileMenuButton.setAttribute('aria-expanded', !isExpanded);
        mobileMenu.classList.toggle('hidden');

        // Toggle icons
        const menuIcon = mobileMenuButton.querySelector('svg.block');
        const closeIcon = mobileMenuButton.querySelector('svg.hidden');

        if (menuIcon && closeIcon) {
          if (isExpanded) {
            menuIcon.classList.remove('hidden');
            closeIcon.classList.add('hidden');
          } else {
            menuIcon.classList.add('hidden');
            closeIcon.classList.remove('hidden');
          }
        }
      });
    }
  });
</script>