Fixed selection of navbar sub list items

src/main/resources/static/css/main.css

@@ -14,6 +14,17 @@
     background-color: rgba(0, 0, 0, 0.15);
 }
 
+/*active nav bar sub list items*/
+.side-nav .collapsible-body > ul:not(.collapsible) > li.active, .side-nav.fixed .collapsible-body > ul:not(.collapsible) > li.active {
+    background-color: rgba(0, 0, 0, 0.25);
+}
+
+/*text color for active nav bar sub list items*/
+.side-nav .collapsible-body > ul:not(.collapsible) > li.active a,
+.side-nav.fixed .collapsible-body > ul:not(.collapsible) > li.active a {
+    color: rgba(0, 0, 0, 0.87);
+}
+
 .btn {
     text-transform: capitalize;
 }

src/main/resources/templates/navbar.ftl

 <#macro navbar activeID>
     <#assign locale = localization["tools.Localization"]>
     <ul id="slide-out" class="side-nav fixed">
-        <!-- TODO: deselect everything when selecting a sublist-->
-
         <@itemLogo/>
         <@itemDivider/>
         <@itemWithIcon "home", "/", locale.getString("menu.home"), "home", activeID/>
         <@itemWithIcon "payments", "", locale.getString("menu.payments"), "list", activeID/>
-        <@subListStart locale.getString("menu.charts"), "show_chart"/>
+        <@subListStart "chart" locale.getString("menu.charts"), "show_chart" activeID/>
             <@itemPlain "chartCategories", "", locale.getString("menu.charts.chartCategories"), activeID/>
             <@itemPlain "chartMonth", "", locale.getString("menu.charts.chartMonth"), activeID/>
             <@itemPlain "chartTags", "", locale.getString("menu.charts.chartTags"), activeID/>
@@ -45,11 +43,11 @@
     <li <#if activeID == ID>class="active"</#if>><a href="${link}" class="waves-effect"><i class="material-icons">${icon}</i>${text}</a></li>
 </#macro>
 
-<#macro subListStart text icon>
+<#macro subListStart ID text icon activeID>
 <li>
     <ul class="collapsible collapsible-accordion no-padding">
         <li>
-            <a class="collapsible-header nav-padding"><i class="material-icons">${icon}</i>${text}</a>
+            <a class="collapsible-header nav-padding<#if activeID?starts_with(ID)> active</#if>"><i class="material-icons">${icon}</i>${text}</a>
             <div class="collapsible-body">
                 <ul>
 </#macro>