CODE.

// Data menu navigasi
const navItems = [
    { id: "home", href: "home", text: "Home" },
    { id: "about", href: "about", text: "About" },
    { id: "artikel", href: "artikel", text: "Artikel" },
    { id: "main", href: "main", text: "Main" },
];

// Data menu navigasi untuk desktop
const navItemsDesktop = navItems.map(item => ({
    ...item
}));

// Data menu navigasi untuk mobile
const navItemsMobile = navItems.map(item => ({
    id: `${item.id}-mobile`,
    href: item.href,
    text: item.text
}));


document.addEventListener("DOMContentLoaded", function() {
const currentUrl = window.location.href;

// Mengisi menu desktop
const desktopNavContainer = document.getElementById('navDesktop');
navItemsDesktop.forEach(item => {
    const link = document.createElement('a');
    link.id = item.id;
    link.href = item.href;
    link.className = `inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700`;
    link.textContent = item.text;

    if (currentUrl.includes(item.href)) {
        link.classList.add("border-indigo-500", "text-gray-900");
        link.classList.remove("border-transparent");
    } else {
        link.classList.add("border-transparent");
        link.classList.remove("border-indigo-500", "text-gray-900");
    }

    desktopNavContainer.appendChild(link);
});

// Mengisi menu mobile
const mobileNavContainer = document.getElementById('navMobile');
navItemsMobile.forEach(item => {
    const link = document.createElement('a');
    link.id = item.id;
    link.href = item.href;
    link.className = `block border-l-4 py-2 pl-3 pr-4 text-base font-medium text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700`;
    link.textContent = item.text;

    if (currentUrl.includes(item.href)) {
        link.classList.add("border-indigo-500", "bg-indigo-50", "text-indigo-700");
        link.classList.remove("border-transparent");
    } else {
        link.classList.add("border-transparent");
        link.classList.remove("border-indigo-500", "bg-indigo-50", "text-indigo-700");
    }

    mobileNavContainer.appendChild(link);
});
});

document.addEventListener("DOMContentLoaded", function() {
const currentUrl = window.location.href;

Object.keys(navItemsDesktop).forEach(key => {
    if (currentUrl.includes(key)) {
        const element = document.getElementById(navItems[key]);
        if (element) {
            element.classList.add("border-b-2", "border-indigo-500", "text-gray-900");
            element.classList.remove("border-transparent");
        }
    }
});

Object.keys(navItemsMobile).forEach(key => {
    const element = document.getElementById(navItemsMobile[key]);
    if (element) {
        if (currentUrl.includes(key)) {
            element.classList.add("border-l-4", "border-indigo-500", "bg-indigo-50", "text-indigo-700");
            element.classList.remove("border-transparent", "text-gray-500");
        } else {
            element.classList.add("border-transparent", "text-gray-500");
            element.classList.remove("border-l-4", "border-indigo-500", "bg-indigo-50", "text-indigo-700");
        }
    }
});
});


// Toggle mobile menu and its background
function toggleMobileMenu() {
const mobileMenu = document.getElementById('mobile-menu');
const mobileMenuBackground = document.getElementById('mobile-menu-background');
const hamburgerIcon = document.getElementById('hamburger-icon');
const closeIcon = document.getElementById('close-icon');

// Ensure elements exist before trying to manipulate them
if (mobileMenu && hamburgerIcon && closeIcon) {
    // Toggle visibility of menu
    mobileMenu.classList.toggle('hidden');

    // Toggle background visibility if it exists
    if (mobileMenuBackground) {
        mobileMenuBackground.style.display = mobileMenu.classList.contains('hidden') ? 'none' : 'block';
    }

    // Toggle icons
    hamburgerIcon.classList.toggle('hidden');
    closeIcon.classList.toggle('hidden');
}
}

// Close mobile menu when clicking outside
document.addEventListener('click', (event) => {
const mobileMenu = document.getElementById('mobile-menu');
const mobileMenuBackground = document.getElementById('mobile-menu-background');
const mobileMenuButton = document.getElementById('mobile-menu-button');

if (mobileMenu && mobileMenuButton && (mobileMenu.contains(event.target) || mobileMenuButton.contains(event.target) || (mobileMenuBackground && mobileMenuBackground.contains(event.target)))) {
    return;
}

if (mobileMenu) {
    mobileMenu.classList.add('hidden');
}

if (mobileMenuBackground) {
    mobileMenuBackground.style.display = 'none';
}

if (document.getElementById('hamburger-icon') && document.getElementById('close-icon')) {
    document.getElementById('hamburger-icon').classList.remove('hidden');
    document.getElementById('close-icon').classList.add('hidden');
}
});
                                                

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

                                                

<div class="mt-16 sm:mt-20">
    <?php if ($result->num_rows > 0): ?>
        <div class="space-y-4">
            <?php while ($data = $result->fetch_assoc()): ?>
                <div class="flex justify-start">
                    <div class="rounded-2xl px-4 py-2 bg-zinc-200 dark:bg-zinc-700 max-w-sm">
                        <p class="text-sm text-zinc-800 dark:text-zinc-100 whitespace-pre-line">
                            <?= nl2br(htmlspecialchars($data['code'])) ?>
                        </p>
                        <p class="text-xs text-zinc-500 dark:text-zinc-400 mt-1 text-right">
                            <?= (new DateTime($data['created_at']))->format('H:i') ?>
                        </p>
                    </div>
                </div>
            <?php endwhile; ?>
        </div>
    <?php else: ?>
        <p class="text-center text-zinc-500 dark:text-zinc-400">No Code Today</p>
    <?php endif; ?>
</div>
                                                

{
  "name": "Money",
  "short_name": "Money",
  "start_url": "/index.php",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0d6efd",
  "icons": [
    {
      "src": "/img/favico.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/img/favico.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}