diff --git a/apps/calendar/apps/web/package.json b/apps/calendar/apps/web/package.json index dea7a7b9d..fed0f0356 100644 --- a/apps/calendar/apps/web/package.json +++ b/apps/calendar/apps/web/package.json @@ -55,6 +55,7 @@ "@manacore/shared-ui": "workspace:*", "@manacore/shared-utils": "workspace:*", "@manacore/shared-app-onboarding": "workspace:*", + "@sqlite.org/sqlite-wasm": "^3.49.1-build1", "@neodrag/svelte": "^2.3.3", "d3-force": "^3.0.0", "date-fns": "^4.1.0", diff --git a/apps/calendar/apps/web/src/lib/stores/navigation.ts b/apps/calendar/apps/web/src/lib/stores/navigation.ts index 59cfe67d9..0704ef93a 100644 --- a/apps/calendar/apps/web/src/lib/stores/navigation.ts +++ b/apps/calendar/apps/web/src/lib/stores/navigation.ts @@ -1,6 +1,6 @@ import { createSimpleNavigationStores } from '@manacore/shared-stores'; -export const { isSidebarMode, isNavCollapsed, isToolbarCollapsed } = createSimpleNavigationStores({ +export const { isNavCollapsed, isToolbarCollapsed } = createSimpleNavigationStores({ withToolbar: true, toolbarCollapsedDefault: false, }); diff --git a/apps/calendar/apps/web/src/routes/(app)/+layout.svelte b/apps/calendar/apps/web/src/routes/(app)/+layout.svelte index d35497da8..76a7d5e21 100644 --- a/apps/calendar/apps/web/src/routes/(app)/+layout.svelte +++ b/apps/calendar/apps/web/src/routes/(app)/+layout.svelte @@ -520,7 +520,6 @@ homeRoute="/" onToggleTheme={handleToggleTheme} {isDark} - desktopPosition="bottom" showThemeToggle={true} showThemeVariants={true} {themeVariantItems} @@ -542,13 +541,7 @@ profileHref="/profile" allAppsHref="/apps" onOpenInPanel={handleOpenInPanel} - > - {#snippet toolbarContent()} - {#if showCalendarToolbar} - - {/if} - {/snippet} - + /> {#if showCalendarToolbar} diff --git a/apps/chat/apps/web/src/lib/stores/navigation.ts b/apps/chat/apps/web/src/lib/stores/navigation.ts index 5527a3e14..e922e7ce5 100644 --- a/apps/chat/apps/web/src/lib/stores/navigation.ts +++ b/apps/chat/apps/web/src/lib/stores/navigation.ts @@ -1,3 +1,3 @@ import { createSimpleNavigationStores } from '@manacore/shared-stores'; -export const { isSidebarMode, isNavCollapsed } = createSimpleNavigationStores(); +export const { isNavCollapsed } = createSimpleNavigationStores(); diff --git a/apps/chat/apps/web/src/routes/(protected)/+layout.svelte b/apps/chat/apps/web/src/routes/(protected)/+layout.svelte index 99b236a9e..072218983 100644 --- a/apps/chat/apps/web/src/routes/(protected)/+layout.svelte +++ b/apps/chat/apps/web/src/routes/(protected)/+layout.svelte @@ -15,10 +15,7 @@ } from '@manacore/shared-theme'; import type { ThemeVariant } from '@manacore/shared-theme'; import { filterHiddenNavItems } from '@manacore/shared-theme'; - import { - isSidebarMode as sidebarModeStore, - isNavCollapsed as collapsedStore, - } from '$lib/stores/navigation'; + import { isNavCollapsed as collapsedStore } from '$lib/stores/navigation'; import { PillNavigation } from '@manacore/shared-ui'; import type { PillNavItem, PillDropdownItem } from '@manacore/shared-ui'; import { getPillAppItems } from '@manacore/shared-branding'; @@ -32,7 +29,6 @@ let { children, data }: { children: any; data: LayoutData } = $props(); let isChecking = $state(true); - let isSidebarMode = $state(false); let isCollapsed = $state(false); // Use theme store's isDark directly @@ -125,14 +121,6 @@ } } - function handleModeChange(isSidebar: boolean) { - isSidebarMode = isSidebar; - sidebarModeStore.set(isSidebar); - if (typeof localStorage !== 'undefined') { - localStorage.setItem('chat-nav-sidebar', String(isSidebar)); - } - } - function handleCollapsedChange(collapsed: boolean) { isCollapsed = collapsed; collapsedStore.set(collapsed); @@ -166,13 +154,6 @@ // Initialize theme theme.initialize(); - // Initialize sidebar mode from localStorage - const savedSidebar = localStorage.getItem('chat-nav-sidebar'); - if (savedSidebar === 'true') { - isSidebarMode = true; - sidebarModeStore.set(true); - } - // Initialize collapsed state from localStorage const savedCollapsed = localStorage.getItem('chat-nav-collapsed'); if (savedCollapsed === 'true') { @@ -213,7 +194,7 @@ {:else}
- + - -
+ +
{#if isChatPage} {@render children()} @@ -275,17 +248,7 @@ .main-content { flex: 1; - transition: all 300ms ease; - } - - /* Floating nav mode - add top padding for fixed nav */ - .main-content.floating-mode { - padding-top: 100px; - } - - /* Sidebar mode - add left padding for sidebar nav */ - .main-content.sidebar-mode { - padding-left: 180px; + padding-bottom: 100px; } /* Chat page - no content wrapper, but keep nav padding */ diff --git a/apps/clock/apps/web/src/lib/stores/navigation.ts b/apps/clock/apps/web/src/lib/stores/navigation.ts index bc4ec2a00..08ea3eeec 100644 --- a/apps/clock/apps/web/src/lib/stores/navigation.ts +++ b/apps/clock/apps/web/src/lib/stores/navigation.ts @@ -1,5 +1,5 @@ import { createSimpleNavigationStores } from '@manacore/shared-stores'; -export const { isSidebarMode, isNavCollapsed } = createSimpleNavigationStores({ +export const { isNavCollapsed } = createSimpleNavigationStores({ storageKey: 'clock', }); diff --git a/apps/clock/apps/web/src/routes/(app)/+layout.svelte b/apps/clock/apps/web/src/routes/(app)/+layout.svelte index bdeddc509..47a1bb2ce 100644 --- a/apps/clock/apps/web/src/routes/(app)/+layout.svelte +++ b/apps/clock/apps/web/src/routes/(app)/+layout.svelte @@ -24,10 +24,7 @@ } from '@manacore/shared-theme'; import type { ThemeVariant } from '@manacore/shared-theme'; import { filterHiddenNavItems } from '@manacore/shared-theme'; - import { - isSidebarMode as sidebarModeStore, - isNavCollapsed as collapsedStore, - } from '$lib/stores/navigation'; + import { isNavCollapsed as collapsedStore } from '$lib/stores/navigation'; import { getLanguageDropdownItems, getCurrentLanguageLabel } from '@manacore/shared-i18n'; import { getPillAppItems } from '@manacore/shared-branding'; import { setLocale, supportedLocales } from '$lib/i18n'; @@ -114,7 +111,6 @@ } } - let isSidebarMode = $state(false); let isCollapsed = $state(false); // Use theme store's isDark directly @@ -213,14 +209,6 @@ } } - function handleModeChange(isSidebar: boolean) { - isSidebarMode = isSidebar; - sidebarModeStore.set(isSidebar); - if (typeof localStorage !== 'undefined') { - localStorage.setItem('clock-nav-sidebar', String(isSidebar)); - } - } - function handleCollapsedChange(collapsed: boolean) { isCollapsed = collapsed; collapsedStore.set(collapsed); @@ -250,13 +238,6 @@ return; } - // Initialize sidebar mode from localStorage - const savedSidebar = localStorage.getItem('clock-nav-sidebar'); - if (savedSidebar === 'true') { - isSidebarMode = true; - sidebarModeStore.set(true); - } - // Initialize collapsed state from localStorage const savedCollapsed = localStorage.getItem('clock-nav-collapsed'); if (savedCollapsed === 'true') { @@ -291,11 +272,8 @@ currentPath={$page.url.pathname} appName="Clock" homeRoute="/" - desktopPosition={userSettings.nav?.desktopPosition || 'bottom'} onToggleTheme={handleToggleTheme} {isDark} - {isSidebarMode} - onModeChange={handleModeChange} {isCollapsed} onCollapsedChange={handleCollapsedChange} showThemeToggle={true} @@ -320,11 +298,7 @@ allAppsHref="/apps" /> -
+
{@render children()}
@@ -351,17 +325,9 @@ } .main-content { - transition: all 300ms ease; position: relative; z-index: 0; - } - - .main-content.floating-mode { - padding-top: 70px; - } - - .main-content.sidebar-mode { - padding-left: 180px; + padding-bottom: 100px; } .content-wrapper { diff --git a/apps/manacore/apps/web/src/lib/stores/navigation.ts b/apps/manacore/apps/web/src/lib/stores/navigation.ts index 5527a3e14..e922e7ce5 100644 --- a/apps/manacore/apps/web/src/lib/stores/navigation.ts +++ b/apps/manacore/apps/web/src/lib/stores/navigation.ts @@ -1,3 +1,3 @@ import { createSimpleNavigationStores } from '@manacore/shared-stores'; -export const { isSidebarMode, isNavCollapsed } = createSimpleNavigationStores(); +export const { isNavCollapsed } = createSimpleNavigationStores(); diff --git a/apps/manacore/apps/web/src/routes/(app)/+layout.svelte b/apps/manacore/apps/web/src/routes/(app)/+layout.svelte index db00801ba..8f2addaaf 100644 --- a/apps/manacore/apps/web/src/routes/(app)/+layout.svelte +++ b/apps/manacore/apps/web/src/routes/(app)/+layout.svelte @@ -17,10 +17,7 @@ import { theme } from '$lib/stores/theme'; import { authStore } from '$lib/stores/auth.svelte'; import { userSettings } from '$lib/stores/user-settings.svelte'; - import { - isSidebarMode as sidebarModeStore, - isNavCollapsed as collapsedStore, - } from '$lib/stores/navigation'; + import { isNavCollapsed as collapsedStore } from '$lib/stores/navigation'; import { getPillAppItems } from '@manacore/shared-branding'; import { onboardingStore } from '$lib/stores/onboarding.svelte'; import { OnboardingWizard } from '$lib/components/onboarding'; @@ -31,7 +28,6 @@ const appItems = getPillAppItems('manacore'); let loading = $state(true); - let isSidebarMode = $state(false); let isCollapsed = $state(false); // Get theme state @@ -121,14 +117,6 @@ } } - function handleModeChange(isSidebar: boolean) { - isSidebarMode = isSidebar; - sidebarModeStore.set(isSidebar); - if (typeof localStorage !== 'undefined') { - localStorage.setItem('manacore-nav-sidebar', String(isSidebar)); - } - } - function handleCollapsedChange(collapsed: boolean) { isCollapsed = collapsed; collapsedStore.set(collapsed); @@ -177,13 +165,6 @@ return; } - // Initialize sidebar mode from localStorage - const savedSidebar = localStorage.getItem('manacore-nav-sidebar'); - if (savedSidebar === 'true') { - isSidebarMode = true; - sidebarModeStore.set(true); - } - // Initialize collapsed state from localStorage const savedCollapsed = localStorage.getItem('manacore-nav-collapsed'); if (savedCollapsed === 'true') { @@ -239,11 +220,8 @@ onLogout={handleSignOut} onToggleTheme={handleToggleTheme} {isDark} - {isSidebarMode} - onModeChange={handleModeChange} {isCollapsed} onCollapsedChange={handleCollapsedChange} - desktopPosition={userSettings.nav?.desktopPosition || 'bottom'} showThemeToggle={true} showThemeVariants={true} {themeVariantItems} @@ -264,14 +242,8 @@ allAppsHref="/apps" /> - -
+ +
{@render children()}
diff --git a/apps/manadeck/apps/web/src/lib/stores/navigation.ts b/apps/manadeck/apps/web/src/lib/stores/navigation.ts index 5527a3e14..e922e7ce5 100644 --- a/apps/manadeck/apps/web/src/lib/stores/navigation.ts +++ b/apps/manadeck/apps/web/src/lib/stores/navigation.ts @@ -1,3 +1,3 @@ import { createSimpleNavigationStores } from '@manacore/shared-stores'; -export const { isSidebarMode, isNavCollapsed } = createSimpleNavigationStores(); +export const { isNavCollapsed } = createSimpleNavigationStores(); diff --git a/apps/manadeck/apps/web/src/routes/(app)/+layout.svelte b/apps/manadeck/apps/web/src/routes/(app)/+layout.svelte index 89d73738f..5d2a20395 100644 --- a/apps/manadeck/apps/web/src/routes/(app)/+layout.svelte +++ b/apps/manadeck/apps/web/src/routes/(app)/+layout.svelte @@ -6,10 +6,7 @@ import { authStore } from '$lib/stores/auth.svelte'; import { userSettings } from '$lib/stores/user-settings.svelte'; import { theme } from '$lib/stores/theme'; - import { - isSidebarMode as sidebarModeStore, - isNavCollapsed as collapsedStore, - } from '$lib/stores/navigation'; + import { isNavCollapsed as collapsedStore } from '$lib/stores/navigation'; import { PillNavigation } from '@manacore/shared-ui'; import type { PillNavItem, PillDropdownItem } from '@manacore/shared-ui'; import { @@ -28,7 +25,6 @@ let { children } = $props(); - let isSidebarMode = $state(false); let isCollapsed = $state(false); // Get theme state @@ -120,14 +116,6 @@ } } - function handleModeChange(isSidebar: boolean) { - isSidebarMode = isSidebar; - sidebarModeStore.set(isSidebar); - if (typeof localStorage !== 'undefined') { - localStorage.setItem('manadeck-nav-sidebar', String(isSidebar)); - } - } - function handleCollapsedChange(collapsed: boolean) { isCollapsed = collapsed; collapsedStore.set(collapsed); @@ -166,13 +154,6 @@ goto(userSettings.startPage, { replaceState: true }); } - // Initialize sidebar mode from localStorage - const savedSidebar = localStorage.getItem('manadeck-nav-sidebar'); - if (savedSidebar === 'true') { - isSidebarMode = true; - sidebarModeStore.set(true); - } - // Initialize collapsed state from localStorage const savedCollapsed = localStorage.getItem('manadeck-nav-collapsed'); if (savedCollapsed === 'true') { @@ -204,11 +185,8 @@ onLogout={handleSignOut} onToggleTheme={handleToggleTheme} {isDark} - {isSidebarMode} - onModeChange={handleModeChange} {isCollapsed} onCollapsedChange={handleCollapsedChange} - desktopPosition={userSettings.nav?.desktopPosition || 'bottom'} showThemeToggle={true} showThemeVariants={true} {themeVariantItems} @@ -229,14 +207,8 @@ allAppsHref="/apps" /> - -
+ +
{@render children()}
diff --git a/apps/matrix/apps/web/src/lib/stores/navigation.svelte.ts b/apps/matrix/apps/web/src/lib/stores/navigation.svelte.ts index f15f25afd..7be30fcd8 100644 --- a/apps/matrix/apps/web/src/lib/stores/navigation.svelte.ts +++ b/apps/matrix/apps/web/src/lib/stores/navigation.svelte.ts @@ -3,32 +3,9 @@ import { browser } from '$app/environment'; -// Check if on mobile/tablet width -function checkSidebarMode(): boolean { - if (!browser) return false; - return window.innerWidth < 1024; -} - // Create reactive stores using Svelte 5 runes -let _isSidebarMode = $state(checkSidebarMode()); let _isNavCollapsed = $state(false); -// Listen for resize events -if (browser) { - window.addEventListener('resize', () => { - _isSidebarMode = checkSidebarMode(); - }); -} - -export const isSidebarMode = { - get value() { - return _isSidebarMode; - }, - set(value: boolean) { - _isSidebarMode = value; - }, -}; - export const isNavCollapsed = { get value() { return _isNavCollapsed; diff --git a/apps/matrix/apps/web/src/routes/(app)/+layout.svelte b/apps/matrix/apps/web/src/routes/(app)/+layout.svelte index ba07a83ed..08184ef6f 100644 --- a/apps/matrix/apps/web/src/routes/(app)/+layout.svelte +++ b/apps/matrix/apps/web/src/routes/(app)/+layout.svelte @@ -19,10 +19,7 @@ EXTENDED_THEME_VARIANTS, } from '@manacore/shared-theme'; import type { ThemeVariant } from '@manacore/shared-theme'; - import { - isSidebarMode as sidebarModeStore, - isNavCollapsed as collapsedStore, - } from '$lib/stores/navigation.svelte'; + import { isNavCollapsed as collapsedStore } from '$lib/stores/navigation.svelte'; import { PillNavigation } from '@manacore/shared-ui'; import type { PillNavItem, PillDropdownItem } from '@manacore/shared-ui'; import { getPillAppItems } from '@manacore/shared-branding'; @@ -86,7 +83,6 @@ let initError = $state(null); // Navigation state - let isSidebarMode = $state(false); let isCollapsed = $state(false); // Theme state @@ -145,14 +141,6 @@ } } - function handleModeChange(isSidebar: boolean) { - isSidebarMode = isSidebar; - sidebarModeStore.set(isSidebar); - if (typeof localStorage !== 'undefined') { - localStorage.setItem('matrix-nav-sidebar', String(isSidebar)); - } - } - function handleCollapsedChange(collapsed: boolean) { isCollapsed = collapsed; collapsedStore.set(collapsed); @@ -176,13 +164,6 @@ } onMount(async () => { - // Initialize sidebar mode from localStorage - const savedSidebar = localStorage.getItem('matrix-nav-sidebar'); - if (savedSidebar === 'true') { - isSidebarMode = true; - sidebarModeStore.set(true); - } - // Initialize collapsed state from localStorage const savedCollapsed = localStorage.getItem('matrix-nav-collapsed'); if (savedCollapsed === 'true') { @@ -333,11 +314,8 @@ homeRoute="/chat" onToggleTheme={handleToggleTheme} {isDark} - {isSidebarMode} - onModeChange={handleModeChange} {isCollapsed} onCollapsedChange={handleCollapsedChange} - desktopPosition="bottom" showThemeToggle={true} showThemeVariants={true} {themeVariantItems} @@ -358,11 +336,7 @@ /> -
+
{@render children()}
@@ -385,11 +359,6 @@ flex: 1; min-height: 0; overflow: hidden; - transition: all 300ms ease; - } - - /* Sidebar mode - add left padding for sidebar nav */ - .main-content.sidebar-mode { - padding-left: 180px; + padding-bottom: 80px; } diff --git a/apps/picture/apps/web/src/routes/app/+layout.svelte b/apps/picture/apps/web/src/routes/app/+layout.svelte index 64d4ce04e..23abea5e4 100644 --- a/apps/picture/apps/web/src/routes/app/+layout.svelte +++ b/apps/picture/apps/web/src/routes/app/+layout.svelte @@ -29,24 +29,16 @@ let { children } = $props(); // PillNav state - let isSidebarMode = $state(false); let isCollapsed = $state(false); // Load persisted nav state $effect(() => { if (browser) { - const savedSidebarMode = localStorage.getItem('picture-nav-sidebar'); const savedCollapsed = localStorage.getItem('picture-nav-collapsed'); - if (savedSidebarMode !== null) isSidebarMode = savedSidebarMode === 'true'; if (savedCollapsed !== null) isCollapsed = savedCollapsed === 'true'; } }); - function handleModeChange(isSidebar: boolean) { - isSidebarMode = isSidebar; - if (browser) localStorage.setItem('picture-nav-sidebar', String(isSidebar)); - } - function handleCollapsedChange(collapsed: boolean) { isCollapsed = collapsed; if (browser) localStorage.setItem('picture-nav-collapsed', String(collapsed)); @@ -263,11 +255,8 @@ onLogout={handleLogout} onToggleTheme={handleToggleTheme} isDark={theme.isDark} - {isSidebarMode} - onModeChange={handleModeChange} {isCollapsed} onCollapsedChange={handleCollapsedChange} - desktopPosition={userSettings.nav?.desktopPosition || 'bottom'} showThemeToggle={true} showThemeVariants={true} {themeVariantItems} @@ -290,11 +279,7 @@ {/if} -
+
{@render children?.()}
@@ -306,24 +291,7 @@ {/if} diff --git a/apps/presi/apps/web/src/lib/stores/navigation.ts b/apps/presi/apps/web/src/lib/stores/navigation.ts index 5527a3e14..e922e7ce5 100644 --- a/apps/presi/apps/web/src/lib/stores/navigation.ts +++ b/apps/presi/apps/web/src/lib/stores/navigation.ts @@ -1,3 +1,3 @@ import { createSimpleNavigationStores } from '@manacore/shared-stores'; -export const { isSidebarMode, isNavCollapsed } = createSimpleNavigationStores(); +export const { isNavCollapsed } = createSimpleNavigationStores(); diff --git a/apps/presi/apps/web/src/routes/(app)/+layout.svelte b/apps/presi/apps/web/src/routes/(app)/+layout.svelte index 12c80f75f..da0416098 100644 --- a/apps/presi/apps/web/src/routes/(app)/+layout.svelte +++ b/apps/presi/apps/web/src/routes/(app)/+layout.svelte @@ -9,10 +9,7 @@ import { userSettings } from '$lib/stores/user-settings.svelte'; import { theme } from '$lib/stores/theme'; import { THEME_DEFINITIONS } from '@manacore/shared-theme'; - import { - isSidebarMode as sidebarModeStore, - isNavCollapsed as collapsedStore, - } from '$lib/stores/navigation'; + import { isNavCollapsed as collapsedStore } from '$lib/stores/navigation'; import { getLanguageDropdownItems, getCurrentLanguageLabel } from '@manacore/shared-i18n'; import { getPillAppItems } from '@manacore/shared-branding'; import { setLocale, supportedLocales } from '$lib/i18n'; @@ -22,7 +19,6 @@ let { children } = $props(); - let isSidebarMode = $state(false); let isCollapsed = $state(false); // Theme variant dropdown items @@ -72,14 +68,6 @@ return hideNavRoutes.some((route) => pathname.startsWith(route)); } - function handleModeChange(isSidebar: boolean) { - isSidebarMode = isSidebar; - sidebarModeStore.set(isSidebar); - if (typeof localStorage !== 'undefined') { - localStorage.setItem('presi-nav-sidebar', String(isSidebar)); - } - } - function handleCollapsedChange(collapsed: boolean) { isCollapsed = collapsed; collapsedStore.set(collapsed); @@ -132,13 +120,6 @@ goto(userSettings.startPage, { replaceState: true }); } - // Initialize sidebar mode from localStorage - const savedSidebar = localStorage.getItem('presi-nav-sidebar'); - if (savedSidebar === 'true') { - isSidebarMode = true; - sidebarModeStore.set(true); - } - // Initialize collapsed state from localStorage const savedCollapsed = localStorage.getItem('presi-nav-collapsed'); if (savedCollapsed === 'true') { @@ -158,7 +139,7 @@ {:else}
- + - -
+ +
{@render children()}
@@ -214,17 +188,7 @@ .main-content { flex: 1; - transition: all 300ms ease; - } - - /* Floating nav mode - add top padding for fixed nav */ - .main-content.floating-mode { - padding-top: 100px; - } - - /* Sidebar mode - add left padding for sidebar nav */ - .main-content.sidebar-mode { - padding-left: 180px; + padding-bottom: 100px; } .content-wrapper { diff --git a/apps/questions/apps/web/src/routes/(app)/+layout.svelte b/apps/questions/apps/web/src/routes/(app)/+layout.svelte index 65fe4c642..a9c482a7c 100644 --- a/apps/questions/apps/web/src/routes/(app)/+layout.svelte +++ b/apps/questions/apps/web/src/routes/(app)/+layout.svelte @@ -31,7 +31,6 @@ } // Navigation mode state - let isSidebarMode = $state(false); let isCollapsed = $state(false); // Theme state @@ -61,11 +60,6 @@ // Restore nav mode from localStorage if (browser) { - const savedSidebar = localStorage.getItem('questions-nav-sidebar'); - if (savedSidebar === 'true') { - isSidebarMode = true; - } - const savedCollapsed = localStorage.getItem('questions-nav-collapsed'); if (savedCollapsed === 'true') { isCollapsed = true; @@ -83,13 +77,6 @@ theme.toggle(); } - function handleModeChange(isSidebar: boolean) { - isSidebarMode = isSidebar; - if (typeof localStorage !== 'undefined') { - localStorage.setItem('questions-nav-sidebar', String(isSidebar)); - } - } - function handleCollapsedChange(collapsed: boolean) { isCollapsed = collapsed; if (typeof localStorage !== 'undefined') { @@ -205,11 +192,8 @@ homeRoute="/" onToggleTheme={handleToggleTheme} {isDark} - {isSidebarMode} - onModeChange={handleModeChange} {isCollapsed} onCollapsedChange={handleCollapsedChange} - desktopPosition="bottom" showThemeToggle={true} showLogout={true} onLogout={handleSignOut} @@ -232,11 +216,11 @@ onParseCreate={handleParseCreate} createText="Create" appIcon="help-circle" - bottomOffset={isMobile ? '70px' : isSidebarMode ? '0px' : '70px'} + bottomOffset={isMobile ? '70px' : '70px'} /> -
+
{@render children()}
@@ -257,12 +241,6 @@ flex-direction: column; min-height: 0; padding-bottom: calc(80px + env(safe-area-inset-bottom)); - transition: all 300ms ease; - } - - .main-content.sidebar-mode { - padding-left: 180px; - padding-bottom: 0; } .content-wrapper { diff --git a/apps/storage/apps/web/src/lib/stores/navigation.ts b/apps/storage/apps/web/src/lib/stores/navigation.ts index 5527a3e14..e922e7ce5 100644 --- a/apps/storage/apps/web/src/lib/stores/navigation.ts +++ b/apps/storage/apps/web/src/lib/stores/navigation.ts @@ -1,3 +1,3 @@ import { createSimpleNavigationStores } from '@manacore/shared-stores'; -export const { isSidebarMode, isNavCollapsed } = createSimpleNavigationStores(); +export const { isNavCollapsed } = createSimpleNavigationStores(); diff --git a/apps/storage/apps/web/src/routes/+layout.svelte b/apps/storage/apps/web/src/routes/+layout.svelte index 41d8e1439..2afb0e281 100644 --- a/apps/storage/apps/web/src/routes/+layout.svelte +++ b/apps/storage/apps/web/src/routes/+layout.svelte @@ -9,10 +9,7 @@ import { authStore } from '$lib/stores/auth.svelte'; import { userSettings } from '$lib/stores/user-settings.svelte'; import { THEME_DEFINITIONS } from '@manacore/shared-theme'; - import { - isSidebarMode as sidebarModeStore, - isNavCollapsed as collapsedStore, - } from '$lib/stores/navigation'; + import { isNavCollapsed as collapsedStore } from '$lib/stores/navigation'; import { getLanguageDropdownItems, getCurrentLanguageLabel } from '@manacore/shared-i18n'; import { getPillAppItems } from '@manacore/shared-branding'; import { setLocale, supportedLocales } from '$lib/i18n'; @@ -25,7 +22,6 @@ let { children } = $props(); let loading = $state(true); - let isSidebarMode = $state(false); let isCollapsed = $state(false); // Use theme store's isDark directly @@ -111,14 +107,6 @@ } } - function handleModeChange(isSidebar: boolean) { - isSidebarMode = isSidebar; - sidebarModeStore.set(isSidebar); - if (typeof localStorage !== 'undefined') { - localStorage.setItem('storage-nav-sidebar', String(isSidebar)); - } - } - function handleCollapsedChange(collapsed: boolean) { isCollapsed = collapsed; collapsedStore.set(collapsed); @@ -155,13 +143,6 @@ // Load user settings await userSettings.load(); - // Initialize sidebar mode from localStorage - const savedSidebar = localStorage.getItem('storage-nav-sidebar'); - if (savedSidebar === 'true') { - isSidebarMode = true; - sidebarModeStore.set(true); - } - // Initialize collapsed state from localStorage const savedCollapsed = localStorage.getItem('storage-nav-collapsed'); if (savedCollapsed === 'true') { @@ -204,11 +185,8 @@ homeRoute="/files" onToggleTheme={handleToggleTheme} {isDark} - {isSidebarMode} - onModeChange={handleModeChange} {isCollapsed} onCollapsedChange={handleCollapsedChange} - desktopPosition={userSettings.nav.desktopPosition} showThemeToggle={true} showThemeVariants={true} {themeVariantItems} @@ -231,11 +209,7 @@ allAppsHref="/apps" /> -
+
{@render children()}
@@ -252,15 +226,7 @@ .main-content { flex: 1; - transition: all 300ms ease; - } - - .main-content.floating-mode { - padding-top: 100px; - } - - .main-content.sidebar-mode { - padding-left: 180px; + padding-bottom: 100px; } .content-wrapper { diff --git a/apps/todo/apps/web/src/lib/stores/navigation.ts b/apps/todo/apps/web/src/lib/stores/navigation.ts index c033f7e13..a0dd7b724 100644 --- a/apps/todo/apps/web/src/lib/stores/navigation.ts +++ b/apps/todo/apps/web/src/lib/stores/navigation.ts @@ -1,6 +1,6 @@ import { createSimpleNavigationStores } from '@manacore/shared-stores'; -export const { isSidebarMode, isNavCollapsed, isToolbarCollapsed } = createSimpleNavigationStores({ +export const { isNavCollapsed, isToolbarCollapsed } = createSimpleNavigationStores({ withToolbar: true, toolbarCollapsedDefault: true, }); diff --git a/apps/todo/apps/web/src/routes/(app)/+layout.svelte b/apps/todo/apps/web/src/routes/(app)/+layout.svelte index 8f7a614f5..78e7d733d 100644 --- a/apps/todo/apps/web/src/routes/(app)/+layout.svelte +++ b/apps/todo/apps/web/src/routes/(app)/+layout.svelte @@ -317,7 +317,6 @@ homeRoute="/" onToggleTheme={handleToggleTheme} {isDark} - desktopPosition={userSettings.nav?.desktopPosition || 'bottom'} showThemeToggle={true} showThemeVariants={true} {themeVariantItems} diff --git a/apps/zitare/apps/web/src/routes/(app)/+layout.svelte b/apps/zitare/apps/web/src/routes/(app)/+layout.svelte index 33a873ad9..af7a2aea6 100644 --- a/apps/zitare/apps/web/src/routes/(app)/+layout.svelte +++ b/apps/zitare/apps/web/src/routes/(app)/+layout.svelte @@ -238,7 +238,6 @@ currentPath={$page.url.pathname} appName="Zitare" homeRoute="/" - desktopPosition="bottom" onToggleTheme={handleToggleTheme} {isDark} showThemeToggle={true} diff --git a/packages/shared-stores/src/navigation-simple.ts b/packages/shared-stores/src/navigation-simple.ts index e4b73b2a3..685094a75 100644 --- a/packages/shared-stores/src/navigation-simple.ts +++ b/packages/shared-stores/src/navigation-simple.ts @@ -6,8 +6,6 @@ import { writable, type Writable } from 'svelte/store'; export interface SimpleNavigationStores { - /** Whether the app is in sidebar mode (desktop) */ - isSidebarMode: Writable; /** Whether the nav is collapsed */ isNavCollapsed: Writable; /** Whether the toolbar is collapsed (optional) */ @@ -15,7 +13,7 @@ export interface SimpleNavigationStores { } export interface SimpleNavigationOptions { - /** App name for localStorage keys (e.g., 'clock' -> 'clock_sidebar_mode') */ + /** App name for localStorage keys (e.g., 'clock' -> 'clock_nav_collapsed') */ storageKey?: string; /** Include isToolbarCollapsed store */ withToolbar?: boolean; @@ -28,17 +26,17 @@ export interface SimpleNavigationOptions { * * @example * // Basic usage (no persistence) - * export const { isSidebarMode, isNavCollapsed } = createSimpleNavigationStores(); + * export const { isNavCollapsed } = createSimpleNavigationStores(); * * @example * // With persistence - * export const { isSidebarMode, isNavCollapsed } = createSimpleNavigationStores({ + * export const { isNavCollapsed } = createSimpleNavigationStores({ * storageKey: 'clock', * }); * * @example * // With toolbar - * export const { isSidebarMode, isNavCollapsed, isToolbarCollapsed } = createSimpleNavigationStores({ + * export const { isNavCollapsed, isToolbarCollapsed } = createSimpleNavigationStores({ * withToolbar: true, * toolbarCollapsedDefault: true, * }); @@ -71,16 +69,11 @@ export function createSimpleNavigationStores( } // Create stores (persisted if storageKey provided, otherwise simple) - const isSidebarMode = storageKey - ? createPersistedWritable('sidebar_mode', false) - : writable(false); - const isNavCollapsed = storageKey ? createPersistedWritable('nav_collapsed', false) : writable(false); const result: SimpleNavigationStores = { - isSidebarMode, isNavCollapsed, }; diff --git a/packages/shared-ui/src/navigation/PillNavigation.svelte b/packages/shared-ui/src/navigation/PillNavigation.svelte index 25701f30b..148b1fad5 100644 --- a/packages/shared-ui/src/navigation/PillNavigation.svelte +++ b/packages/shared-ui/src/navigation/PillNavigation.svelte @@ -194,10 +194,6 @@ onToggleTheme?: () => void; /** Whether dark mode is active */ isDark?: boolean; - /** Whether sidebar mode is enabled */ - isSidebarMode?: boolean; - /** Called when sidebar mode changes */ - onModeChange?: (isSidebar: boolean) => void; /** Whether navigation is collapsed */ isCollapsed?: boolean; /** Called when collapsed state changes */ @@ -257,12 +253,8 @@ onA11yReduceMotionChange?: (reduce: boolean) => void; /** Show a11y quick toggles in theme dropdown */ showA11yQuickToggles?: boolean; - /** Desktop navigation position (mobile always at bottom) */ - desktopPosition?: 'top' | 'bottom'; /** Called when an app should be opened in a split panel */ onOpenInPanel?: (appId: string, url: string) => void; - /** Toolbar content snippet (shown in sidebar mode) */ - toolbarContent?: Snippet; } let { @@ -274,8 +266,6 @@ onLogout, onToggleTheme, isDark = false, - isSidebarMode: externalSidebarMode, - onModeChange, isCollapsed: externalCollapsed, onCollapsedChange, languageItems = [], @@ -305,9 +295,7 @@ a11yReduceMotion = false, onA11yReduceMotionChange, showA11yQuickToggles = false, - desktopPosition = 'top', onOpenInPanel, - toolbarContent, }: Props = $props(); // Type guards for elements @@ -338,48 +326,15 @@ } // Local state for uncontrolled mode - let internalSidebarMode = $state(false); let internalCollapsed = $state(false); // Use external or internal state - const isSidebarMode = $derived( - onModeChange !== undefined ? (externalSidebarMode ?? false) : internalSidebarMode - ); const isCollapsed = $derived( onCollapsedChange !== undefined ? (externalCollapsed ?? false) : internalCollapsed ); - // Mobile detection for dropdown direction - let isMobile = $state(false); - $effect(() => { - if (typeof window !== 'undefined') { - const checkMobile = () => { - isMobile = window.innerWidth <= 768; - }; - checkMobile(); - window.addEventListener('resize', checkMobile); - return () => window.removeEventListener('resize', checkMobile); - } - }); - - // Dropdown direction: up when nav is at bottom (mobile or desktop-bottom), down otherwise - const dropdownDirection = $derived<'up' | 'down'>( - // Mobile: always up (nav at bottom) unless in sidebar mode - (isMobile && !isSidebarMode) || - // Desktop with bottom position: up unless in sidebar mode - (!isMobile && desktopPosition === 'bottom' && !isSidebarMode) - ? 'up' - : 'down' - ); - - function toggleSidebarMode() { - const newValue = !isSidebarMode; - if (onModeChange) { - onModeChange(newValue); - } else { - internalSidebarMode = newValue; - } - } + // Dropdown direction: always up since nav is always at bottom + const dropdownDirection = 'up' as const; function collapseNav() { if (onCollapsedChange) { @@ -463,12 +418,7 @@ chevronLeft: 'M15 19l-7-7 7-7', chevronRight: 'M9 5l7 7-7 7', menu: 'M4 6h16M4 12h16M4 18h16', - // Layout icons - sidebar: 'M3 3h7v18H3V3zm9 0h9v18h-9V3z', // Sidebar layout icon - layoutBottom: 'M3 3h18v9H3V3zm0 12h18v6H3v-6z', // Bottom bar layout icon - panelRight: 'M9 3h12v18H9V3zM3 3h3v18H3V3z', // Panel right icon minimize: 'M4 12h16', // Minimize (minus) icon - maximize: 'M4 8h16M4 16h16', // Two lines for expand fire: 'M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z', grid: 'M4 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM14 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V5zM4 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1v-4zM14 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z', gridSmall: @@ -493,13 +443,8 @@ {#if !isCollapsed} -