JCEEE/famdone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix some issues - including add ledger page and fix reoccuring completions

Browse Source
This commit is contained in:
JCEEE
2026-08-05 09:03:08 +01:00
parent 6e817be13f
commit d162ea762e
14 changed files with 993 additions and 546 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/Sidebar.svelte
+66 -26
View File
@@ -1,6 +1,15 @@
<script lang="ts">
import { page } from '$app/state';
import { dashboardIcon, choresIcon, rewardsIcon, bonusesIcon, homeIcon, settingsIcon, logoutIcon, prefsIcon } from './icons';
import {
dashboardIcon,
choresIcon,
rewardsIcon,
bonusesIcon,
homeIcon,
settingsIcon,
logoutIcon,
prefsIcon
} from './icons';
let { famName = '', session = null, isParent = false, role = 'child' } = $props();
@@ -9,30 +18,41 @@
let famSlug = $derived(page.params.fam);
let memberName = $derived(session?.memberName || page.params.username || '');
function toggle() { collapsed = !collapsed; }
function toggle() {
collapsed = !collapsed;
}
let showChildItems = $derived(!!memberName);
let navItems = $derived(isParent && memberName
? [
{ href: `/${famSlug}`, label: famName, icon: homeIcon },
{ href: `/${famSlug}/${memberName}`, label: 'Dashboard', icon: dashboardIcon },
{ href: `/${famSlug}/${memberName}/chores`, label: 'Chores', icon: choresIcon },
{ href: `/${famSlug}/${memberName}/rewards`, label: 'Rewards', icon: rewardsIcon },
{ href: `/${famSlug}/${memberName}/bonuses`, label: 'Bonuses', icon: bonusesIcon },
]
: showChildItems
let navItems = $derived(
isParent && memberName
? [
{ href: `/${famSlug}`, label: famName, icon: homeIcon },
{ href: `/${famSlug}/${memberName}`, label: 'Dashboard', icon: dashboardIcon },
]
: []
{ href: `/${famSlug}`, label: famName, icon: homeIcon },
{ href: `/${famSlug}/${memberName}`, label: 'Dashboard', icon: dashboardIcon },
{ href: `/${famSlug}/${memberName}/chores`, label: 'Chores', icon: choresIcon },
{ href: `/${famSlug}/${memberName}/ledger`, label: 'Ledger', icon: rewardsIcon },
{ href: `/${famSlug}/${memberName}/bonuses`, label: 'Bonuses', icon: bonusesIcon }
]
: showChildItems
? [
{ href: `/${famSlug}`, label: famName, icon: homeIcon },
{ href: `/${famSlug}/${memberName}`, label: 'Dashboard', icon: dashboardIcon }
]
: []
);
let footerItems = $derived([
...(memberName ? [{ href: `/${famSlug}/${memberName}/preferences`, label: 'Preferences', icon: prefsIcon }] : []),
...(isParent && memberName ? [{ href: `/${famSlug}/${memberName}/settings`, label: 'Settings', icon: settingsIcon }] : []),
{ href: session ? '/logout' : '/login', label: session ? 'Log out' : 'Log in', icon: logoutIcon },
...(memberName
? [{ href: `/${famSlug}/${memberName}/preferences`, label: 'Preferences', icon: prefsIcon }]
: []),
...(isParent && memberName
? [{ href: `/${famSlug}/${memberName}/settings`, label: 'Settings', icon: settingsIcon }]
: []),
{
href: session ? '/logout' : '/login',
label: session ? 'Log out' : 'Log in',
icon: logoutIcon
}
]);
</script>
@@ -68,7 +88,8 @@
<style>
.sidebar {
position: fixed;
top: 0; left: 0;
top: 0;
left: 0;
height: 100vh;
width: 220px;
background: #1e1b4b;
@@ -79,10 +100,13 @@
z-index: 100;
overflow: hidden;
}
.sidebar.collapsed { width: 56px; }
.sidebar.collapsed {
width: 56px;
}
.toggle-btn {
position: absolute;
top: 0.5rem; right: 0.5rem;
top: 0.5rem;
right: 0.5rem;
background: none;
border: none;
color: #a5b4fc;
@@ -99,8 +123,15 @@
border-bottom: 1px solid #3730a3;
min-height: 52px;
}
.app-icon { font-size: 1.3rem; flex-shrink: 0; }
.app-name { font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
.app-icon {
font-size: 1.3rem;
flex-shrink: 0;
}
.app-name {
font-weight: 700;
font-size: 1.05rem;
white-space: nowrap;
}
.sidebar-nav {
flex: 1;
padding: 0.5rem 0;
@@ -128,7 +159,16 @@
white-space: nowrap;
transition: background 0.15s;
}
.nav-item:hover { background: #3730a3; color: #e0e7ff; }
.nav-item.active { background: #4338ca; color: #fff; font-weight: 600; }
.nav-label { overflow: hidden; }
.nav-item:hover {
background: #3730a3;
color: #e0e7ff;
}
.nav-item.active {
background: #4338ca;
color: #fff;
font-weight: 600;
}
.nav-label {
overflow: hidden;
}
</style>