PageToolbar: Extracting navbar styles & layout into a modern emotion based component (#30588)

* Explore: Replaces navbar-button and overriden explore button css classes with ToolbarButton and cleans up scss & markup, removes ResponsiveButton

* Change live button text when paused

* For the dashboard toolbar button I need a transparent button so I refactored the states/variants into a new ToolbarButtonVariatn

* PageToolbar wip

* Progress

* Prgress

* Minor progress

* Fixed back button and responsive titles

* Fixed tv mode

* Updated

* support tv modes and playlist

* more progress

* Fixing lots of view states and responsive features

* Minor fixes

* review fixes

* Fixes to e2e tests

* Review fixes

public/sass/_old_responsive.scss

@@ -1,16 +1,3 @@
-.navbar-buttons--zoom {
-  display: none;
-}
-
-.navbar-page-btn {
-  max-width: 200px;
-}
-
-.navbar-buttons--tv,
-.navbar-buttons--actions {
-  display: none;
-}
-
 // Media queries
 // ---------------------
 
@@ -21,34 +8,3 @@
     font-size: 16px;
   }
 }
-
-@include media-breakpoint-up(sm) {
-  .navbar-page-btn {
-    max-width: 250px;
-  }
-}
-
-@include media-breakpoint-up(md) {
-  .navbar-buttons--tv,
-  .navbar-buttons--actions {
-    display: flex;
-  }
-  .navbar-page-btn {
-    max-width: 325px;
-  }
-}
-
-@include media-breakpoint-up(lg) {
-  .navbar-buttons--zoom {
-    display: flex;
-  }
-  .navbar-page-btn {
-    max-width: 450px;
-  }
-}
-
-@include media-breakpoint-up(xl) {
-  .navbar-page-btn {
-    max-width: 600px;
-  }
-}

public/sass/components/_navbar.scss

@@ -1,47 +1,3 @@
-.navbar {
-  position: relative;
-  z-index: $zindex-navbar-fixed;
-  height: $navbarHeight;
-  padding: 0 16px 0 60px;
-  display: flex;
-  flex-grow: 0;
-  flex-shrink: 0;
-  border-bottom: 1px solid transparent;
-  transition-duration: 350ms;
-  transition-timing-function: ease-in-out;
-  transition-property: box-shadow, border-bottom;
-
-  @include media-breakpoint-up(md) {
-    padding-left: $dashboard-padding;
-    margin-left: 0;
-  }
-
-  &--edit {
-    background: $panel-bg;
-    border-bottom: $panel-border;
-    box-shadow: 0 0 10px $dashboard-bg;
-  }
-}
-
-@mixin navbar-alt-look() {
-  background: $page-header-bg;
-  box-shadow: $search-shadow;
-  border-bottom: $navbarBorder;
-}
-
-.panel-in-fullscreen,
-.panel-in-fullscreen.view-mode--tv {
-  .navbar {
-    padding-left: $navbar-padding;
-  }
-
-  .navbar-button--add-panel,
-  .navbar-button--star,
-  .navbar-button--tv {
-    display: none;
-  }
-}
-
 .navbar-page-btn {
   text-overflow: ellipsis;
   overflow: hidden;
@@ -75,35 +31,6 @@
   }
 }
 
-.navbar-page-btn__folder {
-  display: none;
-  padding-right: 4px;
-
-  @include media-breakpoint-up(lg) {
-    display: inline-block;
-  }
-}
-
-.navbar-buttons {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  margin-left: 10px;
-
-  &--close {
-    display: none;
-    margin-right: 0;
-  }
-
-  &--zoom {
-    margin-right: 0;
-  }
-}
-
-.navbar__spacer {
-  flex-grow: 1;
-}
-
 .navbar-button {
   background-color: $panel-bg;
 

public/sass/components/_panel_editor.scss

@@ -22,10 +22,6 @@
 }
 
 .panel-in-fullscreen {
-  .sidemenu {
-    display: none;
-  }
-
   .search-container {
     left: 0 !important;
   }

public/sass/components/_sidemenu.scss

@@ -190,10 +190,10 @@ li.sidemenu-org-switcher {
   }
 
   img {
-    width: 30px;
+    width: 26px;
     position: relative;
     top: 5px;
-    left: 4px;
+    left: 8px;
   }
 }
 
@@ -234,11 +234,12 @@ li.sidemenu-org-switcher {
     }
 
     .sidemenu__logo_small_breakpoint {
-      padding: 14px 10px 26px 13px;
+      padding: 13px;
       display: flex;
       flex-direction: row;
       justify-content: space-between;
       align-items: baseline;
+      cursor: pointer;
 
       .fa-bars {
         font-size: 25px;

public/sass/components/_view_states.scss

@@ -2,41 +2,10 @@
   .react-resizable-handle,
   .add-row-panel-hint,
   .dash-row-menu-container,
-  .navbar-buttons--actions,
   .panel-info-corner--info,
   .panel-info-corner--links {
     display: none;
   }
-
-  .navbar-page-btn {
-    i {
-      display: none;
-    }
-
-    i.navbar-page-btn__folder-icon {
-      display: inline-block;
-      opacity: inherit;
-    }
-  }
-
-  .navbar-button--zoom {
-    display: none;
-  }
-}
-
-.view-mode--playlist {
-  @extend .view-mode--inactive;
-}
-
-// https://github.com/grafana/grafana/issues/18114
-.view-mode--tv.panel-in-fullscreen {
-  .navbar {
-    padding-left: $navbar-padding;
-  }
-
-  .navbar-page-btn {
-    transform: none;
-  }
 }
 
 .view-mode--tv {
@@ -60,8 +29,12 @@
     }
   }
 
-  .navbar {
+  .page-toolbar {
     padding-left: $side-menu-width;
+
+    &--fullscreen {
+      padding-left: $space-md;
+    }
   }
 
   .submenu-controls {
@@ -73,15 +46,21 @@
   @extend .view-mode--tv;
 
   .sidemenu,
-  .navbar {
+  .page-toolbar {
     display: none;
   }
 
-  .scroll-canvas--dashboard {
-    height: 100%;
-  }
-
   .submenu-controls {
     display: none;
   }
 }
+
+@include media-breakpoint-down(sm) {
+  div.page-toolbar {
+    padding-left: 53px;
+
+    &--fullscreen {
+      padding-left: $space-md;
+    }
+  }
+}