Merge pull request #277 from synyx/268-hightlight-current-page

Changed navigation CSS to display current selected dashboard
synyx · Oct 16, 2024 · 9ddfb34 · 9ddfb34
2 parents ab9dfee + 75a6399
commit 9ddfb34
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 52 deletions.
diff --git a/pkg/web/static/css/light.css b/pkg/web/static/css/light.css
@@ -44,3 +44,20 @@ summary {
     background-color: #98999b;
 }
 .tag_label          { color: white;  }
+
+nav#menu ul {
+    background-color: #F0F0F0;
+}
+
+nav#menu ul li a {
+    color: #333333;
+    text-decoration: underline black;
+}
+
+nav#menu ul li a:hover {
+    background-color: white;
+}
+
+.mobile-nav-active {
+    background-color: #D8D8D8;
+}
diff --git a/pkg/web/static/css/main.css b/pkg/web/static/css/main.css
@@ -223,15 +223,15 @@ nav#menu {
 }
 
 nav#menu ul {
+    list-style-type: none;
     margin: 0;
     padding: 0;
-    list-style-type: none;
-    max-height: 120px;
-    position: relative;
+    overflow: hidden;
+    background-color: #242222;
 }
 
 nav#menu ul li {
-    display: inline-block;
+    float: left;
 }
 
 nav#menu ul li:last-child {
@@ -247,58 +247,20 @@ nav#menu ul li:nth-last-child(2) {
 }
 
 nav#menu ul li a {
-    display: inline-block;
-    padding: 0 1vw;
-    color: #0023d9;
-    font-size: calc(14px + .1vw);
-    font-weight: 300;
+    display: block;
+    color: #D8D9DA;
+    text-align: center;
+    padding: 3px 14px;
     text-decoration: none;
-    letter-spacing: -.1px;
-    white-space: nowrap;
 }
 
 nav#menu ul li a:hover {
-    background-color: rgba(50, 51, 51, 0.08);
-}
-
-nav#menu:target {
-    height: auto;
-    padding: 0;
-}
-
-nav#menu:target ul {
-    max-height: none;
-}
-
-nav#menu:target ul li {
-    display: block;
+    background-color: #111;
 }
 
-nav#menu:target ul li:last-child {
-    display: none;
-}
-
-nav#menu:target ul li:nth-last-child(2) {
-    display: inline-block;
-    position: absolute;
-    top: 0;
-    right: 0;
-    margin: 0;
-    border-left: 2px solid #dde4e6;
-}
-
-nav#menu:target ul li a {
-    display: block;
-    padding: 0 2em;
-    background-color: rgba(51, 51, 51, 0.05);
-}
-
-nav#menu:target ul li a:hover {
-    background-color: rgba(51, 51, 51, 0.08);
-}
-
-.mobile-nav {
-    margin-bottom: 0 !important;
+.mobile-nav-active {
+    background-color: #444444;
+    color: whitesmoke;
 }
 
 @media all and (max-width: 640px) {

diff --git a/pkg/web/templates/_base.gohtml b/pkg/web/templates/_base.gohtml
@@ -20,9 +20,11 @@
 <body>
 <nav id="menu">
     <ul id="menu-closed">
-        <li class="mobile-nav"><a href="/" data-turbo="false">Home</a></li>
+        <li class="mobile-nav{{if not $.Dashboard}} mobile-nav-active{{end}}"><a href="/" data-turbo="false">Home</a></li>
         {{range .Dashboards}}
-        <li class="mobile-nav"><a href="/alerts/{{.Name}}" data-turbo="false">{{.Name}}</a></li>
+            {{if .Name}}
+        <li class="mobile-nav{{if and ($.Dashboard) (eq $.Dashboard .Name)}} mobile-nav-active{{end}}"><a href="/alerts/{{.Name}}" data-turbo="false">{{.Name}}</a></li>
+            {{end}}
         {{end}}
         <li class="mobile-nav"><a href="#menu-closed">&#215; Close</a></li>
         <li class="mobile-nav"><a href="#menu">&#9776; Menu</a></li>