Skip to content

Commit

Permalink
navbar: refactor to use config for dropdowns
Browse files Browse the repository at this point in the history
  • Loading branch information
@ES-Alexander @patrickelectric
ES-Alexander authored and patrickelectric committed Feb 11, 2025
1 parent 7739d4c commit 9145893
Show file tree
Hide file tree
Showing 2 changed files with 86 additions and 262 deletions.
282 changes: 21 additions & 261 deletions templates/navbar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,48 +26,22 @@
<div class="flex items-center lg:order-2">
<div class="w-full md:block md:w-auto me-10" id="navbar-dropdown">
<ul class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 text-white">
{% if config.extra.navbar %}{% for dropdown in config.extra.navbar %}
<li>
<button id="mega-menu-about"
data-dropdown-toggle="mega-menu-about-content"
<button id="mega-menu-{{ dropdown.name | lower }}"
data-dropdown-toggle="mega-menu-{{ dropdown.name | lower }}-content"
data-dropdown-trigger="hover"
data-dropdown-delay="100"
class="flex items-center justify-between w-full py-2 px-3 rounded hover:bg-secondary md:hover:bg-transparent md:border-0 md:hover:text-secondary md:p-0 md:w-auto">
About
<svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="m1 1 4 4 4-4"/>
</svg>
</button>
</li>
<li>
<button id="mega-menu-full-cta-image-button"
data-dropdown-toggle="mega-menu-full-image-dropdown"
data-dropdown-trigger="hover"
data-dropdown-delay="100"
class="flex items-center justify-between w-full py-2 px-3 rounded hover:bg-secondary md:hover:bg-transparent md:border-0 md:hover:text-secondary md:p-0 md:w-auto">
Docs
<svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="m1 1 4 4 4-4"/>
</svg>
</button>
</li>
<li>
<button id="mega-menu-community"
data-dropdown-toggle="mega-menu-community-content"
data-dropdown-trigger="hover"
data-dropdown-delay="100"
class="flex items-center justify-between w-full py-2 px-3 rounded hover:bg-secondary md:hover:bg-transparent md:border-0 md:hover:text-secondary md:p-0 md:w-auto">
Community
{{ dropdown.name }}
<svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="m1 1 4 4 4-4"/>
</svg>
</button>
</li>
{% endfor %}{% endif %}
</ul>
</div>
<a href="/bluesim/"
Expand All @@ -85,247 +59,33 @@
</div>
</div>

<!-- About Megamenu content -->
<!-- -->
<div id="mega-menu-about-content"
class="hidden relative z-50 w-full megamenu">
<div class="grid max-w-screen-xl px-4 py-5 mx-auto text-white dark:text-gray-400 md:grid-cols-4 md:px-6 z-50">
<ul class="hidden mb-4 space-y-2 md:mb-0 md:block" aria-labelledby="mega-menu-full-image-button">
</ul>
<ul class="mb-4 space-y-2 md:mb-0">
</ul>
<ul class="mb-4 space-y-2 md:mb-0">
<li>
<span class="text-quaternary text-lg font-bold">
General
</span>
</li>
<li>
<a href="https://bluerobotics.com/about/" class="hover:underline hover:text-quaternary">
About Blue Robotics
</a>
</li>
<!--
<li>
<a href="#" class="hover:underline hover:text-quaternary">
Open Source License
</a>
</li>
<li>
<a href="#" class="hover:underline hover:text-quaternary">
Sponsorship
</a>
</li>
-->
</ul>
<ul class="mb-4 space-y-2 md:mb-0">
<li>
<span class="text-quaternary text-lg font-bold">
Applications
</span>
</li>
<li>
<a href="https://blueos.cloud/docs/latest/" class="hover:underline hover:text-quaternary">
BlueOS
</a>
</li>
<li>
<a href="https://blueos.cloud/cockpit/docs/latest/" class="hover:underline hover:text-quaternary">
Cockpit
</a>
</li>
<li>
<a href="https://docs.bluerobotics.com/ping-viewer" class="hover:underline hover:text-quaternary">
Ping Viewer
</a>
</li>
</ul>
</div>
</div>

<!-- Docs Megamenu content -->
<!-- -->
<div id="mega-menu-full-image-dropdown"
class="hidden relative z-50 w-full megamenu">
<div class="grid max-w-screen-xl px-4 py-5 mx-auto text-white dark:text-gray-400 md:grid-cols-4 md:px-6 z-50">
<ul class="hidden mb-4 space-y-2 md:mb-0 md:block" aria-labelledby="mega-menu-full-image-button">
<li>
<span class="text-quaternary text-lg font-bold">
Autopilots
</span>
</li>
<li>
<a href="https://ardupilot.org/copter/" class="hover:underline hover:text-quaternary">
ArduCopter
</a>
</li>
<li>
<a href="https://ardupilot.org/plane/" class="hover:underline hover:text-quaternary">
ArduPlane
</a>
</li>
<li>
<a href="https://ardupilot.org/rover/" class="hover:underline hover:text-quaternary">
ArduRover
</a>
</li>
<li>
<a href="https://www.ardusub.com/" class="hover:underline hover:text-quaternary">
ArduSub
</a>
</li>
<li>
<a href="https://docs.px4.io/main/en/" class="hover:underline hover:text-quaternary">
PX4
</a>
</li>
</ul>
<ul class="mb-4 space-y-2 md:mb-0">
<li>
<span class="text-quaternary text-lg font-bold">
Extensions
</span>
</li>
<li>
<a href="https://blueos.cloud/cockpit/docs" class="hover:underline hover:text-quaternary">
Cockpit
</a>
</li>
<li>
<a href="https://docs.bluerobotics.com/ping-viewer/" class="hover:underline hover:text-quaternary">
Ping Viewer
</a>
</li>
<li>
<a href="https://github.com/BlueOS-community/blueos-node-red" class="hover:underline hover:text-quaternary">
Node-Red
</a>
</li>
</ul>
<ul class="mb-4 space-y-2 md:mb-0">
<li>
<span class="text-quaternary text-lg font-bold">
Developers
</span>
</li>
<li>
<a href="https://blueos.cloud/docs/latest/development/core/" class="hover:underline hover:text-quaternary">
BlueOS Core Development
</a>
</li>
<li>
<a href="https://blueos.cloud/docs/latest/development/extensions/" class="hover:underline hover:text-quaternary">
BlueOS Extension Development
</a>
</li>
<li>
<a href="https://github.com/bluerobotics/navigator-lib?tab=readme-ov-file" class="hover:underline hover:text-quaternary">
Navigator Lib
</a>
</li>
<!--
<li>
<a href="#" class="hover:underline hover:text-quaternary">
Sensors
</a>
</li>
-->
<li>
<a href="https://mavlink.io/en/messages/common.html" class="hover:underline hover:text-quaternary">
MAVLink Messages
</a>
</li>
<!--
<li>
<a href="#" class="hover:underline hover:text-quaternary">
Lua Scripting Guide
</a>
</li>
-->
</ul>
<ul class="mb-4 space-y-2 md:mb-0">
<li>
<span class="text-quaternary text-lg font-bold">
Vehicles
</span>
</li>
<li>
<a href="https://bluerobotics.com/guide-tag/bluerov2/" class="hover:underline hover:text-quaternary">
BlueROV
</a>
</li>
<li>
<a href="https://bluerobotics.com/guide-tag/blueboat/" class="hover:underline hover:text-quaternary">
BlueBoat
</a>
</li>
</ul>
</div>
</div>

<!-- Community Megamenu content -->
{% if config.extra.navbar %}{% for dropdown in config.extra.navbar %}
<!-- {{ dropdown.name }} Megamenu content -->
<!-- -->
<div id="mega-menu-community-content"
<div id="mega-menu-{{ dropdown.name | lower }}-content"
class="hidden relative z-50 w-full megamenu">
<div class="grid max-w-screen-xl px-4 py-5 mx-auto text-white dark:text-gray-400 md:grid-cols-4 md:px-6 z-50">
<ul class="hidden mb-4 space-y-2 md:mb-0 md:block" aria-labelledby="mega-menu-full-image-button">
</ul>
<ul class="mb-4 space-y-2 md:mb-0">
</ul>
<ul class="mb-4 space-y-2 md:mb-0">
{% set num_cols = dropdown.columns | length %}
{% set columns = dropdown.columns %}
{% if num_cols < 4 %}{% set columns = range(end=(4 - num_cols)) | concat(with=columns) %}{% endif %}
{% for column in columns %}
<ul class="{% if loop.first %}{% if num_cols < 4 %}hidden {% endif %}md:block {% endif %}mb-4 space-y-2 md:mb-0"{% if loop.first %} aria-labelledby="mega-menu-full-image-button"{% endif %}>
{% if not column.heading %}</ul>{% continue %}{% endif %}
<li>
<span class="text-quaternary text-lg font-bold">
Blue Robotics
{{ column.heading }}
</span>
</li>
{% for link in column.links %}
<li>
<a href="https://discuss.bluerobotics.com/" class="hover:underline hover:text-quaternary">
Discussion Forum
</a>
</li>
<li>
<a href="https://discord.gg/hvcRQRpen4" class="hover:underline hover:text-quaternary">
Chat (Discord)
</a>
</li>
<li>
<a href="https://bluerobotics.com/technical-support/" class="hover:underline hover:text-quaternary">
Technical Support Form
</a>
</li>
<li>
<a href="https://bluerobotics.com/events/" class="hover:underline hover:text-quaternary">
Events/Conferences
<a href="{{ link.href }}" class="hover:underline hover:text-quaternary">
{{ link.name }}
</a>
</li>
{% endfor %}
</ul>
<ul class="mb-4 space-y-2 md:mb-0">
<li>
<span class="text-quaternary text-lg font-bold">
External
</span>
</li>
<li>
<a href="https://discuss.ardupilot.org/" class="hover:underline hover:text-quaternary">
ArduPilot Forum
</a>
</li>
<li>
<a href="https://ardupilot.org/discord" class="hover:underline hover:text-quaternary">
ArduPilot Developer Chat
</a>
</li>
<li>
<a href="https://discuss.px4.io/" class="hover:underline hover:text-quaternary">
PX4 Forum
</a>
</li>
<li>
<a href="https://docs.qgroundcontrol.com/master/en/qgc-user-guide/index.html" class="hover:underline hover:text-quaternary">
QGroundControl
</a>
</li>
</ul>
{% endfor %}
</div>
</div>
{% endfor %}{% endif %}
</nav>
66 changes: 65 additions & 1 deletion theme.toml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ include_content = true
# Use snake_casing to be consistent with the rest of Zola
[extra]

# ---------------------- NAVBAR ---------------------- #
[extra.logo]
# The path to the navbar logo image
image_source = "https://blueos.cloud/assets/img/blueos-logo-white.png"
Expand All @@ -32,8 +33,71 @@ image_source = "https://blueos.cloud/assets/img/blueos-logo-white.png"

# If you enable this option, a select widget will be available to switch between different versions.
# You need to provide a url for a json file, an example can be found in the bluetheme docs.
# version_choices = "/docs/data.json"
#version_choices = "/docs/data.json"

# megamenu links
[[extra.navbar]]
name = "About"
columns = [
{heading = "General", links = [
{name = "About Blue Robotics", href="https://bluerobotics.com/about/"},
# {name = "Open Source License", href="#"},
# {name = "Sponsorship", href="#"},
]},
{heading = "Applications", links = [
{name = "BlueOS", href="https://blueos.cloud/docs/latest"},
{name = "Cockpit", href="https://blueos.cloud/cockpit/docs/latest/"},
{name = "Ping Viewer", href="https://docs.bluerobotics.com/ping-viewer"},
]},
]

[[extra.navbar]]
name = "Docs"
columns = [
{heading = "Autopilots", links = [
{name = "ArduCopter", href="https://ardupilot.org/copter/"},
{name = "ArduPlane", href="https://ardupilot.org/plane/"},
{name = "ArduRover", href="https://ardupilot.org/rover/"},
{name = "ArduSub", href="https://www.ardusub.com/"},
{name = "PX4", href="https://docs.px4.io/main/en/"},
]},
{heading = "Extensions", links = [
{name = "Cockpit", href="https://blueos.cloud/cockpit/docs"},
{name = "Ping Viewer", href="https://docs.bluerobotics.com/ping-viewer/"},
{name = "Node-Red", href="https://github.com/BlueOS-community/blueos-node-red"},
]},
{heading = "Developers", links = [
{name = "BlueOS Core Development", href="https://blueos.cloud/docs/latest/development/core/"},
{name = "BlueOS Extension Development", href="https://blueos.cloud/docs/latest/development/extensions/"},
{name = "Navigator Lib", href="https://github.com/bluerobotics/navigator-lib?tab=readme-ov-file"},
# {name = "Sensors", href="#"},
{name = "MAVLink Messages", href="https://mavlink.io/en/messages/common.html"},
# {name = "Lua Scripting Guide", href="#"},
]},
{heading = "Vehicles", links = [
{name = "BlueROV2", href="https://bluerobotics.com/guide-tag/bluerov2/"},
{name = "BlueBoat", href="https://bluerobotics.com/guide-tag/blueboat/"},
]},
]

[[extra.navbar]]
name = "Community"
columns = [
{heading = "Blue Robotics", links = [
{name = "Discussion Forum", href="https://discuss.bluerobotics.com/"},
{name = "Chat (Discord)", href="https://discord.gg/hvcRQRpen4"},
{name = "Technical Support Form", href="https://bluerobotics.com/technical-support/"},
{name = "Events/Conferences", href="https://bluerobotics.com/events/"},
]},
{heading = "External", links = [
{name = "ArduPilot Forum", href="https://discuss.ardupilot.org/"},
{name = "ArduPilot Developer Chat", href="https://ardupilot.org/discord"},
{name = "PX4 Forum", href="https://discuss.px4.io/"},
{name = "QGroundControl", href="https://docs.qgroundcontrol.com/master/en/qgc-user-guide/index.html"},
]},
]

# ---------------------- FOOTER ---------------------- #
[extra.sponsor]
name = "Blue Robotics"
url = "https://bluerobotics.com"
Expand Down

0 comments on commit 9145893

Please sign in to comment.