diora-web/docs/navigation.md

Navigation: Lesen and Hören

diora's areas are sorted by what one does, not where things come from:

Group	Sections
—	Home
Lesen	Bücher · Zeitschriften · Nachrichten · Blogs
Hören	Hörbücher · Podcasts · Radio · Ambient
—	Abos & Quellen (managing all subscriptions; phase 2)

• Desktop / wide window (sidebar): every section is its own entry, under its group's heading. Nothing inside a section repeats the choice.
• Phone (tab bar): three tabs, Home · Lesen · Hören. Lesen and Hören show a row of their sections at the top (segments); each group remembers the section last used. The mini player stays below as it is.
• diora Reader (tolino, e-readers): only Lesen, without Home. TV: Hören.

Anything new goes into one of the two groups. Managing (subscribing, settings, folders) moves out of the everyday views into "Abos & Quellen" (phase 2).

One definition: static/js/nav.js (diora-web)

Loaded by the page on every platform, before the other area scripts. It owns the sections, which panel shows each, switching between them, the URL hash and the remembered choice. The bars are drawn from it.

window.DioraNav = {
  sections(),   // [{id, group, label, icon, available}] in order (only those the page has)
  groups(),     // [{id: 'home'|'lesen'|'hoeren', label, icon, sections: [id…]}]
  current(),    // the section id shown now
  go(id),       // show a section ('lesen'/'hoeren': that group's last section)
  onChange(fn), // fn(sectionId) after every change
}

Section id	Group	Label	Panel	View inside the panel
home	—	Home	#tab-home
books	lesen	Bücher	#tab-books	e-books (not magazines)
magazines	lesen	Zeitschriften	#tab-books	magazines
news	lesen	Nachrichten	#tab-feeds	news
blogs	lesen	Blogs	#tab-feeds	blogs
audiobooks	hoeren	Hörbücher	#tab-audiobooks	(audiobooks.js)
podcasts	hoeren	Podcasts	#tab-podcasts
radio	hoeren	Radio	#tab-radio
ambient	hoeren	Ambient	#tab-ambient

go() calls the page's showTab(panel) as before (so everything hooked onto showTab keeps working) and then the panel's view hook: window.__dioraBooksView('books'|'magazines'), window.__dioraFeedsView('news'|'blogs'). The panels' own switches for that choice (feeds.js News/Blogs) are hidden. _currentTopTab stays the panel name.

Hash: #books, #magazines, #news, #blogs, #audiobooks, … (old hashes #feeds, #radio/saved keep working). Remembered: localStorage diora_nav_section and diora_nav_last_<group>.

Zeitschriften (phase 1): the books in a library folder called "Zeitschriften" (or "Magazine"); a per-book mark follows with phase 3.

The segment row (phone)

nav.js draws #nav-segments above the panels: the current group's sections, when the layout is the tab bar (not html.nui-sidebar) and the group has more than one available section. Styled with the theme tokens; the native CSS may restyle it.

Who draws what

Where	Bar	Drawn by
Android (phone)	#nui-tabbar: Home · Lesen · Hören	native-radio.js, from DioraNav.groups()
Android tablet, desktop (html.nui-sidebar)	rail: Home, headings Lesen/Hören with their sections, Menü	native-radio.js, from DioraNav.sections()
Web page	#tabs (narrow: groups + segments; wide: all sections under headings)	nav.js

A tab/rail button calls DioraNav.go(id); the active state comes from DioraNav.onChange.

Phases

1. Navigation (this document), Hörbücher as their own panel, Zeitschriften by folder.
2. "Abos & Quellen": podcasts, YouTube channels, news sources, blogs and the audiobook mark in one place; the everyday views without managing.
3. Library: audiobook series (e.g. Das Kapital, Band 1–3) and folders, magazines marked per book.