mlaursen/react-md

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

bubblekovrik opened this issue · 2 comments

bubblekovrik commented

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
image

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 commented

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 commented

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.