Skeuomorphic Navigation Component

<!-- Skeuomorphic Navigation Component with Dark Mode Support -->
<nav class="w-full bg-gradient-to-b from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 rounded-lg shadow-lg border border-gray-300 dark:border-gray-700 p-2 transition-all duration-300">
  <!-- Container for the nav items -->
  <div class="flex flex-col md:flex-row items-center justify-between">
    
    <!-- Logo Area - Mimicking a metal plate with engraved logo -->
    <div class="flex items-center p-2 bg-gradient-to-r from-gray-300 to-gray-200 dark:from-gray-700 dark:to-gray-800 rounded-lg shadow-inner border border-gray-400 dark:border-gray-600 m-2">
      <div class="w-10 h-10 bg-gradient-to-br from-blue-400 to-blue-600 rounded-full flex items-center justify-center shadow-lg border-2 border-gray-300 dark:border-gray-700">
        <span class="text-white font-bold text-xl">S</span>
      </div>
      <span class="ml-3 font-bold text-gray-700 dark:text-gray-200 tracking-wider text-shadow">SKEUOUI</span>
    </div>
    
    <!-- Navigation buttons - Mimicking physical buttons -->
    <div class="flex flex-wrap justify-center md:justify-end">
      <!-- Home Button -->
      <div class="group m-2">
        <button class="px-6 py-3 bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 rounded-lg text-gray-700 dark:text-gray-200 font-medium border border-gray-400 dark:border-gray-600 shadow-md hover:shadow-inner hover:translate-y-0.5 active:shadow-inner active:translate-y-1 transition-all duration-150 flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
          </svg>
          Home
        </button>
        <div class="h-1 w-full bg-blue-500 rounded-b opacity-0 group-hover:opacity-100 transition-opacity"></div>
      </div>
      
      <!-- Products Button -->
      <div class="group m-2">
        <button class="px-6 py-3 bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 rounded-lg text-gray-700 dark:text-gray-200 font-medium border border-gray-400 dark:border-gray-600 shadow-md hover:shadow-inner hover:translate-y-0.5 active:shadow-inner active:translate-y-1 transition-all duration-150 flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-green-500 dark:text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
          </svg>
          Products
        </button>
        <div class="h-1 w-full bg-green-500 rounded-b opacity-0 group-hover:opacity-100 transition-opacity"></div>
      </div>
      
      <!-- Services Button -->
      <div class="group m-2">
        <button class="px-6 py-3 bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 rounded-lg text-gray-700 dark:text-gray-200 font-medium border border-gray-400 dark:border-gray-600 shadow-md hover:shadow-inner hover:translate-y-0.5 active:shadow-inner active:translate-y-1 transition-all duration-150 flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-purple-500 dark:text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
          </svg>
          Services
        </button>
        <div class="h-1 w-full bg-purple-500 rounded-b opacity-0 group-hover:opacity-100 transition-opacity"></div>
      </div>
    </div>
    
    <!-- User Profile - Mimicking an ID badge -->
    <div class="m-2 flex items-center bg-gradient-to-r from-blue-100 to-blue-50 dark:from-blue-900 dark:to-blue-800 p-2 rounded-lg border border-blue-200 dark:border-blue-700 shadow">
      <div class="relative">
        <img src="https://randomuser.me/api/portraits/men/42.jpg" alt="User" class="w-10 h-10 rounded-full object-cover border-2 border-blue-300 dark:border-blue-600">
        <div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 border-2 border-white dark:border-gray-800 rounded-full"></div>
      </div>
      <div class="ml-2">
        <div class="text-sm font-semibold text-gray-800 dark:text-gray-200">John Doe</div>
        <div class="text-xs text-gray-600 dark:text-gray-400">Admin Panel</div>
      </div>
    </div>
  </div>
  
  <!-- Mobile Menu Toggle Button - Styled as a switch -->
  <div class="md:hidden mt-2 flex justify-center">
    <div class="relative w-16 h-8 bg-gray-300 dark:bg-gray-700 rounded-full shadow-inner border border-gray-400 dark:border-gray-600 flex items-center p-1 cursor-pointer">
      <div class="absolute left-1 w-6 h-6 bg-gradient-to-br from-white to-gray-200 dark:from-gray-600 dark:to-gray-800 rounded-full shadow transform transition-transform border border-gray-300 dark:border-gray-500"></div>
      <div class="w-full flex justify-between text-xs px-1 font-bold">
        <span class="text-gray-700 dark:text-gray-300">|</span>
        <span class="text-gray-700 dark:text-gray-300">|</span>
      </div>
    </div>
  </div>
</nav>