Enhance navbar functionality: add data attribute for fixed navigation items and improve overflow detection logic
This commit is contained in:
+14
-4
@@ -928,7 +928,7 @@
|
|||||||
<a class="nav-link nav-priority-link {% if current_path == url_for('upload_admin') %}nav-active{% endif %}" href="{{ url_for('upload_admin') }}">➕ Hochladen</a>
|
<a class="nav-link nav-priority-link {% if current_path == url_for('upload_admin') %}nav-active{% endif %}" href="{{ url_for('upload_admin') }}">➕ Hochladen</a>
|
||||||
</li>
|
</li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<li class="nav-item">
|
<li class="nav-item" data-nav-fixed="true">
|
||||||
<button id="themeToggleBtn" class="btn btn-link nav-link px-3" aria-label="Dark Mode umschalten" title="Theme umschalten">
|
<button id="themeToggleBtn" class="btn btn-link nav-link px-3" aria-label="Dark Mode umschalten" title="Theme umschalten">
|
||||||
<span class="theme-icon-light" style="display: none;">☀️</span>
|
<span class="theme-icon-light" style="display: none;">☀️</span>
|
||||||
<span class="theme-icon-dark" style="display: none;">🌙</span>
|
<span class="theme-icon-dark" style="display: none;">🌙</span>
|
||||||
@@ -1047,7 +1047,7 @@
|
|||||||
<a class="nav-link nav-priority-link {% if current_path == url_for('library_admin') %}nav-active{% endif %}" href="{{ url_for('library_admin') }}">📖 Hochladen</a>
|
<a class="nav-link nav-priority-link {% if current_path == url_for('library_admin') %}nav-active{% endif %}" href="{{ url_for('library_admin') }}">📖 Hochladen</a>
|
||||||
</li>
|
</li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<li class="nav-item">
|
<li class="nav-item" data-nav-fixed="true">
|
||||||
<button id="themeToggleBtn" class="btn btn-link nav-link px-3" aria-label="Dark Mode umschalten" title="Theme umschalten">
|
<button id="themeToggleBtn" class="btn btn-link nav-link px-3" aria-label="Dark Mode umschalten" title="Theme umschalten">
|
||||||
<span class="theme-icon-light" style="display: none;">☀️</span>
|
<span class="theme-icon-light" style="display: none;">☀️</span>
|
||||||
<span class="theme-icon-dark" style="display: none;">🌙</span>
|
<span class="theme-icon-dark" style="display: none;">🌙</span>
|
||||||
@@ -1827,6 +1827,14 @@
|
|||||||
function adaptNavbarByWidth() {
|
function adaptNavbarByWidth() {
|
||||||
if (!navList) return;
|
if (!navList) return;
|
||||||
|
|
||||||
|
function isNavOverflowing(bufferPx) {
|
||||||
|
const buffer = typeof bufferPx === 'number' ? bufferPx : 0;
|
||||||
|
const collapseOverflow = navCollapse ? (navCollapse.scrollWidth > (navCollapse.clientWidth - buffer)) : false;
|
||||||
|
const containerOverflow = navContainer ? (navContainer.scrollWidth > (navContainer.clientWidth - buffer)) : false;
|
||||||
|
const listOverflow = navList.scrollWidth > (navList.clientWidth - buffer);
|
||||||
|
return collapseOverflow || containerOverflow || listOverflow;
|
||||||
|
}
|
||||||
|
|
||||||
applyCompactMode();
|
applyCompactMode();
|
||||||
|
|
||||||
if (window.innerWidth < 992) {
|
if (window.innerWidth < 992) {
|
||||||
@@ -1838,8 +1846,9 @@
|
|||||||
|
|
||||||
const hiddenSources = [];
|
const hiddenSources = [];
|
||||||
let candidates = collectTopLevelNavSources();
|
let candidates = collectTopLevelNavSources();
|
||||||
|
const overflowBuffer = 12;
|
||||||
|
|
||||||
while (navList.scrollWidth > navList.clientWidth && candidates.length > 0) {
|
while (isNavOverflowing(overflowBuffer) && candidates.length > 0) {
|
||||||
const toHide = pickNextNavItemToHide(candidates);
|
const toHide = pickNextNavItemToHide(candidates);
|
||||||
if (!toHide) {
|
if (!toHide) {
|
||||||
break;
|
break;
|
||||||
@@ -1851,8 +1860,9 @@
|
|||||||
|
|
||||||
rebuildOverflowControl(hiddenSources);
|
rebuildOverflowControl(hiddenSources);
|
||||||
|
|
||||||
|
// One final pass in case the overflow menu label/count itself changed row width.
|
||||||
candidates = collectTopLevelNavSources();
|
candidates = collectTopLevelNavSources();
|
||||||
while (navList.scrollWidth > navList.clientWidth && candidates.length > 0) {
|
while (isNavOverflowing(overflowBuffer) && candidates.length > 0) {
|
||||||
const toHide = pickNextNavItemToHide(candidates);
|
const toHide = pickNextNavItemToHide(candidates);
|
||||||
if (!toHide) {
|
if (!toHide) {
|
||||||
break;
|
break;
|
||||||
|
|||||||
Reference in New Issue
Block a user