Add an Active State for Expand (...) in the Top Section Navigation

src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbsections.directive.js

@@ -133,6 +133,17 @@ function sectionsDirective($timeout, $window, navigationService, treeService, se
                 }
             };
 
+            scope.currentSectionInOverflow = function () {
+                if (scope.overflowingSections === 0) {
+                    return false;
+                }
+
+                var currentSection = scope.sections.filter(s => s.alias === scope.currentSection);
+
+                return (scope.sections.indexOf(currentSection[0]) >= scope.maxSections);
+
+            };
+
             loadSections();
 
         }

src/Umbraco.Web.UI.Client/src/less/sections.less

@@ -55,7 +55,7 @@ ul.sections {
             transition: opacity .1s linear, box-shadow .1s;
         }
 
-        &.current a {
+        &.current > a {
             color: @ui-active;
 
             &::after {
@@ -76,6 +76,13 @@ ul.sections {
                 transition: opacity .1s linear;
             }
 
+            &.current {
+                i {
+                    opacity: 1;
+                    background: @ui-active;
+                }
+            }
+
             &:hover i {
                 opacity: 1;
             }

src/Umbraco.Web.UI.Client/src/views/components/application/umb-sections.html

@@ -11,7 +11,7 @@
                 </a>
             </li>
 
-            <li data-element="section-expand" class="expand" ng-class="{ 'open': showTray === true }" ng-show="needTray">
+            <li data-element="section-expand" class="expand" ng-class="{ 'open': showTray === true, current: currentSectionInOverflow() }" ng-show="needTray">
                 <a href="#" ng-click="trayClick()" prevent-default>
                     <span class="section__name"><i></i><i></i><i></i></span>
                 </a>