Comments (6)
@donatoaguirre24 For temporary fix, I will add collapsedIconProps to Nav. I will propose a permanent way later because now I'm working on mui-formik to integrate Material-UI with formik and it need custom styling solution, so I want both of the project to follow the same way.
from mui-layout.
@donatoaguirre24 Here it is!
https://siriwatknp.github.io/mui-layout/?path=/story/custom-styles--nav
from mui-layout.
I think if we can set z-index: 1201;
to MuiDrawer-paperAnchorDockedLeft
I think we can have the left navigation to go over the header.
@siriwatknp What do you think?
from mui-layout.
@elitan what is your use case? there is a props clipped
to set Nav
as the same layer as Header
from mui-layout.
@elitan what is your use case? there is a props
clipped
to setNav
as the same layer asHeader
When I use this:
const config = {
...standard_config,
navVariant: {
xs: 'temporary',
sm: 'permanent',
md: 'permanent',
},
collapsedBreakpoint: 'md', // collapse between sm and xs
collapsible: {
xs: false,
sm: true,
},
clipped: true,
squeezed: false,
headerPosition: 'fixed',
};
The Header
has z-index: 1201
and the Nav
has z-index: 1200
. I was thinking if there was any way to get the Nav
to be above (higher z-indez
) than Header
.
from mui-layout.
@elitan what is your use case? there is a props
clipped
to setNav
as the same layer asHeader
When I use this:
const config = { ...standard_config, navVariant: { xs: 'temporary', sm: 'permanent', md: 'permanent', }, collapsedBreakpoint: 'md', // collapse between sm and xs collapsible: { xs: false, sm: true, }, clipped: true, squeezed: false, headerPosition: 'fixed', };
The
Header
hasz-index: 1201
and theNav
hasz-index: 1200
. I was thinking if there was any way to get theNav
to be above (higherz-indez
) thanHeader
.
Yes you can do this if you want to override the styles of Header
import { makeStyles } from '@material-ui/styles';
const useAppBarStyles = makeStyles(({ palette }) => ({
root: {
zIndex: 1190,
},
}));
function App() {
const appBarStyles = useAppBarStyles();
return (
<Root>
<Header classes={appBarStyles} />
</Root>
)
}
from mui-layout.
Related Issues (17)
- TypeError: Cannot read property 'breakpoints' of null HOT 3
- Nav gets temporarily clipped using preset standard HOT 1
- Compatibility for material 4.3.0 HOT 1
- Clipped header overlays content of the nav HOT 2
- SSR support HOT 1
- Add types definition
- Problem of space on main page by Navigation Drawer HOT 1
- Nav breaks when using provided "dark" style from the Storybook
- If the screen width is greater or equal than 1920 the screen prop is 'xs' when should be 'xl' HOT 10
- Any plans to add typescript support?
- Material-UI error on Nav Drawer classes customization
- Config to get Nav Collapsed on start ?
- How to detect when sidenav is open or not?
- height adjustment should not work when Header position is "fixed"
- Nav collapsed at the beginning of very large screen
- Auto disable height adjustment when nav's variant is "temporary"
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mui-layout.