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

Apply liquid glass to pantry view
All checks were successful
Build and Deploy / build-and-push (push) Successful in 30s
Details

Browse Source
This commit is contained in:
Rafał
2026-04-22 19:49:29 +02:00
parent 120959365e
commit b9538a35b6
5 changed files with 251 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
js/ui/bottomNav.js
View File

@@ -2,8 +2,8 @@ export function getBottomNavHTML() {
return `
<nav id="app-bottom-nav" aria-label="Główna nawigacja">
<div id="app-bottom-nav-dock" class="bottom-dock">
<button type="button" id="recipe-nav-toggle" class="recipe-nav-toggle" aria-label="Otwórz menu katalogu" aria-expanded="false" aria-controls="app-bottom-nav-dock">
<i class="fas fa-book-open" aria-hidden="true"></i>
<button type="button" id="recipe-nav-toggle" class="recipe-nav-toggle" aria-label="Otwórz menu" aria-expanded="false" aria-controls="app-bottom-nav-dock">
<i id="recipe-nav-toggle-icon" class="fas fa-book-open" aria-hidden="true"></i>
</button>
<div class="nav-slot">
<button type="button" data-tab="planner" id="nav-planner" class="nav-tab is-active" aria-label="Planer" aria-current="page">
@@ -43,6 +43,9 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
if (!main || !planner || !pantry || !shopping || !nav) return;
const TABS = ['recipes', 'planner', 'pantry', 'shopping'];
const COLLAPSED_TABS = new Set(['recipes', 'pantry']);
const COLLAPSED_TAB_ICON = { recipes: 'fa-book-open', pantry: 'fa-warehouse' };
const COLLAPSED_TAB_LABEL = { recipes: 'Otwórz menu katalogu', pantry: 'Otwórz menu spiżarni' };
let isRecipeMenuOpen = false;
let previousTab = 'planner';
let collapseTimer = null;
@@ -86,37 +89,51 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
document.documentElement.style.setProperty('--recipe-controls-lift', `${controlsLift}px`);
};
const updateToggleForTab = (tab) => {
const icon = document.getElementById('recipe-nav-toggle-icon');
const button = document.getElementById('recipe-nav-toggle');
const nextIcon = COLLAPSED_TAB_ICON[tab];
if (icon && nextIcon) {
icon.className = `fas ${nextIcon}`;
}
if (button && COLLAPSED_TAB_LABEL[tab]) {
button.setAttribute('aria-label', COLLAPSED_TAB_LABEL[tab]);
}
};
const setRecipeMenuOpen = (open) => {
syncRecipeNavMetrics();
window.clearTimeout(collapseTimer);
isRecipeMenuOpen = open;
nav.classList.remove('is-recipes-collapsing');
nav.classList.toggle('is-recipes-menu-open', open);
document.documentElement.classList.toggle('is-recipes-menu-open', open);
nav.classList.remove('is-nav-collapsing');
nav.classList.toggle('is-nav-menu-open', open);
document.documentElement.classList.toggle('is-nav-menu-open', open);
document.getElementById('recipe-nav-toggle')?.setAttribute('aria-expanded', open ? 'true' : 'false');
};
const apply = (tab) => {
const wasRecipeTab = previousTab === 'recipes';
const wasCollapsedTab = COLLAPSED_TABS.has(previousTab);
const isCollapsedTab = COLLAPSED_TABS.has(tab);
main.classList.toggle('hidden', tab !== 'recipes');
planner.classList.toggle('hidden', tab !== 'planner');
pantry.classList.toggle('hidden', tab !== 'pantry');
shopping.classList.toggle('hidden', tab !== 'shopping');
nav.classList.toggle('is-recipes-tab', tab === 'recipes');
nav.classList.toggle('is-collapsed-tab', isCollapsedTab);
updateToggleForTab(tab);
syncRecipeNavMetrics();
setRecipeMenuOpen(false);
if (tab === 'recipes' && !wasRecipeTab) {
nav.classList.add('is-recipes-menu-open', 'is-recipes-collapsing');
document.documentElement.classList.add('is-recipes-menu-open');
if (isCollapsedTab && (!wasCollapsedTab || tab !== previousTab)) {
nav.classList.add('is-nav-menu-open', 'is-nav-collapsing');
document.documentElement.classList.add('is-nav-menu-open');
document.getElementById('recipe-nav-toggle')?.setAttribute('aria-expanded', 'false');
requestAnimationFrame(() => {
requestAnimationFrame(() => {
requestAnimationFrame(() => {
nav.classList.remove('is-recipes-menu-open');
document.documentElement.classList.remove('is-recipes-menu-open');
nav.classList.remove('is-nav-menu-open');
document.documentElement.classList.remove('is-nav-menu-open');
collapseTimer = window.setTimeout(() => {
nav.classList.remove('is-recipes-collapsing');
nav.classList.remove('is-nav-collapsing');
}, 500);
});
});
@@ -147,6 +164,8 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
e.stopPropagation();
setRecipeMenuOpen(!isRecipeMenuOpen);
window.closeRecipeSearch?.();
window.closePantrySearch?.();
window.closePantryFilter?.();
window.closeFilters?.();
return;
}
@@ -158,7 +177,7 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
});
document.addEventListener('click', (e) => {
if (!isRecipeMenuOpen || !nav.classList.contains('is-recipes-tab')) return;
if (!isRecipeMenuOpen || !nav.classList.contains('is-collapsed-tab')) return;
if (e.composedPath().includes(nav)) return;
setRecipeMenuOpen(false);
});