react-sidenav icon indicating copy to clipboard operation
react-sidenav copied to clipboard

Change side bar color and fix side bar 100% height

Open pavvvan opened this issue 5 years ago • 4 comments

pavvvan avatar Apr 23 '20 21:04 pavvvan

Changing the color is simple:

import SideNav from "@trendmicro/react-sidenav";

const StyledSideNav = styled(SideNav)`
    background-color: #0057c3;
`;

The bar out-of-the-box works for 100% height for me, do you have a picture to show what you mean?

pedrohba1 avatar Jun 01 '20 21:06 pedrohba1

I actually found out your problem, of the 100% height. try adding this inside you SideNav component:

   style={{
                        position: "fixed",
                    }}

this will fix the navbar to the right, and then the user can scrooll the page and it will always show it in same place. It is no 100% height but it works for desktop at least

pedrohba1 avatar Jun 02 '20 23:06 pedrohba1

Changing the color is simple:

import SideNav from "@trendmicro/react-sidenav";

const StyledSideNav = styled(SideNav)`
    background-color: #0057c3;
`;

The bar out-of-the-box works for 100% height for me, do you have a picture to show what you mean?

`render() {

const { expanded} = this.state;

const StyledSideNav = styled(SideNav)`
background-color: #808080;

`;

return (

(
        <SideNav StyledSideNav={StyledSideNav}

` Should it bi like this ? it didn't wordk for me ?

moezlaarif avatar Jun 05 '20 12:06 moezlaarif

I also cannot change the background. Do you find the solution?
version: react-sidenav: "^4.0.6"

christrt9 avatar Jun 27 '20 15:06 christrt9