Sidebar Navigation

The AppSidebar is the main entry point for every feature and setting in the Enjoy Web App. It appears on the left edge of every page and is organised into a Continue Learning card, purpose-built navigation groups, and a plugins section.

Overall Structure

From top to bottom, the sidebar contains:

1. Brand header — links back to the home page with the app logo and name.
2. Continue Learning card — quick resume of your most recent active learning session.
3. Home — shortcut to the main dashboard.
4. Library — Audio, Video, Ebooks, Courses.
5. Learning Tools — Chat, Vocabulary.
6. Generate Content — Smart Translation, Voice Synthesis.
7. Plugins — third-party integrations such as the browser extension.
8. Secondary nav (bottom) — Sync, Settings.
9. User menu (footer) — profile, subscription, sign out.

Continue Learning Card

The top of the sidebar renders a ContinueLearningCard that reads your most recent active EchoSession from the local database and shows the matching media's cover thumbnail, relative time ("3 hours ago"), and progress. Clicking the card resumes the session.

• Only active sessions are shown; if there are none, the card is not rendered.
• The card reads from the local Dexie database, so it works whether or not you are signed in.
• If the underlying media has been deleted, the card hides itself automatically.

Navigation Groups

Library

Quick access to your learning material:

• Audio — /audios
• Video — /videos
• Ebooks — /ebooks
• Courses — /courses

Learning Tools

AI and vocabulary-related capabilities:

• Chat — /chat — converse with the AI assistant.
• Vocabulary — /vocabulary — flashcards, review, Anki export.

Generate Content

Produce translations or speech without source media:

• Smart Translation — /smart-translation — full-page translation workspace.
• Voice Synthesis — /voice-synthesis — turn any text into spoken audio.

Plugins

Third-party integrations. Today this group contains:

• Chrome Extension — opens the Enjoy extension listing on the Chrome Web Store in a new tab.

The Plugins group label uses the nested i18n key plugins.title from each language's common.json. When adding a new locale, register it as plugins.title (nested) rather than pluginsTitle (flat); otherwise the sidebar falls back to the default English label.

Secondary Nav and User Menu

Pinned to the bottom of the sidebar:

• Sync — /sync
• Settings — /settings

The footer renders the signed-in user menu with links to profile, subscription, and sign-out.

Customising the Sidebar

The sidebar source lives at apps/web/src/components/layout/app-sidebar.tsx. To add a navigation entry:

1. Append the item to the relevant group array (navLibrary, navLearningTools, navGenerateContent, navPlugins).
2. Use t(...) to localise the label; group labels are read via t("groupName", { ns: "common" }).
3. External links can set target: "_blank" — the component renders an external-link icon automatically.
4. To introduce a new group, add a new SidebarGroup block and add the matching translation key to every common.json locale file.