From 996c597932222f0d2b56c748c318356c3e7ec7a4 Mon Sep 17 00:00:00 2001
From: Mikkel Laursen <mlaursen03@gmail.com>
Date: Sun, 9 May 2021 18:56:13 -0600
Subject: [PATCH] fix(layout): non-fixed AppBar mini layouts

Closes #1101
---
 packages/layout/src/LayoutChildren.tsx        |  87 +++++-----
 packages/layout/src/LayoutMain.tsx            |  27 +++-
 packages/layout/src/LayoutNavigation.tsx      |  27 +++-
 packages/layout/src/LayoutTree.tsx            |  39 +++--
 packages/layout/src/MiniLayoutWrapper.tsx     | 149 ++++++++++++++++++
 .../__tests__/__snapshots__/Layout.tsx.snap   |   2 +-
 packages/layout/src/_mixins.scss              |  22 ++-
 7 files changed, 301 insertions(+), 52 deletions(-)
 create mode 100644 packages/layout/src/MiniLayoutWrapper.tsx

diff --git a/packages/layout/src/LayoutChildren.tsx b/packages/layout/src/LayoutChildren.tsx
index 0a5278a4a7..70d34c8a10 100644
--- a/packages/layout/src/LayoutChildren.tsx
+++ b/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,
@@ -152,48 +177,38 @@ 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}
+        fixedAppBar={fixedAppBar}
+        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}
+          fixedAppBar={fixedAppBar}
+          {...mainProps}
+          id={mainId}
+        >
+          {children}
+        </LayoutMain>
+      </MiniLayoutWrapper>
     </>
   );
 }
diff --git a/packages/layout/src/LayoutMain.tsx b/packages/layout/src/LayoutMain.tsx
index d06942e5a3..2d25450abd 100644
--- a/packages/layout/src/LayoutMain.tsx
+++ b/packages/layout/src/LayoutMain.tsx
@@ -38,6 +38,25 @@ 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 fixedAppBar} prop is
+   * `false`.
+   *
+   * @internal
+   * @remarks \@since 2.8.3
+   */
+  miniHidden?: boolean;
+
+  /**
+   * Boolean if the `AppBar` used by the layout is currently fixed to the top of
+   * the page.
+   *
+   * @internal
+   * @remarks \@since 2.8.3
+   */
+  fixedAppBar?: 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 +88,8 @@ export const LayoutMain = forwardRef<HTMLDivElement, LayoutMainProps>(
       timeout: propTimeout = DEFAULT_SHEET_TIMEOUT,
       classNames = DEFAULT_LAYOUT_MAIN_CLASSNAMES,
       mini = false,
+      miniHidden = false,
+      fixedAppBar = true,
       ...props
     },
     forwardedRef
@@ -120,6 +141,8 @@ export const LayoutMain = forwardRef<HTMLDivElement, LayoutMainProps>(
       },
     });
 
+    const isMini = mini && (fixedAppBar || miniHidden);
+
     return (
       <Component
         {...props}
@@ -127,8 +150,8 @@ export const LayoutMain = forwardRef<HTMLDivElement, LayoutMainProps>(
         tabIndex={tabIndex}
         className={cn(
           styles({
-            mini: mini && (isTemporaryLayout(layout) || !visible),
-            "nav-offset": mini,
+            mini: isMini && (isTemporaryLayout(layout) || !visible),
+            "nav-offset": isMini,
             "header-offset": headerOffset,
           }),
           className
diff --git a/packages/layout/src/LayoutNavigation.tsx b/packages/layout/src/LayoutNavigation.tsx
index 986010857f..d02e3ffb98 100644
--- a/packages/layout/src/LayoutNavigation.tsx
+++ b/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,6 +187,7 @@ export const LayoutNavigation = forwardRef<
       className={cn(
         styles({
           mini,
+          sticky,
           floating,
           "header-offset": layout === "clipped" || floating,
         }),
@@ -179,7 +195,14 @@ export const LayoutNavigation = forwardRef<
       )}
     >
       {header}
-      {treeProps && <LayoutTree {...treeProps} mini={mini} />}
+      {treeProps && (
+        <LayoutTree
+          miniItemRenderer={miniNavItemRenderer}
+          sticky={mini && sticky}
+          {...treeProps}
+          mini={mini}
+        />
+      )}
       {children}
     </Sheet>
   );
diff --git a/packages/layout/src/LayoutTree.tsx b/packages/layout/src/LayoutTree.tsx
index 338389c910..91a62ab444 100644
--- a/packages/layout/src/LayoutTree.tsx
+++ b/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>
diff --git a/packages/layout/src/MiniLayoutWrapper.tsx b/packages/layout/src/MiniLayoutWrapper.tsx
new file mode 100644
index 0000000000..7a14c1b9e1
--- /dev/null
+++ b/packages/layout/src/MiniLayoutWrapper.tsx
@@ -0,0 +1,149 @@
+import React, { HTMLAttributes, ReactElement, ReactNode } from "react";
+import cn from "classnames";
+import { BaseTreeItem, TreeData } from "@react-md/tree";
+import { bem, PropsWithRef } from "@react-md/utils";
+
+import { LayoutNavigation, LayoutNavigationProps } from "./LayoutNavigation";
+import { LayoutNavigationItem } from "./types";
+
+const styles = bem("rmd-layout-mini-wrapper");
+
+/**
+ * This is probably an internal only interface.
+ *
+ * @remarks \@since 2.8.3
+ */
+export interface MiniLayoutWrapperProps<
+  T extends BaseTreeItem = LayoutNavigationItem
+> extends LayoutNavigationProps<T> {
+  /**
+   * Boolean if the current layout is one of the `mini` types.
+   */
+  mini: boolean;
+
+  /**
+   * A custom implementation for the main mini navigation component within the
+   * `Layout`. If this is not `undefined`, it will be used instead of the
+   * default implementation.
+   *
+   * Using this prop will make the following props do nothing for the mini nav:
+   *
+   * - `navProps`
+   * - `navHeader`
+   * - `navHeaderProps`
+   * - `navHeaderTitle`
+   * - `navHeaderTitleProps`
+   * - `closeNav`
+   * - `closeNavProps`
+   * - `treeProps`
+   *
+   * @remarks \@since.2.7.0
+   */
+  miniNav?: ReactNode;
+
+  /**
+   * An optional tree to use for the mini navigation pane since the default
+   * behavior of rendering mini tree items might hide content in an
+   * undersireable way.
+   *
+   * @remarks \@since 2.7.0
+   * @see {@link defaultMiniNavigationItemRenderer} for more information
+   */
+  miniNavItems?: TreeData<T>;
+
+  /**
+   * Boolean if the `mini` layout should be hidden. This should normally happen
+   * after the non-mini layout becomes visible.
+   */
+  miniHidden: boolean;
+
+  /**
+   * Any additional props to provide to the wrapping `<div>`.
+   */
+  containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+
+  /**
+   * Boolean if there is a fixed app bar in the layout.
+   */
+  fixedAppBar: boolean;
+
+  /**
+   * The children to render. This should normally be the `LayoutMain` component.
+   */
+  children: ReactNode;
+}
+
+/**
+ * This is probably an internal only component.
+ *
+ * @remarks \@since 2.8.3
+ */
+export function MiniLayoutWrapper({
+  mini,
+  miniHidden,
+  miniNav,
+  miniNavItems,
+  treeProps,
+  header,
+  headerProps,
+  headerTitle,
+  headerTitleProps,
+  fixedAppBar,
+  closeNav,
+  closeNavProps,
+  children,
+  containerProps,
+  ...props
+}: MiniLayoutWrapperProps): ReactElement {
+  if (!mini || !treeProps || typeof miniNav !== "undefined") {
+    return (
+      <>
+        {miniNav}
+        {children}
+      </>
+    );
+  }
+
+  let miniTreeProps = treeProps;
+  if (miniNavItems) {
+    miniTreeProps = {
+      ...miniTreeProps,
+      navItems: miniNavItems,
+    };
+  }
+
+  const miniNavigation = (
+    <LayoutNavigation
+      header={header}
+      headerProps={headerProps}
+      headerTitle={headerTitle}
+      headerTitleProps={headerTitleProps}
+      closeNav={closeNav}
+      closeNavProps={closeNavProps}
+      treeProps={miniTreeProps}
+      {...props}
+      mini
+      sticky={!fixedAppBar}
+      hidden={miniHidden}
+    />
+  );
+
+  if (fixedAppBar) {
+    return (
+      <>
+        {miniNavigation}
+        {children}
+      </>
+    );
+  }
+
+  return (
+    <div
+      {...containerProps}
+      className={cn(!miniHidden && styles(), containerProps?.className)}
+    >
+      {miniNavigation}
+      {children}
+    </div>
+  );
+}
diff --git a/packages/layout/src/__tests__/__snapshots__/Layout.tsx.snap b/packages/layout/src/__tests__/__snapshots__/Layout.tsx.snap
index a1d8323dba..9d8757cced 100644
--- a/packages/layout/src/__tests__/__snapshots__/Layout.tsx.snap
+++ b/packages/layout/src/__tests__/__snapshots__/Layout.tsx.snap
@@ -185,7 +185,7 @@ exports[`Layout mini variant should display only valid nav items at the root in
   tabindex="-1"
 >
   <nav
-    class="rmd-layout-nav rmd-layout-nav--mini"
+    class="rmd-layout-nav rmd-layout-nav--grow"
     id="layout-navigation-tree-nav"
   >
     <ul
diff --git a/packages/layout/src/_mixins.scss b/packages/layout/src/_mixins.scss
index 10b35286b1..d9f9ff03a6 100644
--- a/packages/layout/src/_mixins.scss
+++ b/packages/layout/src/_mixins.scss
@@ -103,13 +103,26 @@
 
       z-index: $rmd-layout-navigation-mini-z-index;
     }
+
+    &--sticky {
+      overflow: visible;
+      position: initial;
+    }
   }
 
   .rmd-layout-nav {
     @include rmd-utils-scroll;
 
-    flex: 1 1 auto;
-    height: 100%;
+    &--grow {
+      flex: 1 1 auto;
+      height: 100%;
+    }
+
+    &--sticky {
+      position: sticky;
+      top: 0;
+      will-change: transform;
+    }
 
     &__mini-item {
       justify-content: center;
@@ -153,6 +166,11 @@
     }
   }
 
+  .rmd-layout-mini-wrapper {
+    display: grid;
+    grid-template-columns: rmd-layout-theme-var(mini-nav-width) 1fr;
+  }
+
   .rmd-layout-main {
     // going to replace the default focus outline with the custom box-shadow
     // instead