Mini-navigation and non-fixed app bar indent when scrolling down

[bubblekovrik]

Description When using mini-navigation, it is 56 pixels down to not overlap the app bar, but when scrolling down without the app bar, it is padded 56 pixels from the top.

Screenshots

Sandbox
Here is a small change to the sandbox of the example code to show the problem:
https://codesandbox.io/s/layout-example-configurable-layout-forked-s7vof?file=/src/Demo.jsx

[mlaursen]

Thanks for reporting this. I think I'll include this fix along with #1082.

A reminder for me when I tackle this:

• I have a POC available here
• basically need to wrap the <LayoutNavigation> and <LayoutMain> components in a new div if the appBarProps?.fixed === false
• the new <div> should have:

  display: grid;
  grid-template-columns: rmd-layout-theme-var(mini-nav-width) 1fr;

• the LayoutNavigation's container should set overflow: visible and position: initial
• the LayoutNavigation's <nav> should set:

  height: auto;
  overflow: auto;
  position: sticky;
  top: 0;

• I'll need to do a few other changes to support the toggleable-mini layout

[mlaursen]

Quick update -- I mostly have this ready but there are some performance issues when using the toggleable-mini layout that I'm trying to solve. The drawer doesn't animate well and is choppy because of swapping between a grid and the margin-left that gets applied.