Added dynamic badges for themes/plugins updates in the sidebar

themes/grav/css-compiled/template.css

@@ -825,13 +825,15 @@ tr {
       #admin-menu li .badges .count {
         background-color: #141f25; }
       #admin-menu li .badges .updates {
-        background-color: #2693B7; }
+        background-color: #2693B7;
-      #admin-menu li .badges .count ~ .updates {
+        display: none; }
-        border-bottom-left-radius: 0;
+      #admin-menu li .badges.with-updates .count {
-        border-top-left-radius: 0; }
-      #admin-menu li .badges .updates ~ .count {
         border-bottom-right-radius: 0;
         border-top-right-radius: 0; }
+      #admin-menu li .badges.with-updates .updates {
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
+        display: inline-block; }
     #admin-menu li a {
       -webkit-transition: all 0.2s ease;
       -moz-transition: all 0.2s ease;

themes/grav/js/admin-all.js

@@ -73,7 +73,24 @@ $(function () {
                 content = '{updates} of your {type} have an <strong>update available</strong>',
                 button = '<button class="button button-small secondary">Update {Type}</button>',
                 plugins = $('.grav-update.plugins'),
-                themes = $('.grav-update.themes');
+                themes = $('.grav-update.themes'),
+                sidebar = {plugins: $('#admin-menu a[href$="/plugins"]'), themes: $('#admin-menu a[href$="/themes"]')};
+
+            // sidebar
+            if (sidebar.plugins.length || sidebar.themes.length) {
+                var length, badges;
+                if (sidebar.plugins.length && (length = Object.keys(resources.plugins).length)) {
+                    badges = sidebar.plugins.find('.badges');
+                    badges.addClass('with-updates');
+                    badges.find('.badge.updates').text(length);
+                }
+
+                if (sidebar.themes.length && (length = Object.keys(resources.themes).length)) {
+                    badges = sidebar.themes.find('.badges');
+                    badges.addClass('with-updates');
+                    badges.find('.badge.updates').text(length);
+                }
+            }
 
             // list page
             if (plugins[0] && (length = Object.keys(resources.plugins).length)) {

themes/grav/scss/template/_admin.scss

@@ -102,17 +102,21 @@ $update-height: 3rem;
 
             .updates {
                 background-color: $tertiary-accent-bg;
+                display: none;
             }
 
-            .count ~ .updates {
+            &.with-updates {
-                border-bottom-left-radius: 0;
+                .count {
-                border-top-left-radius: 0;
-            }
-
-            .updates ~ .count {
                     border-bottom-right-radius: 0;
                     border-top-right-radius: 0;
                 }
+
+                .updates {
+                    border-bottom-left-radius: 0;
+                    border-top-left-radius: 0;
+                    display: inline-block;
+                }
+            }
         }
 
         a {

themes/grav/templates/partials/nav.html.twig

@@ -35,7 +35,7 @@
                 <i class="fa fa-fw fa-plug"></i> Plugins
                 <span class="badges">
                     <span class="badge count">{{ admin.plugins|length }}</span>
-                    <span class="badge updates">3</span>
+                    <span class="badge updates"></span>
                 </span>
             </a>
         </li>