Added onclick functionality for menu items

app/config.sample.yaml

@@ -647,4 +647,36 @@ navigation:
           class: fa-solid fa-scale-balanced
       url: https://s.veen.world/imprint
       iframe: true
-  
+    - name: Settings
+      description: Application settings
+      icon:
+        class: fa-solid fa-cog
+      children:
+        - name: Toggle Fullscreen
+          description: Enter or exit fullscreen mode
+          icon:
+            class: fa-solid fa-expand-arrows-alt
+          onclick: "toggleFullscreen()"
+        - name: Toggle Full Width
+          description: Switch between normal and full-width layout
+          icon:
+            class: fa-solid fa-arrows-left-right
+          onclick: "setFullWidth(!initFullWidthFromUrl())"
+        - name: Open in new tab
+          description: Open the currently embedded iframe URL in a fresh browser tab
+          icon:
+            class: fa-solid fa-up-right-from-square
+          onclick: openIframeInNewTab()
+        - name: Print
+          description: Print the current view
+          icon:
+            class: fa-solid fa-print
+          onclick: window.print()
+        - name: Zoom +
+          icon:
+            class: fa-solid fa-search-plus
+          onclick: zoomPage(1.1)
+        - name: Zoom –
+          icon:
+            class: fa-solid fa-search-minus
+          onclick: zoomPage(0.9)

app/static/js/fullscreen.js

@@ -42,8 +42,11 @@ function exitFullscreen() {
  * Toggle between enter and exit fullscreen.
  */
 function toggleFullscreen() {
-  if (document.fullscreenElement) exitFullscreen();
+  const params = new URLSearchParams(window.location.search);
-  else                            enterFullscreen();
+  const isFull = params.get('fullscreen') === '1';
+
+  if (isFull) exitFullscreen();
+  else        enterFullscreen();
 }
 
 /**

app/static/js/iframe.js

@@ -139,5 +139,20 @@ window.addEventListener('popstate', function(event) {
     }
 });
 
+/**
+ * Opens the current iframe URL in a new browser tab.
+ */
+function openIframeInNewTab() {
+  const params = new URLSearchParams(window.location.search);
+  const iframeUrl = params.get('iframe');
+  if (iframeUrl) {
+    window.open(iframeUrl, '_blank');
+  } else {
+    alert('No iframe is currently open.');
+  }
+}
+// expose globally so your template’s onclick can find it
+window.openIframeInNewTab = openIframeInNewTab;
+
 // Adjust iframe height on window resize
 window.addEventListener('resize', syncIframeHeight);

app/templates/moduls/navigation.html.j2

@@ -8,30 +8,43 @@
 {% endmacro %}
 <!-- Template for children -->
 {% macro render_children(children) %}
-    {% for children in children %}
+  {% for child in children %}
-        {% if children.children %}
+    {% if child.children %}
-            <li class="dropdown-submenu position-relative">
+      <li class="dropdown-submenu position-relative">
-                <a class="dropdown-item dropdown-toggle" title="{{ children.description }}">
+        <a class="dropdown-item dropdown-toggle" title="{{ child.description }}">
-                    {{ render_icon_and_name(children) }}
+          {{ render_icon_and_name(child) }}
-                </a>
+        </a>
-                <ul class="dropdown-menu">
+        <ul class="dropdown-menu">
-                    {{ render_children(children.children) }}
+          {{ render_children(child.children) }}
-                </ul>
+        </ul>
-            </li>
+      </li>
-        {% elif children.identifier or children.warning or children.info %}
+
-            <li>
+    {% elif child.identifier or child.warning or child.info %}
-                <a class="dropdown-item" onclick='openDynamicPopup({{ children|tojson|safe }})' data-bs-toggle="tooltip" title="{{ children.description }}">
+      <li>
-                    {{ render_icon_and_name(children) }}
+        <a class="dropdown-item"
-                </a>
+           onclick='openDynamicPopup({{ child|tojson|safe }})'
-            </li>
+           data-bs-toggle="tooltip"
-        {% else %}
+           title="{{ child.description }}">
-            <li>
+          {{ render_icon_and_name(child) }}
-                <a class="dropdown-item {% if children.iframe %}iframe-link{% endif %}" href="{{ children.url }}" target="{{ children.target|default('_blank') }}" data-bs-toggle="tooltip" title="{{ children.description }}">
+        </a>
-                     {{ render_icon_and_name(children) }}
+      </li>
-                </a>
+
-            </li>
+    {% else %}
-        {% endif %}
+      <li>
-    {% endfor %}
+        <a class="dropdown-item {% if child.iframe %}iframe-link{% endif %}"
+           {% if child.onclick %}
+             onclick="{{ child.onclick }}"
+           {% else %}
+             href="{{ child.url }}"
+           {% endif %}
+           target="{{ child.target|default('_blank') }}"
+           data-bs-toggle="tooltip"
+           title="{{ child.description }}">
+          {{ render_icon_and_name(child) }}
+        </a>
+      </li>
+    {% endif %}
+  {% endfor %}
 {% endmacro %}
 
 <!-- Navigation Bar -->
@@ -42,15 +55,22 @@
     <div class="collapse navbar-collapse" id="navbarNav{{menu_type}}">
         <ul class="navbar-nav {% if menu_type == 'header' %}ms-auto{% endif %} btn-group">
             {% for item in navigation[menu_type].children %}
-                {% if item.url %}
+                {% if item.url or item.onclick %}
-                    <!-- Single Item -->
                     <li class="nav-item">
-                        <a class="nav-link btn btn-light {% if item.iframe %}iframe-link{% endif %}" href="{{ item.url }}" target="{{ item.target|default('_blank') }}" data-bs-toggle="tooltip" title="{{ item.description }}">
+                    <a class="nav-link btn btn-light {% if item.iframe %}iframe-link{% endif %}"
-                            {{ render_icon_and_name(item) }}
+                        {% if item.onclick %}
-                        </a>
+                        onclick="{{ item.onclick }}"
+                        {% else %}
+                        href="{{ item.url }}"
+                        {% endif %}
+                        target="{{ item.target|default('_blank') }}"
+                        data-bs-toggle="tooltip"
+                        title="{{ item.description }}">
+                        {{ render_icon_and_name(item) }}
+                    </a>
                     </li>
-                {% else %}
+                {% else %}        
-                    <!-- Dropdown Menu -->
+                <!-- Dropdown Menu -->
                     <li class="nav-item dropdown">
                         <a class="nav-link dropdown-toggle btn btn-light" id="navbarDropdown{{ loop.index }}" role="button" data-bs-display="dynamic" aria-expanded="false">
                             {% if item.icon is defined and item.icon.class is defined %}