OPNsense Forum

English Forums => Development and Code Review => Topic started by: mihak on April 21, 2021, 07:51:57 pm

Title: rendering of navbar through default.volt
Post by: mihak on April 21, 2021, 07:51:57 pm
Help me understand how does the rendering of navbar header work...


- I created a <span> entry as a last <li> item within <header> of mvc/app/views/layouts/default.volt:

<li><span class="navbar-text" id="theme_toggle">toggle</span></li>


This <span> appears very inconsistently - it is visible on some pages (License, Reporting, Firewall) but missing on others (Dashboard, System, Interfaces). You can see the screenshots of the top right corner on the License page and on the dashboard below - one has a "toggle" addition, the other one doesn't...


Perhaps default.volt is not the right place to add modifications to the Navbar?


Rendered with a toggle: https://i.imgur.com/gqS6zZ3.png
Rendered without it: https://i.imgur.com/EAKEUwk.png


(https://forum.opnsense.org/data:image/png;base64,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)


(https://forum.opnsense.org/data:image/png;base64,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)
Title: Re: rendering of navbar through default.volt
Post by: franco on April 21, 2021, 08:19:15 pm
The static pages like the dashboard have a separate file for this. See this example commit to both:

https://github.com/opnsense/core/commit/6d0bb082f0

Barely caught this info from the cropped screenshot... Make sure to give all the relevant information in an obvious fashion to avoid non-responses.


Cheers,
Franco
Title: Re: rendering of navbar through default.volt
Post by: mihak on April 21, 2021, 08:56:27 pm
oh wow, and we need to maintain consistency between both fbegin.inc and default.volt?
If I would add a theme toggle (dark/light) there, how should I implement it to persist upgrades?