Make Dashboard header responsive to NavBar being open (#23290)

frontend/src/metabase/components/Header.jsx

@@ -32,6 +32,7 @@ const propTypes = {
   headerModalMessage: PropTypes.string,
   isEditing: PropTypes.bool,
   isEditingInfo: PropTypes.bool,
+  isNavBarOpen: PropTypes.bool.isRequired,
   item: PropTypes.object.isRequired,
   objectType: PropTypes.string.isRequired,
   isBadgeVisible: PropTypes.bool,
@@ -146,11 +147,11 @@ class Header extends Component {
     const headerButtons = this.props.headerButtons.map(
       (section, sectionIndex) => {
         return (
-          section &&
-          section.length > 0 && (
+          section?.length > 0 && (
             <HeaderButtonSection
               key={sectionIndex}
               className="Header-buttonSection"
+              isNavBarOpen={this.props.isNavBarOpen}
             >
               {section}
             </HeaderButtonSection>
@@ -165,6 +166,7 @@ class Header extends Component {
         {this.renderEditWarning()}
         {this.renderHeaderModal()}
         <HeaderRoot
+          isNavBarOpen={this.props.isNavBarOpen}
           className={cx("QueryBuilder-section", this.props.headerClassName)}
           ref={this.header}
         >
@@ -191,7 +193,9 @@ class Header extends Component {
             </HeaderBadges>
           </HeaderContent>
 
-          <HeaderButtonsContainer>{headerButtons}</HeaderButtonsContainer>
+          <HeaderButtonsContainer isNavBarOpen={this.props.isNavBarOpen}>
+            {headerButtons}
+          </HeaderButtonsContainer>
         </HeaderRoot>
         {this.props.children}
       </div>

frontend/src/metabase/components/Header.styled.tsx

 import styled from "@emotion/styled";
+import { css } from "@emotion/react";
 
 import LastEditInfoLabel from "metabase/components/LastEditInfoLabel";
 
@@ -6,12 +7,26 @@ import { color } from "metabase/lib/colors";
 import {
   breakpointMaxSmall,
   breakpointMinSmall,
+  breakpointMaxMedium,
 } from "metabase/styled-components/theme";
 
-export const HeaderRoot = styled.div`
+interface TypeForItemsThatRespondToNavBarOpen {
+  isNavBarOpen: boolean;
+}
+
+export const HeaderRoot = styled.div<TypeForItemsThatRespondToNavBarOpen>`
   display: flex;
   align-items: center;
 
+  ${breakpointMaxMedium} {
+    ${props =>
+      props.isNavBarOpen &&
+      css`
+        flex-direction: column;
+        align-items: baseline;
+      `}
+  }
+
   ${breakpointMaxSmall} {
     flex-direction: column;
     align-items: baseline;
@@ -58,7 +73,9 @@ export const StyledLastEditInfoLabel = styled(LastEditInfoLabel)`
   }
 `;
 
-export const HeaderButtonsContainer = styled.div`
+export const HeaderButtonsContainer = styled.div<
+  TypeForItemsThatRespondToNavBarOpen
+>`
   display: flex;
   align-items: center;
   color: ${color("text-dark")};
@@ -67,16 +84,36 @@ export const HeaderButtonsContainer = styled.div`
     margin-left: auto;
   }
 
+  ${breakpointMaxMedium} {
+    ${props =>
+      props.isNavBarOpen &&
+      css`
+        width: 100%;
+        margin-bottom: 6px;
+      `}
+  }
+
   ${breakpointMaxSmall} {
     width: 100%;
     margin-bottom: 6px;
   }
 `;
 
-export const HeaderButtonSection = styled.div`
+export const HeaderButtonSection = styled.div<
+  TypeForItemsThatRespondToNavBarOpen
+>`
   display: flex;
   align-items: center;
 
+  ${breakpointMaxMedium} {
+    ${props =>
+      props.isNavBarOpen &&
+      css`
+        width: 100%;
+        justify-content: space-between;
+      `}
+  }
+
   ${breakpointMaxSmall} {
     width: 100%;
     justify-content: space-between;

frontend/src/metabase/dashboard/containers/DashboardHeader.jsx

@@ -6,6 +6,8 @@ import PropTypes from "prop-types";
 import { t } from "ttag";
 import _ from "underscore";
 
+import { getIsNavbarOpen } from "metabase/redux/app";
+
 import ActionButton from "metabase/components/ActionButton";
 import Button from "metabase/core/components/Button";
 import Header from "metabase/components/Header";
@@ -28,6 +30,7 @@ import { Link } from "react-router";
 const mapStateToProps = (state, props) => {
   return {
     isBookmarked: getIsBookmarked(state, props),
+    isNavBarOpen: getIsNavbarOpen(state),
   };
 };
 
@@ -55,6 +58,7 @@ class DashboardHeader extends Component {
     isEditing: PropTypes.oneOfType([PropTypes.bool, PropTypes.object])
       .isRequired,
     isFullscreen: PropTypes.bool.isRequired,
+    isNavBarOpen: PropTypes.bool.isRequired,
     isNightMode: PropTypes.bool.isRequired,
     isAdditionalInfoVisible: PropTypes.bool,
 
@@ -395,6 +399,7 @@ class DashboardHeader extends Component {
         isBadgeVisible={!isEditing && !isFullscreen && isAdditionalInfoVisible}
         isLastEditInfoVisible={hasLastEditInfo && isAdditionalInfoVisible}
         isEditingInfo={isEditing}
+        isNavBarOpen={this.props.isNavBarOpen}
         headerButtons={this.getHeaderButtons()}
         editWarning={this.getEditWarning(dashboard)}
         editingTitle={t`You're editing this dashboard.`}