Add config to hide backoffice logo (#11999)

* Added config to hide backoffice logo

* rename to hideBackofficeLogo

* hide on mobile

* add hideBackofficeLogo

* implement hideBackofficeLogo + toggle on click

* Updated c# syntax

Co-authored-by: Niels Lyngsø <niels.lyngso@gmail.com>

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

@@ -16,6 +16,7 @@
                 { value: "assets/img/application/logo@2x.png" },
                 { value: "assets/img/application/logo@3x.png" }
             ];
+            scope.hideBackofficeLogo = Umbraco.Sys.ServerVariables.umbracoSettings.hideBackofficeLogo;
 
             // when a user logs out or timesout
             evts.push(eventsService.on("app.notAuthenticated", function () {
@@ -104,15 +105,26 @@
                 $timeout.cancel(scope.logoModal.timer);
             };
             scope.hideLogoModal = function() {
-                $timeout.cancel(scope.logoModal.timer);
-                scope.logoModal.timer = $timeout(function () {
-                    scope.logoModal.show = false;
-                }, 100);
+                if(scope.logoModal.show === true) {
+                    $timeout.cancel(scope.logoModal.timer);
+                    scope.logoModal.timer = $timeout(function () {
+                        scope.logoModal.show = false;
+                    }, 100);
+                }
             };
             scope.stopClickEvent = function($event) {
                 $event.stopPropagation();
             };
 
+            scope.toggleLogoModal = function() {
+                if(scope.logoModal.show) {
+                    $timeout.cancel(scope.logoModal.timer);
+                    scope.logoModal.show = false;
+                } else {
+                    scope.showLogoModal();
+                }
+            };
+
         }
 
         var directive = {

src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-header.less

@@ -9,11 +9,18 @@
 
 .umb-app-header__logo {
     margin-right: 30px;
+    flex-shrink: 0;
     button {
         img {
             height: 30px;
         }
     }
+    
+}
+@media (max-width: 1279px) {
+    .umb-app-header__logo {
+        display: none;
+    }
 }
 
 .umb-app-header__logo-modal {

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

@@ -1,7 +1,11 @@
 <div>
     <div class="umb-app-header">
-        <div class="umb-app-header__logo">
-            <button type="button" class="btn-reset" ng-click="showLogoModal()">
+        <div class="umb-app-header__logo" ng-if="hideBackofficeLogo !== true">
+            <button
+                type="button"
+                class="btn-reset"
+                ng-click="toggleLogoModal()"
+            >
                 <img
                     src="assets/img/application/umbraco_logomark_white.svg"
                     alt="Umbraco"