Ulas Kalayci
573ba52f63
Root cause: the badge was `position: absolute` relative to the entire
`.nav-item`, which stretches to `flex: 1` on mobile (up to ~75 px wide).
With `right: 4px` the badge sat far from the icon on the bottom bar and
overlapped label text in the expanded desktop sidebar.
Fix: `updateOverdueBadge()` now wraps the nav icon in a
`.nav-item__icon-wrap` span (created once, reused on subsequent calls).
The badge is appended there instead of to the nav item root.
CSS changes:
- Remove `.nav-item .nav-badge` positional override
- Add `.nav-item__icon-wrap { position: relative; display: inline-flex }`
- Add `.nav-item__icon-wrap .nav-badge { position: absolute; top: -4px; right: -4px }`
The badge now consistently overlays the top-right corner of the icon
across all nav layouts (mobile column, collapsed sidebar row, expanded
sidebar row with label).
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Oikos
Self-hosted family planner for small households
Tasks · Shopping Lists · Meal Planning · Calendar Sync · Budget · Notes · Contacts
|
|
|
Toggle GitHub light/dark mode to see both themes.
Highlights
Task Management: Shared tasks with deadlines, priorities, subtasks, recurring schedules, Kanban view with one-tap status buttons for touch devices
Shopping Lists: Collaborative lists with aisle categories and one-click import from meal plans
Meal Planning: Weekly drag-and-drop planner with ingredient lists and shopping export
Calendar Sync: Two-way sync with Google Calendar (OAuth) and Apple iCloud (CalDAV)
Budget Tracking: Income and expenses, recurring entries, configurable currency (15 currencies), monthly trends, CSV export
Notes & Contacts: Colored sticky notes with Markdown, contact directory with vCard import/export
Zero Build Step: Pure ES modules, no bundler, no transpiler, no framework. Ships what you write.
Privacy First: SQLCipher AES-256 encrypted database, fully self-hosted, zero telemetry
Liquid Glass UI: Translucent surfaces with backdrop blur, module-tinted glass overlays, spring animations - inspired by Apple's Liquid Glass, built in pure CSS
PWA Native Feel: Installable on any device, works offline, dark mode, responsive from phone to desktop
Multilingual: German, English, Spanish, French, Italian, Swedish, Greek, Russian, Turkish, Chinese, Japanese, Arabic, Hindi, and Portuguese UI with automatic locale detection
Quick Start
Option A — pre-built image (fastest, no clone required):
curl -O https://raw.githubusercontent.com/ulsklyc/oikos/main/docker-compose.yml
curl -O https://raw.githubusercontent.com/ulsklyc/oikos/main/.env.example
cp .env.example .env # edit .env — set SESSION_SECRET and DB_ENCRYPTION_KEY
docker compose up -d
docker compose exec oikos node setup.js
Option B — build from source:
git clone https://github.com/ulsklyc/oikos.git && cd oikos
cp .env.example .env # edit .env — set SESSION_SECRET and DB_ENCRYPTION_KEY
docker compose up -d --build
docker compose exec oikos node setup.js
Then open http://localhost:3000 and log in with the admin credentials you set in the previous step. Add family members from Settings.
New to Docker? The Installation Guide walks you through every step: From installing Docker to HTTPS setup, backups, and troubleshooting.
Tech Stack
-F7DF1E?style=flat-square&logo=javascript&logoColor=black){kind=icon}
Documentation
| Installation | Spec & Data Model | Contributing | Security | Changelog | Backlog |
|---|