Example from https://react-md.dev/packages/app-bar/demos#auto-dense

AppBar Example - Auto Dense

<!DOCTYPE html>
<html lang="en" class="light-theme">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Material+Icons|Roboto:400,500,700|Source+Code+Pro"
    />
    
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/mlaursen/react-md@5.1.6/themes/react-md.teal-pink-200-light.min.css"
    />
    <title>AppBar Example - Auto Dense</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

import type { ReactElement, ReactNode } from "react";
import { useCallback, useState } from "react";
import type { AppBarTitleProps } from "@react-md/app-bar";
import { AppBarTitle as RMDAppBarTitle } from "@react-md/app-bar";
import { Tooltip, useTooltip } from "@react-md/tooltip";
import { useResizeObserver } from "@react-md/utils";

import { useId } from "./IdProvider";

/**
 * This component is a wrapper for the AppBarTitle component from
 * \@react-md/app-bar that will automatically update the title to show a tooltip
 * if the title becomes truncated.
 *
 * This is pretty hacky right so it isn't part of the main lib yet, but a better
 * solution to "auto tooltip" things might be added one day.
 */
export default function AppBarTitle({
  id,
  children,
  ...props
}: AppBarTitleProps): ReactElement {
  const [tooltip, setTooltip] = useState<ReactNode>(null);
  const updateTooltip = useCallback(
    ({ width, scrollWidth }) => {
      // the `width` is a `DOMRectReadOnly` object which allows for fractional
      // values while `scrollWidth` is always `Math.ceil` so to be able to
      // compare correctly, need to also `Math.ceil` the width or use
      // `target.offsetWidth`
      const offsetWidth = Math.ceil(width);
      const isTruncated = offsetWidth < scrollWidth;
      if (isTruncated && !tooltip) {
        setTooltip(children);
      } else if (!isTruncated && tooltip) {
        setTooltip(null);
      }
    },
    [tooltip, children]
  );
  const [, refHandler] = useResizeObserver(updateTooltip, {
    disableHeight: true,
  });
  const baseId = useId(id);
  const { elementProps, tooltipProps } = useTooltip({
    baseId,
  });

  return (
    <>
      <RMDAppBarTitle
        {...props}
        {...(tooltip ? elementProps : { id: baseId })}
        ref={refHandler}
        tabIndex={tooltip ? 0 : undefined}
      >
        {children}
      </RMDAppBarTitle>
      <Tooltip {...tooltipProps}>{tooltip}</Tooltip>
    </>
  );
}


// Note: Outside of codesandbox, this can be `@use 'react-md' as *;`
@use 'react-md/dist/everything' as *;

.container {
  @include rmd-utils-desktop-media {
    @include rmd-app-bar-theme-update-var(
      height,
      rmd-app-bar-theme-var(dense-height)
    );

    .prominent {
      @include rmd-app-bar-theme-update-var(
        prominent-height,
        rmd-app-bar-theme-var(prominent-dense-height)
      );
    }
  }
}

.prominent {
  @include rmd-app-bar-theme-update-var(
    prominent-height,
    rmd-app-bar-theme-var(prominent-dense-height)
  );

  // just because I don't want to create 2 rows of data for this example
  align-items: flex-start;
}


import type { HTMLAttributes, ReactElement } from "react";
import { Grid } from "@react-md/utils";

export default function Container({
  children,
  ...props
}: HTMLAttributes<HTMLDivElement>): ReactElement {
  return (
    <Grid {...props} clone padding={0} columns={1}>
      {children}
    </Grid>
  );
}


import type { ReactElement } from "react";
import { AppBar, AppBarNav } from "@react-md/app-bar";
import { MenuSVGIcon } from "@react-md/material-icons";

import AppBarTitle from "./AppBarTitle";

import Container from "./Container";
import styles from "./AutoDense.module.scss";

export default function Demo(): ReactElement {
  return (
    <Container className={styles.container}>
      <AppBar id="auto-dense-app-bar">
        <AppBarNav id="auto-dense-app-bar-nav" aria-label="Navigation">
          <MenuSVGIcon />
        </AppBarNav>
        <AppBarTitle>Auto Dense</AppBarTitle>
      </AppBar>
      <AppBar
        id="auto-prominent-dense-app-bar"
        className={styles.prominent}
        height="prominent"
      >
        <AppBar>
          <AppBarNav
            id="auto-prominent-dense-app-bar-nav"
            aria-label="Navigation"
          >
            <MenuSVGIcon />
          </AppBarNav>
          <AppBarTitle>Auto Dense and prominent</AppBarTitle>
        </AppBar>
      </AppBar>
    </Container>
  );
}


import type { ReactNode, ReactElement } from "react";
import { createContext, useContext, useMemo } from "react";
import createIdGenerator from "./createIdGenerator";

type IdGenerator = ReturnType<typeof createIdGenerator>;

const context = createContext<IdGenerator>(createIdGenerator("autoid"));
const { Provider } = context;

export function useId(id?: string): string {
  const generator = useContext(context);

  return useMemo(() => {
    if (id) {
      return id;
    }

    return generator();
  }, [id, generator]);
}

export interface IdProviderProps {
  prefix?: string;
  children: ReactNode;
}

export function IdProvider({
  children,
  prefix = "autoid",
}: IdProviderProps): ReactElement {
  const value = useMemo(() => createIdGenerator(prefix), [prefix]);

  return <Provider value={value}>{children}</Provider>;
}


@use "@react-md/theme/dist/color-palette" as *;
// Note: Outside of codesandbox, this can be `@forward "react-md" with (`
@forward "react-md/dist/everything" with (
  $rmd-theme-light: true,
  $rmd-theme-primary: $rmd-teal-500,
  $rmd-theme-secondary: $rmd-pink-a-200,
);


/**
 * An extremely simplified uuid function that is scoped with a specific prefix.
 * This will just always increment the total count at the end of the prefix.
 *
 * ```ts
 * const uuid = createIdGenerator("my-custom-prefix");
 *
 * uuid(); // my-custom-prefix-0
 * uuid(); // my-custom-prefix-1
 * uuid(); // my-custom-prefix-2
 * ```
 *
 * @param prefix - The string prefix to use
 * @returns a function to call to generate a "uuid"
 */
export default function createIdGenerator(prefix: string): () => string {
  const generator = (function* idGenerator() {
    let index = 0;
    while (true) {
      yield `${prefix}-${index}`;
      index += 1;
    }
  })();

  return (): string => generator.next().value;
}


import { render } from "react-dom";
import { Configuration } from "@react-md/layout";

// the styles are actually loaded as the pre-compiled themes in the index.html
// to speed up sandbox compilation. If you want to update the theme, you'll need
// to uncomment this line and remove the `<link>` tag in the `index.html`
// import "./styles.scss"

import Demo from "./Demo";

const App = () => (
  <Configuration>
    <Demo />
  </Configuration>
);

render(<App />, document.getElementById("root"));


@use "./everything" as *;

@include react-md-utils;
