mirror of
https://github.com/kevinveenbirkenbach/computer-playbook.git
synced 2025-12-02 15:39:57 +00:00
Kevin Veen-Birkenbach
6fda85788a
This update introduces full JavaScript-based nested submenu handling for the Apps menu, enabling reliable click-based toggling without interference from Bootstrap’s native dropdown logic. Submenus now expand to the left via custom CSS and no longer require dropstart or data-bs-toggle attributes. Changes include: - Add javascript feature flag and enable inline eval in CSP - Add javascript.js implementing custom submenu toggle logic - Add CSS rules for left-expanding nested dropdown menus - Replace hardcoded headline with LITTLEJS_HEADLINE variable - Modernize “Play” → “Start” labels in cards - Remove unused/legacy examples from examples.yml (commented out, not deleted) - Cleanup nav_top.html.j2 to remove conflicting Bootstrap attributes Conversation reference: https://chatgpt.com/share/6928b4c7-19ec-800f-a087-9af304ef4ed9
60 lines
2.1 KiB
Django/Jinja
60 lines
2.1 KiB
Django/Jinja
<!-- Top Navigation -->
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark border-bottom border-secondary">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand d-flex align-items-center" href="/">
|
|
<i class="fa-solid fa-gamepad me-2"></i>
|
|
<span>{{ LITTLEJS_HEADLINE }}</span>
|
|
</a>
|
|
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav ms-auto">
|
|
|
|
<!-- Apps Dropdown (nested categories) -->
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
|
|
<i class="fa-solid fa-grid-2 me-1"></i>Apps
|
|
</a>
|
|
|
|
<ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end">
|
|
{% for key, cat in littlejs_examples|dictsort %}
|
|
|
|
<li class="dropdown-submenu">
|
|
<a class="dropdown-item dropdown-toggle d-flex align-items-center"
|
|
href="#">
|
|
<i class="{{ cat.icon }} me-2"></i>
|
|
{{ cat.label|replace('---','')|trim }}
|
|
</a>
|
|
|
|
<ul class="dropdown-menu dropdown-menu-dark">
|
|
{% for ex in cat['items'] %}
|
|
{% set href = ex | littlejs_href(WEB_PROTOCOL, domain) %}
|
|
<li>
|
|
<a class="dropdown-item d-flex align-items-center" href="{{ href }}">
|
|
<i class="{{ ex.icon }} me-2"></i>{{ ex.name }}
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</li>
|
|
|
|
{% if not loop.last %}
|
|
<li><hr class="dropdown-divider"></li>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/examples/">
|
|
<i class="fa-regular fa-folder-open me-1"></i>Browser
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|