CCHub Logo CCHub Tailwind Collection
Komponenten Navigations-Komponenten RetroDashboardNavigation

RetroDashboardNavigation

Eine komplexe Dashboard-Navigationskomponente im Retro-Stil mit triadischem Farbschema, die für die Datenvisualisierung und Bedienfelder entwickelt wurde. Mit responsivem Design, Unterstützung für den Dunkelmodus und mehreren interaktiven Elementen, die von der Ästhetik der 80er/90er Jahre inspiriert sind.

Vorschau

HTML-Code 

<header class="bg-[#FDB515] p-4 text-[#006400] dark:bg-[#00008B] dark:text-[#FDB515] shadow-lg font-mono tracking-widest relative z-50">
  <div class="container mx-auto flex flex-col md:flex-row items-center justify-between">
    <div class="flex items-center justify-between w-full md:w-auto mb-4 md:mb-0">
      <a href="#" class="text-2xl font-bold uppercase flex items-center group">
        <span class="text-4xl leading-none mr-2 transform group-hover:scale-110 transition-transform duration-300">&#9650;</span>
        <span class="block relative group-hover:text-[#FFB5E8] transition-colors duration-300">
          Synth<span class="text-[#006400] dark:text-[#FFB5E8]">Net</span>
          <span class="absolute top-0 left-0 w-full h-full text-stroke-thin text-[#FFB5E8] opacity-0 group-hover:opacity-100 transition-opacity duration-300" style="-webkit-text-stroke: 1px currentColor;">SynthNet</span>
        </span>
      </a>
      <button id="mobile-menu-button" class="md:hidden focus:outline-none focus:ring-4 focus:ring-[#006400] dark:focus:ring-[#FFB5E8] rounded-md transition-all duration-200">
        <svg class="w-8 h-8 text-[#006400] dark:text-[#FFB5E8] transition-colors duration-200" 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>
    </div>

    <nav id="main-navigation" class="hidden md:flex flex-col md:flex-row items-center md:space-x-8 lg:space-x-12 w-full md:w-auto transition-all duration-300 ease-in-out md:block">
      <a href="#" class="nav-item text-lg relative group overflow-hidden py-2 md:py-0 w-full text-center md:w-auto">
        Dashboard
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-[#FFB5E8] transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
        <span class="absolute top-0 right-0 h-full w-0.5 bg-[#FFB5E8] transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-top"></span>
      </a>
      <a href="#" class="nav-item text-lg relative group overflow-hidden py-2 md:py-0 w-full text-center md:w-auto">
        Analytics
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-[#FFB5E8] transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
        <span class="absolute top-0 right-0 h-full w-0.5 bg-[#FFB5E8] transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-top"></span>
      </a>
      <a href="#" class="nav-item text-lg relative group overflow-hidden py-2 md:py-0 w-full text-center md:w-auto">
        Reports
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-[#FFB5E8] transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
        <span class="absolute top-0 right-0 h-full w-0.5 bg-[#FFB5E8] transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-top"></span>
      </a>
      <div class="relative group py-2 md:py-0 w-full text-center md:w-auto">
        <button class="nav-item text-lg flex items-center justify-center w-full md:w-auto relative focus:outline-none focus:ring-4 focus:ring-[#006400] dark:focus:ring-[#FFB5E8] rounded-md transition-all duration-200">
          Settings
          <svg class="w-5 h-5 ml-1 transition-transform group-hover:rotate-90 duration-300" 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>
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-[#FFB5E8] transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
          <span class="absolute top-0 right-0 h-full w-0.5 bg-[#FFB5E8] transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-top"></span>
        </button>
        <div class="dropdown-menu absolute hidden top-full left-1/2 -translate-x-1/2 mt-2 w-48 bg-[#FDB515] dark:bg-[#00008B] dark:text-[#FFB5E8] border border-[#006400] dark:border-[#FFB5E8] shadow-lg rounded-md overflow-hidden animate-slide-down-fade origin-top-left group-hover:block transition-all duration-300 ease-in-out md:min-w-max">
          <a href="#" class="block px-4 py-2 text-sm hover:bg-[#FFB5E8] hover:text-[#006400] dark:hover:bg-[#FFB5E8] dark:hover:text-[#00008B] transition-colors duration-200">User Profile</a>
          <a href="#" class="block px-4 py-2 text-sm hover:bg-[#FFB5E8] hover:text-[#006400] dark:hover:bg-[#FFB5E8] dark:hover:text-[#00008B] transition-colors duration-200">System Prefs</a>
          <hr class="border-[#006400] dark:border-[#FFB5E8] opacity-50">
          <a href="#" class="block px-4 py-2 text-sm hover:bg-[#FFB5E8] hover:text-[#006400] dark:hover:bg-[#FFB5E8] dark:hover:text-[#00008B] transition-colors duration-200">Logout</a>
        </div>
      </div>
    </nav>

    <div class="flex items-center space-x-4 ml-0 md:ml-auto mt-4 md:mt-0 w-full md:w-auto justify-center md:justify-end">
      <div class="relative group">
        <button class="p-2 rounded-full bg-[#006400] text-[#FDB515] dark:bg-[#FFB5E8] dark:text-[#00008B] shadow-md hover:scale-105 duration-200 focus:outline-none focus:ring-4 focus:ring-[#FFB5E8] dark:focus:ring-[#006400]">
          <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-0 right-0 w-3 h-3 bg-red-500 rounded-full text-xs text-white flex items-center justify-center -mt-1 -mr-1 border border-[#FDB515] dark:border-[#00008B] animate-pulse">2</span>
        </button>
        <span class="tooltip-message absolute hidden group-hover:block bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-black text-white text-xs rounded shadow-lg whitespace-nowrap animate-fade-in-up transition-opacity duration-200">Notifications</span>
      </div>
      <div class="relative group">
        <img src="https://randomuser.me/api/portraits/men/84.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-[#006400] dark:border-[#FFB5E8] cursor-pointer hover:border-[#FFB5E8] dark:hover:border-[#006400] transition-colors duration-200 shadow-md hover:scale-105 duration-200" />
        <span class="tooltip-message absolute hidden group-hover:block bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-black text-white text-xs rounded shadow-lg whitespace-nowrap animate-fade-in-up transition-opacity duration-200">Profile</span>
      </div>
      <button id="dark-mode-toggle" class="p-2 rounded-full bg-[#006400] text-[#FDB515] dark:bg-[#FFB5E8] dark:text-[#00008B] shadow-md hover:scale-105 duration-200 focus:outline-none focus:ring-4 focus:ring-[#FFB5E8] dark:focus:ring-[#006400] flex items-center justify-center">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path class="sun-icon" d="M12 3v1m0 16v1m9-9h1M3 12H2m15.325-4.675l-.707-.707M6.381 6.381l-.707-.707m11.314 11.314l-.707.707m-9.192 0l-.707.707M12 7a5 5 0 100 10 5 5 0 000-10z"></path>
          <path class="moon-icon hidden" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
        </svg>
        <span class="sr-only">Toggle Dark Mode</span>
      </button>
    </div>
  </div>
</header>

<style>
  @keyframes slide-down-fade {
    from { opacity: 0; transform: translateY(-10px) translateX(-50%); }
    to { opacity: 1; transform: translateY(0) translateX(-50%); }
  }

  @keyframes fade-in-up {
    from { opacity: 0; transform: translateY(10px) translateX(-50%); }
    to { opacity: 1; transform: translateY(0) translateX(-50%); }
  }

  .animate-slide-down-fade {
    animation: slide-down-fade 0.3s ease-out forwards;
  }
  .animate-fade-in-up {
    animation: fade-in-up 0.2s ease-out forwards;
  }

  /* Retro text stroke effect for branding */
  .text-stroke-thin {
    -webkit-text-stroke: 0.5px currentColor;
    text-stroke: 0.5px currentColor;
  }

  /* Mobile menu responsiveness (JS controlled visibility) */
  @media (max-width: 767px) {
    .nav-item {
      /* Ensures full width clickable area on mobile */
      display: block;
      width: 100%;
      padding-left: 0;
      padding-right: 0;
      margin-bottom: 0.5rem; /* spacing between items */
      background-color: rgba(255, 255, 255, 0.1); /* light background for mobile items */
      border-radius: 0.25rem;
    }
    .dark .nav-item {
      background-color: rgba(0, 0, 0, 0.1);
    }
    .nav-item:hover {
      background-color: rgba(255, 255, 255, 0.2);
    }
     .dark .nav-item:hover {
      background-color: rgba(0, 0, 0, 0.2);
    }

    .dropdown-menu {
        position: static !important; /* override absolute positioning */
        transform: none !important; /* override transform */
        width: 100% !important; /* full width */
        margin-top: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background-color: transparent !important;
    }
    .dropdown-menu a {
        padding-left: 2.5rem; /* indent dropdown items */
    }
  }

</style>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mainNavigation = document.getElementById('main-navigation');
    const darkModeToggle = document.getElementById('dark-mode-toggle');
    const sunIcon = darkModeToggle.querySelector('.sun-icon');
    const moonIcon = darkModeToggle.querySelector('.moon-icon');

    // Mobile menu toggle
    mobileMenuButton.addEventListener('click', () => {
      mainNavigation.classList.toggle('hidden');
      mainNavigation.classList.toggle('flex');
      if (mainNavigation.classList.contains('flex')) {
        mainNavigation.style.flexDirection = 'column'; // Ensure vertical stacking on mobile
      }
    });

    // Dark mode toggle
    const enableDarkMode = () => {
      document.documentElement.classList.add('dark');
      localStorage.setItem('theme', 'dark');
      sunIcon.classList.add('hidden');
      moonIcon.classList.remove('hidden');
    };

    const disableDarkMode = () => {
      document.documentElement.classList.remove('dark');
      localStorage.setItem('theme', 'light');
      sunIcon.classList.remove('hidden');
      moonIcon.classList.add('hidden');
    };

    // Initial theme setup
    if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
      enableDarkMode();
    } else {
      disableDarkMode();
    }

    darkModeToggle.addEventListener('click', () => {
      if (document.documentElement.classList.contains('dark')) {
        disableDarkMode();
      } else {
        enableDarkMode();
      }
    });
  });
</script>

Verwandte Komponenten

Navigationskomponente

Eine reaktionsschnelle Navigationskomponente, die mit Mikrointeraktionen entwickelt wurde und ansprechende Animationen bietet, die auf Benutzeraktionen basieren und sowohl helle als auch dunkle Themen unterstützen. Die Komponente enthält einen Profil-Avatar, Navigationslinks und Hover-Effekte.

Offen

Brutalistische soziale Navigation

Eine einfache, brutalistische Navigationskomponente für Social Media mit Komplementärfarben. Beinhaltet Unterstützung für responsives Design und Dunkelmodus.

Offen

Navigationskomponente 43

Eine reaktionsschnelle Navigationskomponente, die skeuomorphen Designprinzipien folgt, mit digitalen Elementen, die ihre realen Gegenstücke nachahmen, mit Unterstützung für dunkle Themen.

Offen