style: add new badge to menu

Author: sgratzl

config.toml

@@ -34,12 +34,12 @@ relativeURLs = false
     identifier = "covidcast"
     name = "COVIDcast"
     pre = "solid/map"
-    url = "/covidcast"
+    url = "/covidcast/"
     weight = 2
 [[menu.main]]
     parent = "covidcast"
     name = "COVIDcast Overview"
-    url = "/covidcast"
+    url = "/covidcast/"
     weight = 1
 [[menu.main]]
     parent = "covidcast"
@@ -121,4 +121,5 @@ relativeURLs = false
     feedbackLikelihoodDesktop = 1
     feedbackDelayMin = 45  # in sec
     feedbackDelayMax = 180 # in sec
-    feedbackDuration = 60  # show it for 60sec
+    feedbackDuration = 60  # show it for 60sec
+    highlightLinks = "/covidcast/,/covidcast/summary,/signals-dashboard/,/forecast-eval/"

themes/delphi/assets/css/layout/_header_footer.scss

@@ -28,6 +28,18 @@ $mobile-margin: 15px;
     margin-bottom: 0;
     align-items: flex-end;
   }
+
+  .uk-badge {
+    border-radius: 3px;
+    margin-left: 10px;
+    background: #2D9CDB;
+    text-transform: uppercase;
+    padding: 4px 8px;
+  }
+
+  .uk-navbar-dropdown {
+    width: 220px;
+  }
 }
 
 .nav-entries .uk-active {

themes/delphi/layouts/partials/footer.html

@@ -7,7 +7,7 @@
       <div>
         <h5 class="uk-text-bold">COVIDcast</h5>
         <ul class="uk-list">
-          <li><a class="uk-link-text uk-text-small" href="{{ relref . "/covidcast" }}">Map</a></li>
+          <li><a class="uk-link-text uk-text-small" href="{{ relref . "/covidcast" }}">Overview</a></li>
           <li><a class="uk-link-text uk-text-small" href="{{ relref . "/covidcast/surveys" }}">Surveys</a></li>
           <li>
             <a class="uk-link-text uk-text-small" href="{{ relref . "/covidcast/survey-results" }}">Survey Results</a>

themes/delphi/layouts/partials/menu/item.html

@@ -1,4 +1,4 @@
 {{ if .Pre }}
   {{ partial "font-awesome.html" .Pre }}
 {{ end }}
-{{ .Name }}
+{{ .Name }}

themes/delphi/layouts/partials/nav.html

@@ -27,7 +27,12 @@
             <div class="uk-navbar-dropdown">
               <ul class="uk-nav uk-navbar-dropdown-nav">
                 {{ range .Children }}
-                  <li><a href="{{ .URL | relLangURL }}">{{ partial "menu/item.html" . }}</a></li>
+                  <li><a href="{{ .URL | relLangURL }}">
+                    {{ partial "menu/item.html" . }}
+                    {{ if (in (split $currentPage.Site.Params.highlightLinks ",") .URL) }}
+                      <span class="uk-badge">New</span>
+                    {{ end }}
+                  </a></li>
                 {{ end }}
               </ul>
             </div>
@@ -52,7 +57,12 @@
               {{ if .HasChildren }}
                 {{ range .Children }}
                   <li class="nav-dropdown-child">
-                    <a href="{{ .URL | relLangURL }}">{{ partial "menu/item.html" . }}</a>
+                    <a href="{{ .URL | relLangURL }}">
+                      {{ partial "menu/item.html" . }}
+                      {{ if (in (split $currentPage.Site.Params.highlightLinks ",") .URL) }}
+                      <span class="uk-badge">New</span>
+                      {{ end }}
+                    </a>
                   </li>
                 {{ end }}
               {{ end }}