Small changed to the sidebar

Ombi.UI/Helpers/BaseUrlHelper.cs

@@ -199,7 +199,7 @@ namespace Ombi.UI.Helpers
             var assetLocation = GetBaseUrl();
 
             var content = GetContentUrl(assetLocation);
-            
+
             sb.AppendLine($"<script src=\"{content}/Content/wizard.js?v={Assembly}\" type=\"text/javascript\"></script>");
 
             return helper.Raw(sb.ToString());
@@ -226,9 +226,9 @@ namespace Ombi.UI.Helpers
             sb.Append($"<script src=\"{content}/Content/app/userManagement/userManagementService.js?v={Assembly}\" type=\"text/javascript\"></script>");
             sb.Append($"<script src=\"{content}/Content/app/userManagement/Directives/userManagementDirective.js?v={Assembly}\" type=\"text/javascript\"></script>");
             sb.Append($"<script src=\"{content}/Content/moment.min.js\"></script>");
-            sb.Append($"<script src=\"{content}/Content/spin.min.js\"></script>");    
-            sb.Append($"<script src=\"{content}/Content/Angular/angular-spinner.min.js\"></script>");   
-            sb.Append($"<script src=\"{content}/Content/Angular/angular-loading-spinner.js\"></script>");   
+            sb.Append($"<script src=\"{content}/Content/spin.min.js\"></script>");
+            sb.Append($"<script src=\"{content}/Content/Angular/angular-spinner.min.js\"></script>");
+            sb.Append($"<script src=\"{content}/Content/Angular/angular-loading-spinner.js\"></script>");
 
             return helper.Raw(sb.ToString());
         }
@@ -290,17 +290,19 @@ namespace Ombi.UI.Helpers
             return helper.Raw(asset);
         }
 
-        public static IHtmlString GetSidebarUrl(this HtmlHelpers helper, NancyContext context, string url, string title, bool dropdown = false)
+        public static IHtmlString GetSidebarUrl(this HtmlHelpers helper, NancyContext context, string url, string title, string icon = null)
         {
             var content = GetLinkUrl(GetBaseUrl());
             if (!string.IsNullOrEmpty(content))
             {
                 url = $"/{content}{url}";
             }
-            var dropdownClass = dropdown ? "list-group-item-dropdown" : string.Empty;
-            var returnString = context.Request.Path == url 
-                                      ? $"<a class=\"list-group-item {dropdownClass} active\" href=\"{url}\">{title}</a>" 
-                                      : $"<a class=\"list-group-item {dropdownClass}\" href=\"{url}\">{title}</a>";
+
+
+            var iconHtml = string.IsNullOrEmpty(icon) ? "" : $"<span style=\"font-size:16px; \" class=\"pull-right hidden-xs showopacity {icon}\"></span>";
+            var returnString = context.Request.Path == url
+                                          ? $"<a class=\"list-group-item active\" href=\"{url}\">{title} {iconHtml}</a>"
+                                          : $"<a class=\"list-group-item\" href=\"{url}\">{title} {iconHtml}</a>";
 
             return helper.Raw(returnString);
         }
@@ -312,8 +314,8 @@ namespace Ombi.UI.Helpers
             {
                 url = $"/{content}{url}";
             }
-            var returnString = context.Request.Path == url ? 
-                                      $"<li class=\"active\"><a href=\"{url}\"><i class=\"fa fa-{fontIcon}\"></i> {title}</a></li>" 
+            var returnString = context.Request.Path == url ?
+                                      $"<li class=\"active\"><a href=\"{url}\"><i class=\"fa fa-{fontIcon}\"></i> {title}</a></li>"
                                       : $"<li><a href=\"{url}\"><i class=\"fa fa-{fontIcon}\"></i> {title}</a></li>";
 
             return helper.Raw(returnString);
@@ -327,8 +329,8 @@ namespace Ombi.UI.Helpers
                 url = $"/{content}{url}";
             }
 
-            var returnString = context.Request.Path == url 
-                ? $"<li class=\"active\"><a href=\"{url}\"><i class=\"fa fa-{fontIcon}\"></i> {title} {extraHtml}</a></li>" 
+            var returnString = context.Request.Path == url
+                ? $"<li class=\"active\"><a href=\"{url}\"><i class=\"fa fa-{fontIcon}\"></i> {title} {extraHtml}</a></li>"
                 : $"<li><a href=\"{url}\"><i class=\"fa fa-{fontIcon}\"></i> {title} {extraHtml}</a></li>";
 
             return helper.Raw(returnString);

Ombi.UI/Views/Shared/Partial/_Sidebar.cshtml

@@ -2,34 +2,62 @@
 @Html.LoadSettingsAssets()
 <div class="col-lg-3 col-md-3 col-sm-4">
     <div class="list-group table-of-contents">
-        @Html.GetSidebarUrl(Context, "/admin/about", "About")
-        @Html.GetSidebarUrl(Context, "/admin", "Ombi Configuration")
-        @Html.GetSidebarUrl(Context, "/admin/customization", "Customization")
-        @Html.GetSidebarUrl(Context, "/admin/landingpage", "Landing Page")
-        @Html.GetSidebarUrl(Context, "/admin/authentication", "Authentication")
-        @Html.GetSidebarUrl(Context, "/admin/usermanagementsettings", "User Management Settings")
-        @Html.GetSidebarUrl(Context, "/admin/plex", "Plex")
-        @Html.GetSidebarUrl(Context, "/admin/couchpotato", "CouchPotato")
-        @Html.GetSidebarUrl(Context, "/admin/watcher", "Watcher (beta)")
-        @Html.GetSidebarUrl(Context, "/admin/radarr", "Radarr (beta)")
-        @Html.GetSidebarUrl(Context, "/admin/sonarr", "Sonarr")
-        @Html.GetSidebarUrl(Context, "/admin/sickrage", "SickRage")
-        @Html.GetSidebarUrl(Context, "/admin/headphones", "Headphones (beta)")
-        @Html.GetSidebarUrl(Context, "/admin/newsletter", "Newsletter Settings")
-
-        <div class="dropdown">
-            <a href="#" class="dropdown-toggle list-group-item " data-toggle="dropdown">Notifications <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-envelope"></span></a>
-            <ul class="dropdown-menu" role="menu">
+        @Html.GetSidebarUrl(Context, "/admin/about", "About", "glyphicon glyphicon-info-sign")
+        @Html.GetSidebarUrl(Context, "/admin", "Ombi Configuration", "glyphicon glyphicon-ok-sign")
+        @Html.GetSidebarUrl(Context, "/admin/customization", "Customization", "glyphicon glyphicon-tasks")
+        @Html.GetSidebarUrl(Context, "/admin/landingpage", "Landing Page", "glyphicon glyphicon-dashboard")
+        @Html.GetSidebarUrl(Context, "/admin/authentication", "Authentication", "glyphicon glyphicon-lock")
+        @Html.GetSidebarUrl(Context, "/admin/usermanagementsettings", "User Management Settings", "glyphicon glyphicon-user")
+        @Html.GetSidebarUrl(Context, "/admin/plex", "Plex", "glyphicon glyphicon-play-circle")
+        @Html.GetSidebarUrl(Context, "/admin/couchpotato", "CouchPotato", "glyphicon glyphicon-film")
+        @Html.GetSidebarUrl(Context, "/admin/watcher", "Watcher (beta)", "glyphicon glyphicon-film")
+        @Html.GetSidebarUrl(Context, "/admin/radarr", "Radarr (beta)", "glyphicon glyphicon-film")
+        @Html.GetSidebarUrl(Context, "/admin/sonarr", "Sonarr", "fa fa-tv")
+        @Html.GetSidebarUrl(Context, "/admin/sickrage", "SickRage", "fa fa-tv")
+        @Html.GetSidebarUrl(Context, "/admin/headphones", "Headphones (beta)", "glyphicon glyphicon-headphones")
+        @Html.GetSidebarUrl(Context, "/admin/newsletter", "Newsletter Settings", "fa fa-newspaper-o")
+        <div id="sidebar" >
+
+            <a href="#notifications" class="list-group-item" data-parent="#sidebar">
+                Notifications <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-envelope"></span>
+            </a>
+
+            <div id="notifications" class="list-group subitem collapse">
+
+
                 @Html.GetSidebarUrl(Context, "/admin/emailnotification", "Email Notifications")
-                @Html.GetSidebarUrl(Context, "/admin/pushbulletnotification", "Pushbullet Notifications")
-                @Html.GetSidebarUrl(Context, "/admin/pushovernotification", "Pushover Notifications")
-                @Html.GetSidebarUrl(Context, "/admin/slacknotification", "Slack Notifications")
-                @Html.GetSidebarUrl(Context, "/admin/discordnotification", "Discord Notifications")
-            </ul>
+
+
+                @Html.GetSidebarUrl(Context, "/admin/pushbulletnotification", "Pushbullet Notifications","fa fa-bell-o")
+                @Html.GetSidebarUrl(Context, "/admin/pushovernotification", "Pushover Notifications", "fa fa-bell-o")
+                @Html.GetSidebarUrl(Context, "/admin/slacknotification", "Slack Notifications", "fa fa-slack")
+                @Html.GetSidebarUrl(Context, "/admin/discordnotification", "Discord Notifications", "fa fa-bell-o")
+
+            </div>
         </div>
-        @Html.GetSidebarUrl(Context, "/admin/logs", "Logs")
-        @Html.GetSidebarUrl(Context, "/admin/status", "Status")
-        @Html.GetSidebarUrl(Context, "/admin/scheduledjobs", "Scheduled Jobs")
-        @Html.GetSidebarUrl(Context, "/admin/faultqueue", "Request Fault Queue")
+
+
+        @Html.GetSidebarUrl(Context, "/admin/logs", "Logs", "fa fa-edit")
+        @Html.GetSidebarUrl(Context, "/admin/status", "Status", "fa fa-dashboard")
+        @Html.GetSidebarUrl(Context, "/admin/scheduledjobs", "Scheduled Jobs", "fa fa-hand-spock-o")
+        @Html.GetSidebarUrl(Context, "/admin/faultqueue", "Request Fault Queue", "fa fa-history")
     </div>
-</div>
+
+
+</div>
+
+<script>
+    $('#sidebar > a').on('click', function (e) {
+        e.preventDefault();
+
+        if (!$(this).hasClass("active")) {
+            var lastActive = $(this).closest("#sidebar").children(".active");
+            lastActive.removeClass("active");
+            lastActive.next('div').collapse('hide');
+            $(this).addClass("active");
+            $(this).next('div').collapse('show');
+
+        }
+
+    });
+</script>