barcode-gen/bottom-nav.js at master · KabriAcid/barcode-gen · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// Bottom navigation logic
function renderBottomNav(active) {
  // Remove any existing nav
  const existingNav = document.getElementById("bottom-nav");
  if (existingNav) existingNav.remove();

  const nav = document.createElement("nav");
  nav.id = "bottom-nav";
  nav.className =
    "fixed bottom-0 left-1/2 transform -translate-x-1/2 w-full max-w-2xl bg-white border-t border-gray-200 shadow-lg flex justify-between items-center py-2 px-6 rounded-md z-50";
  nav.style.margin = "0 auto";
  nav.style.paddingLeft = "16px";
  nav.style.paddingRight = "16px";
  nav.innerHTML = `
    <a href="generate.html" class="flex flex-col items-center text-xs ${
      active === "home" ? "text-primary-500" : "text-gray-500"
    }">
      <i data-lucide="home" class="mb-1" style="width:24px;height:24px;"></i>
      Home
    </a>
    <a href="history.html" class="flex flex-col items-center text-xs ${
      active === "history" ? "text-primary-500" : "text-gray-500"
    }">
      <i data-lucide="history" class="mb-1" style="width:24px;height:24px;"></i>
      History
    </a>
    <a href="profile.html" class="flex flex-col items-center text-xs ${
      active === "profile" ? "text-primary-500" : "text-gray-500"
    }">
      <i data-lucide="user" class="mb-1" style="width:24px;height:24px;"></i>
      Profile
    </a>
  `;
  document.body.appendChild(nav);
  if (window.lucide && typeof window.lucide.createIcons === "function") {
    window.lucide.createIcons();
  }
}