ulfr/recipe-mockup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Floating menu and search bar
Some checks failed
Build and Deploy / build-and-push (push) Failing after 1m16s
Details

Browse Source
This commit is contained in:
Rafał
2026-04-06 12:40:56 +02:00
parent 36f9f35b0b
commit e640b34b0f
3 changed files with 189 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
js/app.js
View File

@@ -50,27 +50,33 @@ function getAppToastHTML() {
function getBottomNavHTML() {
const isDark = document.documentElement.classList.contains('dark');
return `
<nav id="app-bottom-nav" class="absolute bottom-0 left-0 right-0 w-full bg-white border-t border-gray-200 flex justify-between px-1 py-2.5 pb-6 z-20 gap-0" aria-label="Główna nawigacja">
<button type="button" data-tab="recipes" id="nav-recipes" class="nav-tab flex flex-col items-center gap-0.5 text-black flex-1 min-w-0 max-w-[5.5rem]">
<i class="fas fa-book text-base" aria-hidden="true"></i>
<span class="text-[9px] font-medium leading-tight text-center">Przepisy</span>
<nav id="app-bottom-nav" aria-label="Główna nawigacja">
<div class="bottom-dock">
<button type="button" data-tab="recipes" id="nav-recipes" class="nav-tab is-active" aria-label="Przepisy" aria-current="page">
<i class="fas fa-book" aria-hidden="true"></i>
</button>
<button type="button" data-tab="planner" id="nav-planner" class="nav-tab flex flex-col items-center gap-0.5 text-gray-500 hover:text-gray-700 flex-1 min-w-0 max-w-[5.5rem]">
<i class="far fa-calendar-alt text-base" aria-hidden="true"></i>
<span class="text-[9px] font-medium leading-tight text-center">Planer</span>
<button type="button" data-tab="planner" id="nav-planner" class="nav-tab" aria-label="Planer">
<i class="far fa-calendar-alt" aria-hidden="true"></i>
</button>
<button type="button" data-tab="pantry" id="nav-pantry" class="nav-tab flex flex-col items-center gap-0.5 text-gray-500 hover:text-gray-700 flex-1 min-w-0 max-w-[5.5rem]">
<i class="fas fa-warehouse text-base" aria-hidden="true"></i>
<span class="text-[9px] font-medium leading-tight text-center">Spiżarnia</span>
<button type="button" data-tab="pantry" id="nav-pantry" class="nav-tab" aria-label="Spiżarnia">
<i class="fas fa-warehouse" aria-hidden="true"></i>
</button>
<button type="button" id="nav-theme-toggle" class="flex flex-col items-center gap-0.5 text-gray-500 hover:text-gray-700 flex-1 min-w-0 max-w-[5.5rem]" aria-label="Przełącz tryb ciemny/jasny">
<i class="${isDark ? 'fas fa-sun' : 'fas fa-moon'} text-base" aria-hidden="true"></i>
<span class="text-[9px] font-medium leading-tight text-center">${isDark ? 'Jasny' : 'Ciemny'}</span>
<button type="button" id="nav-theme-toggle" class="nav-action" aria-label="${isDark ? 'Włącz jasny motyw' : 'Włącz ciemny motyw'}" title="${isDark ? 'Jasny motyw' : 'Ciemny motyw'}">
<i class="${isDark ? 'fas fa-sun' : 'fas fa-moon'}" aria-hidden="true"></i>
</button>
</div>
</nav>
`;
}
function syncThemeToggleButton(btn, isDark) {
if (!btn) return;
const icon = btn.querySelector('i');
if (icon) icon.className = isDark ? 'fas fa-sun' : 'fas fa-moon';
btn.setAttribute('aria-label', isDark ? 'Włącz jasny motyw' : 'Włącz ciemny motyw');
btn.title = isDark ? 'Jasny motyw' : 'Ciemny motyw';
}
function setupThemeToggle() {
const btn = document.getElementById('nav-theme-toggle');
if (!btn) return;
@@ -80,10 +86,7 @@ function setupThemeToggle() {
const isDark = html.classList.toggle('dark');
localStorage.setItem('theme', isDark ? 'dark' : 'light');
const icon = btn.querySelector('i');
const label = btn.querySelector('span');
if (icon) icon.className = isDark ? 'fas fa-sun text-base' : 'fas fa-moon text-base';
if (label) label.textContent = isDark ? 'Jasny' : 'Ciemny';
syncThemeToggleButton(btn, isDark);
const meta = document.querySelector('meta[name="theme-color"]');
if (meta) meta.setAttribute('content', isDark ? '#161513' : '#f3efe9');
@@ -97,9 +100,6 @@ function setupTabs() {
const nav = document.getElementById('app-bottom-nav');
if (!main || !planner || !pantry || !nav) return;
const activeTab = 'nav-tab flex flex-col items-center gap-0.5 text-black flex-1 min-w-0 max-w-[5.5rem]';
const idleTab = 'nav-tab flex flex-col items-center gap-0.5 text-gray-500 hover:text-gray-700 flex-1 min-w-0 max-w-[5.5rem]';
const apply = (tab) => {
main.classList.toggle('hidden', tab !== 'recipes');
planner.classList.toggle('hidden', tab !== 'planner');
@@ -111,7 +111,10 @@ function setupTabs() {
const id = btn.getAttribute('data-tab');
if (btn.hasAttribute('disabled')) return;
if (id === 'recipes' || id === 'planner' || id === 'pantry') {
btn.className = id === tab ? activeTab : idleTab;
const isActive = id === tab;
btn.classList.toggle('is-active', isActive);
if (isActive) btn.setAttribute('aria-current', 'page');
else btn.removeAttribute('aria-current');
}
});
};