Monospace Healthcare Navigation

<nav class="bg-neutral-100 p-4 font-mono text-neutral-800 shadow-md dark:bg-neutral-900 dark:text-neutral-200">
  <div class="container mx-auto flex flex-wrap items-center justify-between">

    <!-- Brand/Logo (Left) -->
    <a href="#" class="flex items-center text-xl font-bold tracking-tight text-amber-700 dark:text-amber-500">
      <svg class="mr-2 h-6 w-6 stroke-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M10 16L14 8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M8 12H16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      <span class="hidden md:inline">Med OS</span><span class="inline md:hidden">MOS</span>
    </a>

    <!-- Mobile Menu Button (Hamburger) -->
    <button class="peer block rounded p-2 text-neutral-600 focus:outline-none focus:ring-2 focus:ring-accent-500 dark:text-neutral-300 md:hidden" aria-label="Toggle navigation">
      <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
        <path d="M4 6h16M4 12h16M4 18h16"></path>
      </svg>
    </button>

    <!-- Navigation Links Container -->
    <div class="w-full flex-grow pb-4 md:flex md:w-auto md:items-center md:pb-0 peer-focus:block hidden">
      <ul class="flex flex-col md:ml-auto md:flex-row">
        <li><a href="#dashboard" class="mt-2 block px-4 py-2 text-neutral-700 hover:bg-neutral-200 hover:text-amber-700 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:hover:text-amber-500 md:mt-0 md:inline-block md:min-w-[8em] md:text-center">Dashboard</a></li>
        <li class="group relative">
          <a href="#patients" class="mt-2 block px-4 py-2 text-neutral-700 hover:bg-neutral-200 hover:text-amber-700 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:hover:text-amber-500 md:mt-0 md:inline-block md:min-w-[8em] md:text-center" aria-haspopup="true" aria-expanded="false">Patients
            <span class="ml-1 inline-block transition-transform duration-200 group-hover:rotate-180 md:hidden sm:inline-block md:group-hover:rotate-180">
              <svg class="h-4 w-4 fill-current" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"></path></svg>
            </span>
          </a>
          <!-- Dropdown Menu -->
          <ul class="hidden md:group-hover:block md:absolute md:top-full md:left-1/2 md:-translate-x-1/2 md:mt-0 md:bg-neutral-100 md:dark:bg-neutral-800 md:shadow-lg md:rounded-b-md md:z-10 group-focus-within:block">
            <li><a href="#add-patient" class="block whitespace-nowrap px-4 py-2 text-neutral-700 hover:bg-neutral-200 hover:text-amber-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:hover:text-amber-500">+ Add New</a></li>
            <li><a href="#patient-list" class="block whitespace-nowrap px-4 py-2 text-neutral-700 hover:bg-neutral-200 hover:text-amber-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:hover:text-amber-500">View All</a></li>
            <li><a href="#reports" class="block whitespace-nowrap px-4 py-2 text-neutral-700 hover:bg-neutral-200 hover:text-amber-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:hover:text-amber-500">Reports</a></li>
          </ul>
        </li>
        <li><a href="#appointments" class="mt-2 block px-4 py-2 text-neutral-700 hover:bg-neutral-200 hover:text-amber-700 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:hover:text-amber-500 md:mt-0 md:inline-block md:min-w-[8em] md:text-center">Appointments</a></li>
        <li><a href="#billing" class="mt-2 block px-4 py-2 text-neutral-700 hover:bg-neutral-200 hover:text-amber-700 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:hover:text-amber-500 md:mt-0 md:inline-block md:min-w-[8em] md:text-center">Billing</a></li>
        <li><a href="#settings" class="mt-2 block px-4 py-2 text-neutral-700 hover:bg-neutral-200 hover:text-amber-700 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:hover:text-amber-500 md:mt-0 md:inline-block md:min-w-[8em] md:text-center">Settings</a></li>
      </ul>
    </div>

    <!-- User Avatar & Actions (Right) -->
    <div class="flex items-center space-x-4 ml-auto -mr-2 md:mr-0">
      <!-- Search Icon (for desktop) -->
      <button class="hidden md:block p-2 text-neutral-600 hover:text-amber-700 dark:text-neutral-300 dark:hover:text-amber-500 focus:outline-none focus:ring-2 focus:ring-accent-500" aria-label="Search">
        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </button>

      <!-- Notifications Icon -->
      <button class="relative p-2 text-neutral-600 hover:text-amber-700 dark:text-neutral-300 dark:hover:text-amber-500 focus:outline-none focus:ring-2 focus:ring-accent-500" aria-label="Notifications">
        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
        </svg>
        <span class="absolute right-1 top-1 flex h-2 w-2 items-center justify-center rounded-full bg-red-500 text-xs font-bold text-white"></span>
      </button>

      <!-- User Avatar with Dropdown -->
      <div class="group relative">
        <button class="flex items-center space-x-2 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500" aria-haspopup="true" aria-expanded="false">
          <img class="h-8 w-8 rounded-full border-2 border-amber-700 dark:border-amber-500" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
          <span class="hidden text-neutral-800 dark:text-neutral-200 md:inline">Dr. Anya S.</span>
          <svg class="h-4 w-4 fill-current text-neutral-600 dark:text-neutral-300 md:inline-block transition-transform duration-200 group-hover:rotate-180" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"></path></svg>
        </button>
        <!-- User Dropdown Menu -->
        <ul class="hidden md:group-hover:block md:absolute md:top-full md:right-0 md:mt-2 md:bg-neutral-100 md:dark:bg-neutral-800 md:shadow-lg md:rounded-md md:z-20 md:min-w-[10rem] group-focus-within:block">
          <li><a href="#profile" class="block px-4 py-2 text-neutral-700 hover:bg-neutral-200 hover:text-amber-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:hover:text-amber-500">Profile</a></li>
          <li><a href="#messages" class="block px-4 py-2 text-neutral-700 hover:bg-neutral-200 hover:text-amber-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:hover:text-amber-500">Messages</a></li>
          <li><hr class="my-1 border-neutral-300 dark:border-neutral-700"></li>
          <li><a href="#logout" class="block px-4 py-2 text-red-600 hover:bg-red-100 dark:text-red-400 dark:hover:bg-red-900">Sign Out</a></li>
        </ul>
      </div>
    </div>

  </div>
</nav>