DASH: adding navigation menu on top of page

diff --git a/python_suite/dashboard/static/css/style.css b/python_suite/dashboard/static/css/style.css
index d347cdc8243d9969b1b6a5d3652065792b13f9f5..7384701367575e93be87ce2b48cd13437c35b959 100644 (file)
--- a/python_suite/dashboard/static/css/style.css
+++ b/python_suite/dashboard/static/css/style.css
@@ -36,6 +36,32 @@ table, th {
   text-align: left;
 }
 
+/* MENU_BAR*/
+.menu_bar {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: #0509fc;
+}
+
+.menu_bar a {
+    color: white;
+    text-align: left;
+    padding: 14px 16px;
+    text-decoration: none;
+}
+
+.menu_bar a:hover:not {
+    background-color: #111;
+}
+
+.menu_bar {
+    cursor: pointer;
+}
+.active {
+    background-color:#4CAF50;
+}
 /* ALARMS */
 .invalid_alarm:after {
   content: "- invalid -";

diff --git a/python_suite/dashboard/views/pv_overview.jinja2 b/python_suite/dashboard/views/pv_overview.jinja2
index 1842dca440a3304148d20ac4b138c13d691a4187..5d005d662cc29c385a49118b36729c91ed923e91 100644 (file)
--- a/python_suite/dashboard/views/pv_overview.jinja2
+++ b/python_suite/dashboard/views/pv_overview.jinja2
@@ -12,6 +12,11 @@
                        <a href="http://www.fair-center.eu/for-users/experiments/cbm-and-hades/cbm.html"><img src="/static/images/cbm_logo.png" alt="logo" class="cbm"/></a>
                        <h1>PRESTO - Overview<br/> Prototype of the Second Station of the Micro Vertex Detector of the Compressed Baryonic Matter</h1>
                </div>
+               <nav class="menu_bar">
+                       {% for page in config.pages %}
+                       <a class="{{ 'active' if page == req_page else '' }}" href="/list/{{ page }}">{{ config.pages[page].name }}</a>
+                       {% endfor %}
+               </nav>
                <div id="PVs">
                        {% set page = config.pages[req_page] %}
                        {% for group in page.groups %}