Add collections breadcrumbs and question lineage to mobile appbar (#23595)

frontend/src/metabase/components/Badge.jsx

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 
 import { iconPropTypes } from "metabase/components/Icon";
 
-import { BadgeIcon, MaybeLink } from "./Badge.styled";
+import { BadgeIcon, BadgeText, MaybeLink } from "./Badge.styled";
 
 const iconProp = PropTypes.oneOfType([
   PropTypes.string,
@@ -15,6 +15,7 @@ const propTypes = {
   icon: iconProp,
   inactiveColor: PropTypes.string,
   activeColor: PropTypes.string,
+  isSingleLine: PropTypes.bool,
   onClick: PropTypes.func,
   children: PropTypes.node,
 };
@@ -36,6 +37,7 @@ function Badge({
   icon,
   inactiveColor = "text-medium",
   activeColor = "brand",
+  isSingleLine,
   children,
   ...props
 }) {
@@ -43,10 +45,15 @@ function Badge({
     <MaybeLink
       inactiveColor={inactiveColor}
       activeColor={activeColor}
+      isSingleLine={isSingleLine}
       {...props}
     >
       {icon && <BadgeIcon {...getIconProps(icon)} $hasMargin={!!children} />}
-      {children && <span className="text-wrap">{children}</span>}
+      {children && (
+        <BadgeText className="text-wrap" isSingleLine={isSingleLine}>
+          {children}
+        </BadgeText>
+      )}
     </MaybeLink>
   );
 }

frontend/src/metabase/components/Badge.styled.jsx

@@ -30,6 +30,7 @@ export const MaybeLink = styled(RawMaybeLink)`
   font-size: 0.875em;
   font-weight: bold;
   color: ${props => color(props.inactiveColor)};
+  min-width: ${props => (props.isSingleLine ? 0 : "")};
 
   :hover {
     ${props => (props.to || props.onClick) && hoverStyle(props)}
@@ -41,3 +42,9 @@ export const BadgeIcon = styled(Icon, {
 })`
   margin-right: ${props => (props.$hasMargin ? "5px" : 0)};
 `;
+
+export const BadgeText = styled.span`
+  overflow: ${props => (props.isSingleLine ? "hidden" : "")};
+  text-overflow: ${props => (props.isSingleLine ? "ellipsis" : "")};
+  white-space: ${props => (props.isSingleLine ? "nowrap" : "")};
+`;

frontend/src/metabase/hooks/use-is-small-screen.ts

+import useMediaQuery from "metabase/hooks/use-media-query";
+
+const useIsSmallScreen = () => {
+  return useMediaQuery("(max-width: 40em)");
+};
+
+export default useIsSmallScreen;

frontend/src/metabase/hooks/use-media-query.ts

+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+const useMediaQuery = (query: string) => {
+  const queryList = useMemo(() => window.matchMedia(query), [query]);
+  const [isMatched, setIsMatched] = useState(queryList.matches);
+
+  const handleChange = useCallback((event: MediaQueryListEvent) => {
+    setIsMatched(event.matches);
+  }, []);
+
+  useEffect(() => {
+    queryList.addEventListener("change", handleChange);
+    return () => queryList.removeEventListener("change", handleChange);
+  }, [queryList, handleChange]);
+
+  return isMatched;
+};
+
+export default useMediaQuery;

frontend/src/metabase/nav/components/AppBar/AppBar.styled.tsx

 import styled from "@emotion/styled";
-import { color } from "metabase/lib/colors";
-import Link from "metabase/core/components/Link";
-import {
-  breakpointMaxSmall,
-  breakpointMinSmall,
-  space,
-} from "metabase/styled-components/theme";
-import { APP_BAR_HEIGHT } from "../../constants";
 
 export const AppBarRoot = styled.header`
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: ${APP_BAR_HEIGHT};
-  background-color: ${color("bg-white")};
-  border-bottom: 1px solid ${color("border")};
   z-index: 4;
 
   @media print {
     display: none;
   }
 `;
-
-export const LogoLinkContainer = styled.div`
-  position: relative;
-  margin-left: ${space(2)};
-
-  ${breakpointMaxSmall} {
-    margin-left: ${space(1)};
-  }
-`;
-
-export const LogoLink = styled(Link)`
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 0.375rem;
-  padding: ${space(1)} ${space(2)};
-  transition: opacity 0.3s;
-
-  &:hover {
-    background-color: ${color("bg-light")};
-  }
-`;
-
-export const SidebarButtonContainer = styled.div`
-  position: absolute;
-  top: 0.625rem;
-  left: 0.9375rem;
-  opacity: 0;
-  transition: opacity 0.3s;
-`;
-
-export interface LeftContainerProps {
-  isLogoActive: boolean;
-  isSearchActive: boolean;
-}
-
-export const LeftContainer = styled.div<LeftContainerProps>`
-  display: flex;
-  height: 100%;
-  flex-direction: row;
-  align-items: center;
-  width: 30%;
-
-  &:hover {
-    ${LogoLink} {
-      opacity: ${props => (props.isLogoActive ? 1 : 0)};
-      pointer-events: ${props => (props.isLogoActive ? "" : "none")};
-    }
-
-    ${SidebarButtonContainer} {
-      opacity: ${props => (props.isLogoActive ? 0 : 1)};
-    }
-  }
-
-  ${breakpointMaxSmall} {
-    width: ${props =>
-      props.isSearchActive ? "5rem" : "calc(100% - 3.75rem);"};
-
-    ${LogoLink} {
-      opacity: 0;
-      pointer-events: none;
-    }
-
-    ${SidebarButtonContainer} {
-      opacity: 1;
-    }
-  }
-`;
-
-export const MiddleContainer = styled.div`
-  display: none;
-  justify-content: center;
-  width: 5rem;
-
-  ${breakpointMaxSmall} {
-    display: flex;
-  }
-
-  ${LogoLink} {
-    position: relative;
-  }
-
-  ${LogoLinkContainer} {
-    margin-left: 0;
-  }
-`;
-
-export const RightContainer = styled.div`
-  display: flex;
-  height: 100%;
-  flex-direction: row;
-  align-items: center;
-  width: 30%;
-  justify-content: flex-end;
-
-  ${breakpointMaxSmall} {
-    width: calc(100% - 3.75rem);
-  }
-`;
-
-export const SearchBarContainer = styled.div`
-  display: flex;
-  align-items: center;
-  margin-right: 1rem;
-
-  ${breakpointMaxSmall} {
-    width: 100%;
-  }
-`;
-
-export const SearchBarContent = styled.div`
-  ${breakpointMaxSmall} {
-    width: 100%;
-  }
-
-  ${breakpointMinSmall} {
-    position: relative;
-    width: 28.75rem;
-  }
-`;
-
-interface InfoBarContainerProps {
-  isVisible: boolean;
-}
-
-export const InfoBarContainer = styled.div<InfoBarContainerProps>`
-  display: flex;
-  visibility: ${props => (props.isVisible ? "visible" : "hidden")};
-  opacity: ${props => (props.isVisible ? 1 : 0)};
-  transition: ${props =>
-    !props.isVisible ? `opacity 0.5s, visibility 0s 0.5s` : `opacity 0.5s`};
-`;

frontend/src/metabase/nav/components/AppBar/AppBar.tsx

-import React, { ReactNode, useCallback, useMemo, useState } from "react";
-import { t } from "ttag";
-import { isSmallScreen } from "metabase/lib/dom";
-import { isMac } from "metabase/lib/browser";
-import LogoIcon from "metabase/components/LogoIcon";
-import Tooltip from "metabase/components/Tooltip";
+import React from "react";
+import useIsSmallScreen from "metabase/hooks/use-is-small-screen";
 import { CollectionId } from "metabase-types/api";
-import NewItemButton from "../NewItemButton";
-import SearchBar from "../SearchBar";
-import SidebarButton from "../SidebarButton";
-import CollectionBreadcrumbs from "../../containers/CollectionBreadcrumbs";
-import QuestionLineage from "../../containers/QuestionLineage";
-import {
-  AppBarRoot,
-  LeftContainer,
-  MiddleContainer,
-  RightContainer,
-  SearchBarContainer,
-  SearchBarContent,
-  SidebarButtonContainer,
-  LogoLink,
-  LogoLinkContainer,
-  InfoBarContainer,
-} from "./AppBar.styled";
+import AppBarSmall from "./AppBarSmall";
+import AppBarLarge from "./AppBarLarge";
+import { AppBarRoot } from "./AppBar.styled";
 
-interface AppBarProps {
+export interface AppBarProps {
   collectionId?: CollectionId;
   isNavBarOpen?: boolean;
   isNavBarVisible?: boolean;
@@ -35,109 +17,14 @@ interface AppBarProps {
   onCloseNavbar: () => void;
 }
 
-const AppBar = ({
-  collectionId,
-  isNavBarOpen,
-  isNavBarVisible,
-  isSearchVisible,
-  isNewButtonVisible,
-  isCollectionPathVisible,
-  isQuestionLineageVisible,
-  onToggleNavbar,
-  onCloseNavbar,
-}: AppBarProps): JSX.Element => {
-  const [isSearchActive, setSearchActive] = useState(false);
-
-  const handleLogoClick = useCallback(() => {
-    if (isSmallScreen()) {
-      onCloseNavbar();
-    }
-  }, [onCloseNavbar]);
-
-  const handleSearchActive = useCallback(() => {
-    if (isSmallScreen()) {
-      setSearchActive(true);
-      onCloseNavbar();
-    }
-  }, [onCloseNavbar]);
-
-  const handleSearchInactive = useCallback(() => {
-    if (isSmallScreen()) {
-      setSearchActive(false);
-    }
-  }, []);
-
-  const sidebarButtonTooltip = useMemo(() => {
-    const message = isNavBarOpen ? t`Close sidebar` : t`Open sidebar`;
-    const shortcut = isMac() ? "(⌘ + .)" : "(Ctrl + .)";
-    return `${message} ${shortcut}`;
-  }, [isNavBarOpen]);
+const AppBar = (props: AppBarProps): JSX.Element => {
+  const isSmallScreen = useIsSmallScreen();
 
   return (
     <AppBarRoot>
-      <LeftContainer
-        isLogoActive={!isNavBarVisible}
-        isSearchActive={isSearchActive}
-      >
-        <HomepageLink onClick={handleLogoClick}>
-          {isNavBarVisible && (
-            <SidebarButtonContainer>
-              <Tooltip
-                tooltip={sidebarButtonTooltip}
-                isEnabled={!isSmallScreen()}
-              >
-                <SidebarButton
-                  isSidebarOpen={isNavBarOpen}
-                  onClick={onToggleNavbar}
-                />
-              </Tooltip>
-            </SidebarButtonContainer>
-          )}
-        </HomepageLink>
-        <InfoBarContainer isVisible={!isNavBarOpen}>
-          {isQuestionLineageVisible ? (
-            <QuestionLineage />
-          ) : isCollectionPathVisible ? (
-            <CollectionBreadcrumbs collectionId={collectionId} />
-          ) : null}
-        </InfoBarContainer>
-      </LeftContainer>
-      {!isSearchActive && (
-        <MiddleContainer>
-          <HomepageLink onClick={handleLogoClick} />
-        </MiddleContainer>
-      )}
-      {(isSearchVisible || isNewButtonVisible) && (
-        <RightContainer>
-          {isSearchVisible && (
-            <SearchBarContainer>
-              <SearchBarContent>
-                <SearchBar
-                  onSearchActive={handleSearchActive}
-                  onSearchInactive={handleSearchInactive}
-                />
-              </SearchBarContent>
-            </SearchBarContainer>
-          )}
-          {isNewButtonVisible && <NewItemButton />}
-        </RightContainer>
-      )}
+      {isSmallScreen ? <AppBarSmall {...props} /> : <AppBarLarge {...props} />}
     </AppBarRoot>
   );
 };
 
-interface HomepageLinkProps {
-  children?: ReactNode;
-  onClick?: () => void;
-}
-
-const HomepageLink = ({ children, onClick }: HomepageLinkProps) => (
-  <LogoLinkContainer>
-    <LogoLink to="/" onClick={onClick} data-metabase-event="Navbar;Logo">
-      <LogoIcon height={32} />
-    </LogoLink>
-    {children}
-  </LogoLinkContainer>
-);
-
 export default AppBar;

frontend/src/metabase/nav/components/AppBar/AppBarLarge.styled.tsx

+import styled from "@emotion/styled";
+import { color } from "metabase/lib/colors";
+import { APP_BAR_HEIGHT } from "metabase/nav/constants";
+import { LogoLink } from "./AppBarLogo.styled";
+import { SidebarButton } from "./AppBarToggle.styled";
+
+export const AppBarRoot = styled.header`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  height: ${APP_BAR_HEIGHT};
+  padding: 0 1rem;
+  border-bottom: 1px solid ${color("border")};
+  background-color: ${color("bg-white")};
+`;
+
+export interface AppBarLeftContainerProps {
+  isNavBarVisible?: boolean;
+}
+
+export const AppBarLeftContainer = styled.div<AppBarLeftContainerProps>`
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  min-width: 5rem;
+
+  ${SidebarButton} {
+    opacity: ${props => (props.isNavBarVisible ? 0 : 1)};
+  }
+
+  &:hover {
+    ${LogoLink} {
+      opacity: ${props => (props.isNavBarVisible ? 0 : 1)};
+      pointer-events: ${props => (props.isNavBarVisible ? "none" : "")};
+    }
+
+    ${SidebarButton} {
+      opacity: ${props => (props.isNavBarVisible ? 1 : 0)};
+    }
+  }
+`;
+
+export const AppBarRightContainer = styled.div`
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: 1rem;
+  max-width: 32.5rem;
+`;
+
+export interface InfoBarContainerProps {
+  isNavBarOpen?: boolean;
+}
+
+export const AppBarInfoContainer = styled.div<InfoBarContainerProps>`
+  display: flex;
+  min-width: 0;
+  visibility: ${props => (props.isNavBarOpen ? "hidden" : "visible")};
+  opacity: ${props => (props.isNavBarOpen ? 0 : 1)};
+  transition: ${props =>
+    props.isNavBarOpen ? `opacity 0.5s, visibility 0s` : `opacity 0.5s`};
+`;

frontend/src/metabase/nav/components/AppBar/AppBarLarge.tsx

+import React from "react";
+import { CollectionId } from "metabase-types/api";
+import AppBarLogo from "./AppBarLogo";
+import NewItemButton from "../NewItemButton";
+import SearchBar from "../SearchBar";
+import CollectionBreadcrumbs from "../../containers/CollectionBreadcrumbs";
+import QuestionLineage from "../../containers/QuestionLineage";
+import {
+  AppBarLeftContainer,
+  AppBarRightContainer,
+  AppBarRoot,
+  AppBarInfoContainer,
+} from "./AppBarLarge.styled";
+
+export interface AppBarLargeProps {
+  collectionId?: CollectionId;
+  isNavBarOpen?: boolean;
+  isNavBarVisible?: boolean;
+  isSearchVisible?: boolean;
+  isNewButtonVisible?: boolean;
+  isCollectionPathVisible?: boolean;
+  isQuestionLineageVisible?: boolean;
+  onToggleNavbar: () => void;
+}
+
+const AppBarLarge = ({
+  collectionId,
+  isNavBarOpen,
+  isNavBarVisible,
+  isSearchVisible,
+  isNewButtonVisible,
+  isCollectionPathVisible,
+  isQuestionLineageVisible,
+  onToggleNavbar,
+}: AppBarLargeProps): JSX.Element => {
+  return (
+    <AppBarRoot>
+      <AppBarLeftContainer isNavBarVisible={isNavBarVisible}>
+        <AppBarLogo
+          isNavBarOpen={isNavBarOpen}
+          isToggleVisible={isNavBarVisible}
+          onToggleClick={onToggleNavbar}
+        />
+        <AppBarInfoContainer isNavBarOpen={isNavBarOpen}>
+          {isQuestionLineageVisible ? (
+            <QuestionLineage />
+          ) : isCollectionPathVisible ? (
+            <CollectionBreadcrumbs collectionId={collectionId} />
+          ) : null}
+        </AppBarInfoContainer>
+      </AppBarLeftContainer>
+      {(isSearchVisible || isNewButtonVisible) && (
+        <AppBarRightContainer>
+          {isSearchVisible && <SearchBar />}
+          {isNewButtonVisible && <NewItemButton />}
+        </AppBarRightContainer>
+      )}
+    </AppBarRoot>
+  );
+};
+
+export default AppBarLarge;

frontend/src/metabase/nav/components/AppBar/AppBarLogo.styled.tsx

+import styled from "@emotion/styled";
+import { color } from "metabase/lib/colors";
+import Link from "metabase/core/components/Link";
+
+export const LogoRoot = styled.div`
+  position: relative;
+`;
+
+export const LogoLink = styled(Link)`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.375rem;
+  padding: 0.5rem 1rem;
+  transition: opacity 0.3s;
+
+  &:hover {
+    background-color: ${color("bg-light")};
+  }
+`;
+
+export const ToggleContainer = styled.div`
+  position: absolute;
+  top: 0.625rem;
+  left: 0.9375rem;
+  transition: opacity 0.3s;
+`;

frontend/src/metabase/nav/components/AppBar/AppBarLogo.tsx

+import React from "react";
+import LogoIcon from "metabase/components/LogoIcon";
+import AppBarToggle from "./AppBarToggle";
+import { LogoLink, LogoRoot, ToggleContainer } from "./AppBarLogo.styled";
+
+export interface AppBarLogoProps {
+  isNavBarOpen?: boolean;
+  isToggleVisible?: boolean;
+  onLogoClick?: () => void;
+  onToggleClick?: () => void;
+}
+
+const AppBarLogo = ({
+  isNavBarOpen,
+  isToggleVisible,
+  onLogoClick,
+  onToggleClick,
+}: AppBarLogoProps): JSX.Element => {
+  return (
+    <LogoRoot>
+      <LogoLink to="/" onClick={onLogoClick} data-metabase-event="Navbar;Logo">
+        <LogoIcon height={32} />
+      </LogoLink>
+      {isToggleVisible && (
+        <ToggleContainer>
+          <AppBarToggle
+            isNavBarOpen={isNavBarOpen}
+            onToggleClick={onToggleClick}
+          />
+        </ToggleContainer>
+      )}
+    </LogoRoot>
+  );
+};
+
+export default AppBarLogo;

frontend/src/metabase/nav/components/AppBar/AppBarSmall.styled.tsx

+import styled from "@emotion/styled";
+import { color } from "metabase/lib/colors";
+import { APP_BAR_HEIGHT } from "metabase/nav/constants";
+
+export const AppBarRoot = styled.div`
+  border-bottom: 1px solid ${color("border")};
+  background-color: ${color("bg-white")};
+`;
+
+export const AppBarHeader = styled.header`
+  position: relative;
+  height: ${APP_BAR_HEIGHT};
+  padding: 0 1rem;
+`;
+
+export const AppBarSubheader = styled.div`
+  padding: 1rem;
+`;
+
+export const AppBarMainContainer = styled.header`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  height: 100%;
+`;
+
+export const AppBarToggleContainer = styled.div`
+  flex: 0 0 auto;
+`;
+
+export const AppBarSearchContainer = styled.div`
+  flex: 1 1 auto;
+`;
+
+export interface AppBarLogoContainerProps {
+  isVisible?: boolean;
+}
+
+export const AppBarLogoContainer = styled.div<AppBarLogoContainerProps>`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  opacity: ${props => (props.isVisible ? 1 : 0)};
+  transition: ${props =>
+    props.isVisible ? "opacity 0.3s linear 0.2s" : "none"};
+`;

frontend/src/metabase/nav/components/AppBar/AppBarSmall.tsx

+import React, { useCallback, useState } from "react";
+import { CollectionId } from "metabase-types/api";
+import AppBarLogo from "./AppBarLogo";
+import AppBarToggle from "./AppBarToggle";
+import SearchBar from "../SearchBar";
+import CollectionBreadcrumbs from "../../containers/CollectionBreadcrumbs";
+import QuestionLineage from "../../containers/QuestionLineage";
+import {
+  AppBarHeader,
+  AppBarLogoContainer,
+  AppBarMainContainer,
+  AppBarRoot,
+  AppBarSearchContainer,
+  AppBarSubheader,
+  AppBarToggleContainer,
+} from "./AppBarSmall.styled";
+
+export interface AppBarSmallProps {
+  collectionId?: CollectionId;
+  isNavBarOpen?: boolean;
+  isNavBarVisible?: boolean;
+  isSearchVisible?: boolean;
+  isCollectionPathVisible?: boolean;
+  isQuestionLineageVisible?: boolean;
+  onToggleNavbar: () => void;
+  onCloseNavbar: () => void;
+}
+
+const AppBarSmall = ({
+  collectionId,
+  isNavBarOpen,
+  isNavBarVisible,
+  isSearchVisible,
+  isCollectionPathVisible,
+  isQuestionLineageVisible,
+  onToggleNavbar,
+  onCloseNavbar,
+}: AppBarSmallProps): JSX.Element => {
+  const [isSearchActive, setSearchActive] = useState(false);
+  const isInfoVisible = isQuestionLineageVisible || isCollectionPathVisible;
+
+  const handleLogoClick = useCallback(() => {
+    onCloseNavbar();
+  }, [onCloseNavbar]);
+
+  const handleSearchActive = useCallback(() => {
+    setSearchActive(true);
+    onCloseNavbar();
+  }, [onCloseNavbar]);
+
+  const handleSearchInactive = useCallback(() => {
+    setSearchActive(false);
+  }, []);
+
+  return (
+    <AppBarRoot>
+      <AppBarHeader>
+        <AppBarMainContainer>
+          <AppBarToggleContainer>
+            {isNavBarVisible && (
+              <AppBarToggle
+                isNavBarOpen={isNavBarOpen}
+                onToggleClick={onToggleNavbar}
+              />
+            )}
+          </AppBarToggleContainer>
+          <AppBarSearchContainer>
+            {isSearchVisible && (
+              <SearchBar
+                onSearchActive={handleSearchActive}
+                onSearchInactive={handleSearchInactive}
+              />
+            )}
+          </AppBarSearchContainer>
+        </AppBarMainContainer>
+        <AppBarLogoContainer isVisible={!isSearchActive}>
+          <AppBarLogo onLogoClick={handleLogoClick} />
+        </AppBarLogoContainer>
+      </AppBarHeader>
+      {!isNavBarOpen && isInfoVisible && (
+        <AppBarSubheader>
+          {isQuestionLineageVisible ? (
+            <QuestionLineage />
+          ) : isCollectionPathVisible ? (
+            <CollectionBreadcrumbs collectionId={collectionId} />
+          ) : null}
+        </AppBarSubheader>
+      )}
+    </AppBarRoot>
+  );
+};
+
+export default AppBarSmall;

frontend/src/metabase/nav/components/AppBar/AppBarToggle.styled.tsx

+import styled from "@emotion/styled";
+import { color } from "metabase/lib/colors";
+import Icon from "metabase/components/Icon";
+
+export const SidebarButton = styled.button`
+  cursor: pointer;
+  display: block;
+`;
+
+export const SidebarIcon = styled(Icon)`
+  color: ${color("brand")};
+  display: block;
+`;

frontend/src/metabase/nav/components/AppBar/AppBarToggle.tsx

+import React from "react";
+import { t } from "ttag";
+import { isMac } from "metabase/lib/browser";
+import Tooltip from "metabase/components/Tooltip";
+import { SidebarButton, SidebarIcon } from "./AppBarToggle.styled";
+
+export interface AppBarToggleProps {
+  isNavBarOpen?: boolean;
+  onToggleClick?: () => void;
+}
+
+const AppBarToggle = ({
+  isNavBarOpen,
+  onToggleClick,
+}: AppBarToggleProps): JSX.Element => {
+  return (
+    <Tooltip tooltip={getSidebarTooltip(isNavBarOpen)}>
+      <SidebarButton
+        onClick={onToggleClick}
+        data-testid="sidebar-toggle-button"
+      >
+        <SidebarIcon
+          size={28}
+          name={isNavBarOpen ? "sidebar_open" : "sidebar_closed"}
+        />
+      </SidebarButton>
+    </Tooltip>
+  );
+};
+
+const getSidebarTooltip = (isNavBarOpen?: boolean) => {
+  const message = isNavBarOpen ? t`Close sidebar` : t`Open sidebar`;
+  const shortcut = isMac() ? "(⌘ + .)" : "(Ctrl + .)";
+  return `${message} ${shortcut}`;
+};
+
+export default AppBarToggle;

frontend/src/metabase/nav/components/CollectionBreadcrumbs/CollectionBreadcrumbs.styled.tsx

 import styled from "styled-components";
-
 import { color } from "metabase/lib/colors";
 import Button from "metabase/core/components/Button";
-import { space } from "metabase/styled-components/theme";
-
-export const FilterHeaderContainer = styled.div`
-  padding-left: ${space(3)};
-  padding-bottom: ${space(2)};
-  padding-right: ${space(2)};
-`;
 
 export const PathContainer = styled.div`
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
+  min-width: 0;
 `;
 
 export const PathSeparator = styled.div`
   display: flex;
   align-items: center;
   color: ${color("text-light")};
-  margin-left: ${space(1)};
-  margin-right: ${space(1)};
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
 `;
 
 export const ExpandButton = styled(Button)`

frontend/src/metabase/nav/components/CollectionBreadcrumbs/CollectionBreadcrumbs.tsx

 import React from "react";
 import { useToggle } from "metabase/hooks/use-toggle";
+import { isRootCollection } from "metabase/collections/utils";
 import Icon from "metabase/components/Icon";
 import CollectionBadge from "metabase/questions/components/CollectionBadge";
 import { Collection } from "metabase-types/api";
@@ -8,7 +9,6 @@ import {
   PathContainer,
   PathSeparator,
 } from "./CollectionBreadcrumbs.styled";
-import { isRootCollection } from "metabase/collections/utils";
 
 export interface CollectionBreadcrumbsProps {
   collection?: Collection;
@@ -33,6 +33,7 @@ export const CollectionBreadcrumbs = ({
         <CollectionBadge
           collectionId={parts[0].id}
           inactiveColor="text-medium"
+          isSingleLine
         />
         <CollectionSeparator onClick={toggle} />
         <ExpandButton
@@ -51,6 +52,7 @@ export const CollectionBreadcrumbs = ({
           <CollectionBadge
             collectionId={collection.id}
             inactiveColor="text-medium"
+            isSingleLine
           />
           <CollectionSeparator onClick={toggle} />
         </>
@@ -63,6 +65,7 @@ export const CollectionBreadcrumbs = ({
       <CollectionBadge
         collectionId={collection.id}
         inactiveColor="text-medium"
+        isSingleLine
       />
     </PathContainer>
   );

frontend/src/metabase/nav/components/NewItemButton/NewItemButton.styled.tsx

 import styled from "@emotion/styled";
 import Button from "metabase/core/components/Button/Button";
-import NewItemMenu from "metabase/containers/NewItemMenu";
 import { breakpointMaxSmall } from "metabase/styled-components/theme";
 
-export const NewMenu = styled(NewItemMenu)`
-  margin-right: 0.5rem;
-
-  ${breakpointMaxSmall} {
-    display: none;
-  }
-`;
-
 export const NewButton = styled(Button)`
   display: flex;
   align-items: center;
   height: 2.25rem;
-  margin-right: 0.5rem;
   padding: 0.5rem;
 
   ${Button.TextContainer} {

frontend/src/metabase/nav/components/NewItemButton/NewItemButton.tsx

 import React from "react";
 import { t } from "ttag";
-import { NewButton, NewButtonText, NewMenu } from "./NewItemButton.styled";
+import NewItemMenu from "metabase/containers/NewItemMenu";
+import { NewButton, NewButtonText } from "./NewItemButton.styled";
 
 const NewItemButton = () => {
   return (
-    <NewMenu
+    <NewItemMenu
       trigger={
         <NewButton
           primary

frontend/src/metabase/nav/components/QuestionLineage/QuestionLineage.tsx

@@ -20,7 +20,7 @@ const QuestionLineage = ({
   }
 
   return (
-    <Badge icon={icon}>
+    <Badge icon={icon} isSingleLine>
       {t`Started from`}{" "}
       <Link className="link" to={originalQuestion.getUrl()}>
         {originalQuestion.displayName()}

frontend/src/metabase/nav/components/SearchBar.styled.tsx

@@ -17,6 +17,10 @@ const activeInputCSS = css`
   justify-content: flex-start;
 `;
 
+export const SearchBarRoot = styled.div`
+  width: 100%;
+`;
+
 export const SearchInputContainer = styled.div<{ isActive: boolean }>`
   display: flex;
   flex: 1 1 auto;