fix(layout): non-fixed AppBar mini layouts

Closes #1101

Author: mlaursen

packages/layout/src/LayoutChildren.tsx

@@ -1,4 +1,10 @@
-import React, { ReactElement, ReactNode, useEffect, useState } from "react";
+import React, {
+  HTMLAttributes,
+  ReactElement,
+  ReactNode,
+  useEffect,
+  useState,
+} from "react";
 import { SkipToMainContent, SkipToMainContentProps } from "@react-md/link";
 import { BaseTreeItem, TreeData } from "@react-md/tree";
 import { PropsWithRef } from "@react-md/utils";
@@ -8,6 +14,7 @@ import { LayoutAppBar } from "./LayoutAppBar";
 import { LayoutMain, LayoutMainProps } from "./LayoutMain";
 import { LayoutNavigation } from "./LayoutNavigation";
 import { useLayoutConfig } from "./LayoutProvider";
+import { MiniLayoutWrapper } from "./MiniLayoutWrapper";
 import { LayoutNavigationItem } from "./types";
 import { isMiniLayout } from "./utils";
 
@@ -60,6 +67,23 @@ export interface LayoutChildrenProps<
    */
   miniNavItems?: TreeData<T>;
 
+  /**
+   * This prop allows you to provide additional props to the `<div>` surrounding
+   * the `LayoutMain` and mini `LayoutNavigation` components.
+   *
+   * Note: This additional `<div>` will only be rendered if:
+   * - the current layout is one of the `mini` types
+   * - the layout is not using a fixed app bar
+   * - the `miniNav` prop has not been defined
+   * - `treeProps` have been provided
+   *
+   * @remarks \@since 2.8.3
+   */
+  miniWrapperProps?: PropsWithRef<
+    HTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
+  >;
+
   /**
    * The children to display within the layout. This is pretty much required
    * since you'll have an empty app otherwise, but it's left as optional just
@@ -88,8 +112,9 @@ export function LayoutChildren({
   navToggleProps,
   navAfterAppBar = false,
   nav: propNav,
-  miniNav: propMiniNav,
+  miniNav,
   miniNavItems,
+  miniWrapperProps,
   navHeader,
   navHeaderProps,
   navHeaderTitle,
@@ -151,48 +176,36 @@ export function LayoutChildren({
     );
   }
 
-  let miniNav = propMiniNav;
-  if (mini && treeProps && typeof miniNav === "undefined") {
-    let miniTreeProps = treeProps;
-    if (miniNavItems) {
-      miniTreeProps = {
-        ...miniTreeProps,
-        navItems: miniNavItems,
-      };
-    }
-
-    miniNav = (
-      <LayoutNavigation
-        header={navHeader}
-        headerProps={navHeaderProps}
-        headerTitle={navHeaderTitle}
-        headerTitleProps={navHeaderTitleProps}
-        closeNav={closeNav}
-        closeNavProps={closeNavProps}
-        treeProps={miniTreeProps}
-        {...navProps}
-        mini
-        hidden={miniHidden}
-      />
-    );
-  }
-
   return (
     <>
       <SkipToMainContent {...skipProps} mainId={mainId} />
       {navAfterAppBar && appBar}
       {nav}
       {!navAfterAppBar && appBar}
-      {/* mini nav should always be in tab index after app bar */}
-      {miniNav}
-      <LayoutMain
-        headerOffset={fixedAppBar}
-        {...mainProps}
-        id={mainId}
+      <MiniLayoutWrapper
         mini={mini}
+        miniNav={miniNav}
+        miniHidden={miniHidden}
+        containerProps={miniWrapperProps}
+        miniNavItems={miniNavItems}
+        treeProps={treeProps}
+        header={navHeader}
+        headerProps={navHeaderProps}
+        headerTitle={navHeaderTitle}
+        headerTitleProps={navHeaderTitleProps}
+        closeNav={closeNav}
+        closeNavProps={closeNavProps}
       >
-        {children}
-      </LayoutMain>
+        <LayoutMain
+          headerOffset={fixedAppBar}
+          mini={mini}
+          miniHidden={miniHidden}
+          {...mainProps}
+          id={mainId}
+        >
+          {children}
+        </LayoutMain>
+      </MiniLayoutWrapper>
     </>
   );
 }

packages/layout/src/LayoutMain.tsx

@@ -7,7 +7,7 @@ import { bem, useIsUserInteractionMode } from "@react-md/utils";
 
 import { DEFAULT_LAYOUT_MAIN_CLASSNAMES } from "./constants";
 import { useLayoutConfig } from "./LayoutProvider";
-import { isTemporaryLayout } from "./utils";
+import { isTemporaryLayout, isToggleableLayout } from "./utils";
 
 export interface LayoutMainProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -38,6 +38,16 @@ export interface LayoutMainProps extends HTMLAttributes<HTMLDivElement> {
    */
   mini?: boolean;
 
+  /**
+   * Boolean if the mini layout is currently hidden to help determine if
+   * specific mini styles should be applied when the {@link LayoutContext.fixedAppBar}
+   * config is `false`.
+   *
+   * @internal
+   * @remarks \@since 2.8.3
+   */
+  miniHidden?: boolean;
+
   /**
    * The transition timeout to use for the toggleable `LayoutNavigation` either
    * comes into view or expands from mini to full-width. The transition can be
@@ -69,6 +79,7 @@ export const LayoutMain = forwardRef<HTMLDivElement, LayoutMainProps>(
       timeout: propTimeout = DEFAULT_SHEET_TIMEOUT,
       classNames = DEFAULT_LAYOUT_MAIN_CLASSNAMES,
       mini = false,
+      miniHidden = false,
       ...props
     },
     forwardedRef
@@ -88,7 +99,7 @@ export const LayoutMain = forwardRef<HTMLDivElement, LayoutMainProps>(
       tabIndex = -1;
     }
 
-    const { layout, visible } = useLayoutConfig();
+    const { layout, visible, fixedAppBar } = useLayoutConfig();
     let navOffset = propNavOffset;
     if (typeof navOffset === "undefined") {
       navOffset = visible && !isTemporaryLayout(layout);
@@ -120,15 +131,24 @@ export const LayoutMain = forwardRef<HTMLDivElement, LayoutMainProps>(
       },
     });
 
+    const isMini = mini && (fixedAppBar || miniHidden);
+    const isMiniOffset =
+      mini &&
+      navOffset &&
+      !fixedAppBar &&
+      visible &&
+      isToggleableLayout(layout);
+
     return (
       <Component
         {...props}
         ref={ref}
         tabIndex={tabIndex}
         className={cn(
           styles({
-            mini: mini && (isTemporaryLayout(layout) || !visible),
-            "nav-offset": mini,
+            mini: isMini && (isTemporaryLayout(layout) || !visible),
+            "nav-offset": isMini,
+            "mini-offset": isMiniOffset,
             "header-offset": headerOffset,
           }),
           className

packages/layout/src/LayoutNavigation.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, ReactNode } from "react";
 import cn from "classnames";
 import { Sheet, SheetProps } from "@react-md/sheet";
-import { BaseTreeItem } from "@react-md/tree";
+import { BaseTreeItem, TreeItemRenderer } from "@react-md/tree";
 import { bem, PropsWithRef } from "@react-md/utils";
 
 import { LayoutCloseNavigationButtonProps } from "./LayoutCloseNavigationButton";
@@ -17,6 +17,7 @@ import {
   isTemporaryLayout,
   isToggleableLayout,
 } from "./utils";
+import { defaultMiniNavigationItemRenderer } from "./defaultMiniNavigationItemRenderer";
 
 export type LayoutNavigationSheetProps = Omit<
   SheetProps,
@@ -94,6 +95,18 @@ export interface LayoutNavigationProps<
    * @remarks \@since 2.7.0
    */
   mini?: boolean;
+
+  /**
+   * Boolean if the mini navigation should be treated as a "sticky" element.
+   * This should really only be `true` if disabling the fixed `AppBar` behavior
+   * in the `Layout`.
+   *
+   * @remarks \@since 2.8.3
+   */
+  sticky?: boolean;
+
+  /** @remarks \@since 2.8.3 */
+  miniNavItemRenderer?: TreeItemRenderer<T>;
 }
 
 const styles = bem("rmd-layout-navigation");
@@ -120,6 +133,8 @@ export const LayoutNavigation = forwardRef<
     closeNav,
     closeNavProps,
     treeProps,
+    sticky = false,
+    miniNavItemRenderer = defaultMiniNavigationItemRenderer,
     ...props
   },
   ref
@@ -172,14 +187,22 @@ export const LayoutNavigation = forwardRef<
       className={cn(
         styles({
           mini,
+          sticky,
           floating,
           "header-offset": layout === "clipped" || floating,
         }),
         className
       )}
     >
       {header}
-      {treeProps && <LayoutTree {...treeProps} mini={mini} />}
+      {treeProps && (
+        <LayoutTree
+          miniItemRenderer={miniNavItemRenderer}
+          sticky={mini && sticky}
+          {...treeProps}
+          mini={mini}
+        />
+      )}
       {children}
     </Sheet>
   );

packages/layout/src/LayoutTree.tsx

@@ -1,6 +1,12 @@
 import React, { CSSProperties, forwardRef, useEffect, useRef } from "react";
 import cn from "classnames";
-import { BaseTreeItem, Tree, TreeData, TreeProps } from "@react-md/tree";
+import {
+  BaseTreeItem,
+  Tree,
+  TreeData,
+  TreeItemRenderer,
+  TreeProps,
+} from "@react-md/tree";
 import { bem } from "@react-md/utils";
 
 import { defaultMiniNavigationItemRenderer } from "./defaultMiniNavigationItemRenderer";
@@ -11,9 +17,8 @@ import { isTemporaryLayout } from "./utils";
 
 const styles = bem("rmd-layout-nav");
 
-export type BaseLayoutTreeProps<
-  T extends BaseTreeItem = LayoutNavigationItem
-> = Omit<TreeProps<T>, "id" | "data" | "aria-label" | "aria-labelledby">;
+export type BaseLayoutTreeProps<T extends BaseTreeItem = LayoutNavigationItem> =
+  Omit<TreeProps<T>, "id" | "data" | "aria-label" | "aria-labelledby">;
 
 export interface LayoutTreeProps<T extends BaseTreeItem = LayoutNavigationItem>
   extends BaseLayoutTreeProps<T> {
@@ -47,6 +52,22 @@ export interface LayoutTreeProps<T extends BaseTreeItem = LayoutNavigationItem>
    */
   mini?: boolean;
 
+  /**
+   * Boolean if the mini navigation should be treated as a "sticky" element.
+   * This should really only be `true` if disabling the fixed `AppBar` behavior
+   * in the `Layout`.
+   *
+   * @remarks \@since 2.8.3
+   */
+  sticky?: boolean;
+
+  /**
+   * The {@link TreeItemRenderer} to use if the `mini` prop is enabled.
+   *
+   * @remarks \@since 2.8.3
+   */
+  miniItemRenderer?: TreeItemRenderer<T>;
+
   /**
    * Optional style to provide to the `<nav>` element surrounding the tree
    */
@@ -84,14 +105,14 @@ export const LayoutTree = forwardRef<HTMLUListElement, LayoutTreeProps>(
       "aria-label": ariaLabel = ariaLabelledBy ? undefined : "Navigation",
       className,
       mini = false,
+      sticky = false,
       navStyle,
       navClassName,
       navItems,
       labelKey = "children",
       valueKey = "children",
-      itemRenderer = mini
-        ? defaultMiniNavigationItemRenderer
-        : defaultNavigationItemRenderer,
+      itemRenderer = defaultNavigationItemRenderer,
+      miniItemRenderer = defaultMiniNavigationItemRenderer,
       selectedIds,
       disableTemporaryAutoclose = false,
       ...props
@@ -127,7 +148,7 @@ export const LayoutTree = forwardRef<HTMLUListElement, LayoutTreeProps>(
       <nav
         id={`${id}-nav`}
         style={navStyle}
-        className={cn(styles({ mini }), navClassName)}
+        className={cn(styles({ sticky, grow: !sticky }), navClassName)}
       >
         <Tree
           {...props}
@@ -139,7 +160,7 @@ export const LayoutTree = forwardRef<HTMLUListElement, LayoutTreeProps>(
           labelKey={labelKey}
           valueKey={valueKey}
           selectedIds={selectedIds}
-          itemRenderer={itemRenderer}
+          itemRenderer={mini ? miniItemRenderer : itemRenderer}
           className={cn("rmd-layout-tree", className)}
         />
       </nav>