bpeterso2000 · August 7, 2025 00:52
diff --git a/daisyui_navbar.html b/daisyui_navbar.html
 <!DOCTYPE html>
 <html lang="en" data-theme="dark">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>DaisyUI Custom Navbar</title>
  
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap" rel="stylesheet">
  
  <!-- DaisyUI and Tailwind CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css" rel="stylesheet" type="text/css" />
  <script src="https://cdn.tailwindcss.com"></script>
  
  <style>
    body {
      font-family: 'Inter', sans-serif;
    }
    
    .custom-navbar {
      background-color: #1a2535;
      padding: 10px 20px;
    }
    
    .app-name {
      color: #d6b94a;
      font-weight: 300;
      background-color: #273449;
      padding: 8px 16px;
      border-radius: 6px;
      margin-right: 24px;
    }
    
    .nav-link {
      color: #e5e7eb;
      padding: 15px 20px;
      text-decoration: none;
      border-radius: 4px;
    }
    
    .nav-link:hover {
      background-color: #2d3748;
    }
    
    .custom-dropdown {
      position: relative;
    }
    
    .custom-dropdown:hover .dropdown-content {
      display: block;
    }
    
    .dropdown-content {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      background-color: #374151;
      min-width: 200px;
      border-radius: 4px;
      box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    }
    
    .dropdown-content a {
      display: block;
      padding: 10px 20px;
      color: #e5e7eb;
      text-decoration: none;
    }
    
    .dropdown-content a:hover {
      background-color: #2d3748;
    }
    
    /* Mobile hamburger menu */
    .hamburger {
      color: #e5e7eb;
      font-size: 24px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
    }
    
    .mobile-menu {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      background-color: #1a2535;
      flex-direction: column;
      z-index: 1000;
    }
    
    .mobile-menu.active {
      display: flex;
    }
    
    .mobile-menu .nav-link {
      width: 100%;
      text-align: left;
      border-radius: 0;
    }
    
    .mobile-dropdown-content {
      display: none;
      background-color: #374151;
      width: 100%;
      flex-direction: column;
    }
    
    .mobile-dropdown.active .mobile-dropdown-content {
      display: flex;
    }
    
    .mobile-dropdown-content a {
      padding: 10px 20px;
      text-align: left;
    }

    /* Hide mobile menu when screen is wider than 768px */
    @media (min-width: 768px) {
      .mobile-menu {
        display: none !important;
      }
    }
  </style>
 </head>
 <body class="bg-base-200">

  <!-- Navbar -->
  <nav class="custom-navbar relative">
    <div class="flex items-center justify-between">
      <!-- App Name -->
      <div class="app-name">
        Your App Name
      </div>
      
      <!-- Desktop Menu -->
      <ul class="hidden md:flex items-center">
        <li><a href="#" class="nav-link">Item 1</a></li>
        <li class="custom-dropdown">
          <a href="#" class="nav-link">Parent</a>
          <ul class="dropdown-content">
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li>
          </ul>
        </li>
        <li><a href="#" class="nav-link">Item 3</a></li>
      </ul>
      
      <!-- Hamburger Menu Button -->
      <button class="hamburger md:hidden" onclick="toggleMobileMenu()">
        ☰
      </button>
    </div>
    
    <!-- Mobile Menu -->
    <div class="mobile-menu" id="mobileMenu">
      <a href="#" class="nav-link">Item 1</a>
      <div class="mobile-dropdown">
        <a href="#" class="nav-link" onclick="toggleMobileDropdown(event)">Parent</a>
        <div class="mobile-dropdown-content">
          <a href="#" class="nav-link">Submenu 1</a>
          <a href="#" class="nav-link">Submenu 2</a>
        </div>
      </div>
      <a href="#" class="nav-link">Item 3</a>
    </div>
  </nav>

  <!-- Content -->
  <div class="text-center mt-10">
    <h1 class="text-3xl font-bold mb-4 text-white">🌼 Welcome to Your App!</h1>
    <button class="btn btn-primary">Click Me</button>
  </div>

  <script>
    function toggleMobileMenu() {
      const mobileMenu = document.getElementById('mobileMenu');
      mobileMenu.classList.toggle('active');
    }
    
    function toggleMobileDropdown(event) {
      event.preventDefault();
      const dropdown = event.target.parentElement;
      dropdown.classList.toggle('active');
    }

    // Close mobile menu when window is resized to desktop size
    window.addEventListener('resize', function() {
      if (window.innerWidth >= 768) {
        const mobileMenu = document.getElementById('mobileMenu');
        mobileMenu.classList.remove('active');
        
        // Also close any open mobile dropdowns
        const mobileDropdowns = document.querySelectorAll('.mobile-dropdown');
        mobileDropdowns.forEach(dropdown => {
          dropdown.classList.remove('active');
        });
      }
    });
  </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en" data-theme="dark">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>DaisyUI Custom Navbar</title>

	<!-- Google Fonts -->
	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap" rel="stylesheet">

	<!-- DaisyUI and Tailwind CSS -->
	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css" rel="stylesheet" type="text/css" />
	<script src="https://cdn.tailwindcss.com"></script>

	<style>
	body {
	font-family: 'Inter', sans-serif;
	}

	.custom-navbar {
	background-color: #1a2535;
	padding: 10px 20px;
	}

	.app-name {
	color: #d6b94a;
	font-weight: 300;
	background-color: #273449;
	padding: 8px 16px;
	border-radius: 6px;
	margin-right: 24px;
	}

	.nav-link {
	color: #e5e7eb;
	padding: 15px 20px;
	text-decoration: none;
	border-radius: 4px;
	}

	.nav-link:hover {
	background-color: #2d3748;
	}

	.custom-dropdown {
	position: relative;
	}

	.custom-dropdown:hover .dropdown-content {
	display: block;
	}

	.dropdown-content {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background-color: #374151;
	min-width: 200px;
	border-radius: 4px;
	box-shadow: 0 8px 16px rgba(0,0,0,0.2);
	}

	.dropdown-content a {
	display: block;
	padding: 10px 20px;
	color: #e5e7eb;
	text-decoration: none;
	}

	.dropdown-content a:hover {
	background-color: #2d3748;
	}

	/* Mobile hamburger menu */
	.hamburger {
	color: #e5e7eb;
	font-size: 24px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	}

	.mobile-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	background-color: #1a2535;
	flex-direction: column;
	z-index: 1000;
	}

	.mobile-menu.active {
	display: flex;
	}

	.mobile-menu .nav-link {
	width: 100%;
	text-align: left;
	border-radius: 0;
	}

	.mobile-dropdown-content {
	display: none;
	background-color: #374151;
	width: 100%;
	flex-direction: column;
	}

	.mobile-dropdown.active .mobile-dropdown-content {
	display: flex;
	}

	.mobile-dropdown-content a {
	padding: 10px 20px;
	text-align: left;
	}

	/* Hide mobile menu when screen is wider than 768px */
	@media (min-width: 768px) {
	.mobile-menu {
	display: none !important;
	}
	}
	</style>
	</head>
	<body class="bg-base-200">

	<!-- Navbar -->
	<nav class="custom-navbar relative">
	<div class="flex items-center justify-between">
	<!-- App Name -->
	<div class="app-name">
	Your App Name
	</div>

	<!-- Desktop Menu -->
	<ul class="hidden md:flex items-center">
	<li><a href="#" class="nav-link">Item 1</a></li>
	<li class="custom-dropdown">
	<a href="#" class="nav-link">Parent</a>
	<ul class="dropdown-content">
	<li><a href="#">Submenu 1</a></li>
	<li><a href="#">Submenu 2</a></li>
	</ul>
	</li>
	<li><a href="#" class="nav-link">Item 3</a></li>
	</ul>

	<!-- Hamburger Menu Button -->
	<button class="hamburger md:hidden" onclick="toggleMobileMenu()">
	☰
	</button>
	</div>

	<!-- Mobile Menu -->
	<div class="mobile-menu" id="mobileMenu">
	<a href="#" class="nav-link">Item 1</a>
	<div class="mobile-dropdown">
	<a href="#" class="nav-link" onclick="toggleMobileDropdown(event)">Parent</a>
	<div class="mobile-dropdown-content">
	<a href="#" class="nav-link">Submenu 1</a>
	<a href="#" class="nav-link">Submenu 2</a>
	</div>
	</div>
	<a href="#" class="nav-link">Item 3</a>
	</div>
	</nav>

	<!-- Content -->
	<div class="text-center mt-10">
	<h1 class="text-3xl font-bold mb-4 text-white">🌼 Welcome to Your App!</h1>
	<button class="btn btn-primary">Click Me</button>
	</div>

	<script>
	function toggleMobileMenu() {
	const mobileMenu = document.getElementById('mobileMenu');
	mobileMenu.classList.toggle('active');
	}

	function toggleMobileDropdown(event) {
	event.preventDefault();
	const dropdown = event.target.parentElement;
	dropdown.classList.toggle('active');
	}

	// Close mobile menu when window is resized to desktop size
	window.addEventListener('resize', function() {
	if (window.innerWidth >= 768) {
	const mobileMenu = document.getElementById('mobileMenu');
	mobileMenu.classList.remove('active');

	// Also close any open mobile dropdowns
	const mobileDropdowns = document.querySelectorAll('.mobile-dropdown');
	mobileDropdowns.forEach(dropdown => {
	dropdown.classList.remove('active');
	});
	}
	});
	</script>

	</body>
	</html>