모노스페이스 소셜 미디어 네비게이션

<nav class="bg-gray-100 text-gray-800 dark:bg-gray-950 dark:text-gray-200 p-4 border-b border-gray-300 dark:border-gray-800 font-mono">
  <div class="container mx-auto flex flex-wrap items-center justify-between gap-4">
    <!-- Logo/Brand Name -->
    <div class="flex-shrink-0">
      <a href="#" class="text-xl font-bold text-gray-900 dark:text-gray-100 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
        <span class="text-blue-600 dark:text-blue-400">//</span>social_feed
      </a>
    </div>

    <!-- Mobile Menu Toggle -->
    <button id="menu-toggle" class="lg:hidden p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200" aria-label="Toggle navigation">
      <svg class="w-6 h-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="M4 6h16M4 12h16m-7 6h7"></path>
      </svg>
    </button>

    <!-- Primary Navigation Links (Hidden on mobile by default) -->
    <div id="nav-menu" class="hidden lg:flex flex-grow items-center justify-center space-x-6 text-sm flex-col lg:flex-row w-full lg:w-auto mt-4 lg:mt-0">
      <ul class="flex flex-col lg:flex-row space-y-2 lg:space-y-0 lg:space-x-6 w-full lg:w-auto text-center lg:text-left">
        <li>
          <a href="#" class="block py-2 px-3 lg:p-0 rounded-md lg:rounded-none text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 hover:underline hover:underline-offset-4 decoration-2 decoration-blue-600 dark:decoration-blue-400 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            <span class="text-blue-600 dark:text-blue-400">~</span>feed
          </a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 lg:p-0 rounded-md lg:rounded-none text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 hover:underline hover:underline-offset-4 decoration-2 decoration-blue-600 dark:decoration-blue-400 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            <span class="text-blue-600 dark:text-blue-400">~</span>explore
          </a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 lg:p-0 rounded-md lg:rounded-none text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 hover:underline hover:underline-offset-4 decoration-2 decoration-blue-600 dark:decoration-blue-400 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            <span class="text-blue-600 dark:text-blue-400">~</span>groups
          </a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 lg:p-0 rounded-md lg:rounded-none text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 hover:underline hover:underline-offset-4 decoration-2 decoration-blue-600 dark:decoration-blue-400 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            <span class="text-blue-600 dark:text-blue-400">~</span>messages
          </a>
        </li>
      </ul>
    </div>

    <!-- Right-aligned Icons and User Profile -->
    <div class="flex items-center space-x-4 flex-shrink-0 lg:ml-auto">
      <!-- Search Bar -->
      <div class="relative hidden sm:block">
        <input type="text" placeholder="search_user(" class="bg-gray-200 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md py-2 pl-4 pr-10 text-sm text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent transition-all duration-200 w-32 md:w-48 lg:w-64 placeholder-gray-500 dark:placeholder-gray-500">
        <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-500 text-xs">)</span>
      </div>
      
      <!-- Notification Icon -->
      <a href="#" aria-label="Notifications" class="relative p-2 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
        <svg class="w-6 h-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 top-1 right-1 block w-2 h-2 rounded-full bg-red-500 border border-gray-100 dark:border-gray-950"></span>
      </a>

      <!-- User Profile Dropdown -->
      <div class="relative">
        <button id="profile-menu-button" class="flex items-center space-x-2 p-2 rounded-md text-gray-900 dark:text-gray-100 dark:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" aria-label="User menu">
          <img class="w-8 h-8 rounded-full border-2 border-blue-600 dark:border-blue-400" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User avatar">
          <span class="hidden md:inline text-sm">user@system</span>
          <svg class="w-4 h-4 ml-1" 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="M19 9l-7 7-7-7"></path>
          </svg>
        </button>
        
        <div id="profile-menu-dropdown" class="absolute right-0 mt-2 hidden w-48 bg-gray-100 dark:bg-gray-900 rounded-md shadow-lg py-1 border border-gray-300 dark:border-gray-800 origin-top-right z-10">
          <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200">
            <span class="text-blue-600 dark:text-blue-400">$</span>profile
          </a>
          <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200">
            <span class="text-blue-600 dark:text-blue-400">$</span>settings
          </a>
          <div class="border-t border-gray-300 dark:border-gray-800 my-1"></div>
          <a href="#" class="block px-4 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200">
            <span class="text-blue-600 dark:text-blue-400">$</span>logout
          </a>
        </div>
      </div>
    </div>
  </div>
</nav>

<script>
  // Basic JavaScript for toggling mobile menu and profile dropdown
  document.addEventListener('DOMContentLoaded', function() {
    const menuToggle = document.getElementById('menu-toggle');
    const navMenu = document.getElementById('nav-menu');
    const profileMenuButton = document.getElementById('profile-menu-button');
    const profileMenuDropdown = document.getElementById('profile-menu-dropdown');

    menuToggle.addEventListener('click', function() {
      navMenu.classList.toggle('hidden');
      navMenu.classList.toggle('flex'); // Add flex for mobile menu to stack vertically
    });

    profileMenuButton.addEventListener('click', function() {
      profileMenuDropdown.classList.toggle('hidden');
    });

    // Close dropdowns when clicking outside
    document.addEventListener('click', function(event) {
      if (!profileMenuButton.contains(event.target) && !profileMenuDropdown.contains(event.target)) {
        profileMenuDropdown.classList.add('hidden');
      }
      // For mobile menu, only close if clicking outside of the menu area itself but allow clicks within the menu
      if (!menuToggle.contains(event.target) && !navMenu.contains(event.target) && window.innerWidth < 1024) {
        navMenu.classList.add('hidden');
        navMenu.classList.remove('flex');
      }
    });

    // Handle window resize for responsiveness
    window.addEventListener('resize', function() {
      if (window.innerWidth >= 1024) { // Equivalent to Tailwind's 'lg' breakpoint
        navMenu.classList.remove('hidden', 'flex');
        navMenu.classList.add('flex'); // Ensure it's flex on desktop
      } else {
        if (navMenu.classList.contains('flex')) { // If it was opened on mobile, keep it open, otherwise hide
             // Do nothing if it's already flex, as it means it was opened by menuToggle
        } else {
            navMenu.classList.add('hidden');
            navMenu.classList.remove('flex');
        }
      }
       profileMenuDropdown.classList.add('hidden'); // Close profile dropdown on resize
    });
  });
<\/script>