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

Redesign menu
All checks were successful
Build and Deploy / build-and-push (push) Successful in 27s
Details

Browse Source
This commit is contained in:
Rafał
2026-04-22 22:53:24 +02:00
parent ded24b53b4
commit 53a7212dfe
5 changed files with 271 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
js/ui/bottomNav.js
View File

@@ -43,10 +43,13 @@ 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_TABS = new Set();
const EXTRA_CONTROL_SLOTS = { recipes: 2, pantry: 2, shopping: 1 };
const DOUBLE_COMPACT_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 activeTab = 'planner';
let previousTab = 'planner';
let collapseTimer = null;
@@ -67,24 +70,27 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
const columnGap = (isCompact ? 0.05 : 0.06) * rootFontSize;
const dockLeft = navPadLeft + ((navContentWidth - dockWidth) / 2);
const controlSize = (isCompact ? 2.95 : 3.05) * rootFontSize;
const expandedDockHeight = (isCompact ? 3.48 : 3.72) * rootFontSize;
const expandedDockHeight = controlSize;
const controlGap = 0.5 * rootFontSize;
const controlsLift = Math.max(0, (expandedDockHeight - controlSize) / 2);
const collapsedDockWidth = controlSize;
const collapsedSlotWidth = Math.max(32, collapsedDockWidth - padLeft - padRight);
const filterLeft = Math.max(
dockLeft + collapsedDockWidth + controlGap,
dockLeft + dockWidth - padRight - controlSize,
);
const controlCluster = controlSize + controlGap;
const compactExtraWidth = (EXTRA_CONTROL_SLOTS[activeTab] || 0) * controlCluster;
const filterLeft = dockLeft + dockWidth - controlSize;
const searchButtonLeft = filterLeft - controlGap - controlSize;
const searchRight = Math.max(16, nav.clientWidth - filterLeft + controlGap);
nav.style.setProperty('--recipe-dock-width', `${dockWidth}px`);
nav.style.setProperty('--recipe-collapsed-dock-width', `${collapsedDockWidth}px`);
nav.style.setProperty('--recipe-toggle-size', `${collapsedSlotWidth}px`);
nav.style.setProperty('--nav-compact-extra-width', `${compactExtraWidth}px`);
nav.style.setProperty('--nav-compact-translate-x', `${compactExtraWidth * -0.5}px`);
document.documentElement.style.setProperty('--recipe-dock-width', `${dockWidth}px`);
document.documentElement.style.setProperty('--catalog-menu-left', `${dockLeft}px`);
document.documentElement.style.setProperty('--catalog-menu-width', `${collapsedDockWidth}px`);
document.documentElement.style.setProperty('--catalog-filter-left', `${filterLeft}px`);
document.documentElement.style.setProperty('--catalog-search-btn-left', `${searchButtonLeft}px`);
document.documentElement.style.setProperty('--catalog-search-right', `${searchRight}px`);
document.documentElement.style.setProperty('--recipe-control-size', `${controlSize}px`);
document.documentElement.style.setProperty('--recipe-controls-lift', `${controlsLift}px`);
@@ -115,11 +121,16 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
const apply = (tab) => {
const wasCollapsedTab = COLLAPSED_TABS.has(previousTab);
const isCollapsedTab = COLLAPSED_TABS.has(tab);
const isCompactTab = (EXTRA_CONTROL_SLOTS[tab] || 0) > 0;
const isDoubleCompact = DOUBLE_COMPACT_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-collapsed-tab', isCollapsedTab);
nav.classList.toggle('is-compact-tab', isCompactTab);
nav.classList.toggle('is-double-compact', isDoubleCompact);
activeTab = tab;
updateToggleForTab(tab);
syncRecipeNavMetrics();
setRecipeMenuOpen(false);
@@ -167,6 +178,8 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
window.closeRecipeSearch?.();
window.closePantrySearch?.();
window.closePantryFilter?.();
window.closeShoppingCalendar?.();
window.closeShoppingBoughtPopup?.();
window.closeFilters?.();
return;
}