I must change the width of a sidebar using styled-components library in React project.
Here is the code in the Class Component :
let SidebarStyled = styled.div`
width: 200px;
position: fixed;
left: 0px;
top: 0px;
height: 100vh;
background-color: #0c1635;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
.showFlexInMobile {
display: none !important;
}
p {
color: white;
font-size: 0.85rem;
text-align: center;
}
@media (max-width: 1024px) {
width: 70px;
.hideInMobile {
display: none !important;
}
.showFlexInMobile {
display: flex !important;
}
> .link-logo {
margin-top: 8px;
> img {
width: 50px;
}
}
}
`
const hideSidebar = () => {
// my code
}
class Sidebar extends Component<ISidebar> {
render() {
return (
<SidebarStyled>
<SidebarHeaderStyled style={{ position: 'relative' }}>
<button onClick={hideSidebar} className="buttonSideBar">
-
</button>
[...]
`;
On click on the button at the end, I would like a hideSidebar
function to actually change the width from 200px to 70px.
I usually use hooks to do this, but my client has only Class components.
Anyone can help me on this ? Thank you very much
CodePudding user response:
add props to your styled tags
https://styled-components.com/docs/basics#passed-props in your case it would look something like
const Somestyled= styled.input`
padding: 0.5em;
margin: 0.5em;
width: ${props => props.somethinghere};
background: papayawhip;
border: none;
border-radius: 3px;
`;
and use it looks
<Somestyled somethinghere={yourVariableHere} />
CodePudding user response:
Hey so the code had a few errors so I corrected the syntax and created this quick little codepen I'm not gonna explain everything I fixed but I will say watch your syntax. You can achieve this quite simply in the JSX and not have to use CSS at all!
You should convert your component over to a functional one since it's the convention these days. But regardless, you need to move the logic of hiding the component in the component itself. In the example I use React.useState() to toggle a boolean and hide the component. You can also use the classic class component state management to do this. I also put and example for showing it too. ;) Good luck
const Sidebar = () => {
const [isShown, setIsShown] = React.useState(true);
const hideSidebar = () => {
setIsShown(false)
}
const showSidebar = () => {
setIsShown(true)
}
return (
<div>
{
isShown &&
(<SidebarStyled>
<button onClick={hideSidebar} className="buttonSideBar">
-
</button>
</SidebarStyled>)}
{!isShown && <button onClick={showSidebar} style={{ width: 50, height: 50, marginLeft: 300}}>
show
</button>}
</div>
);
}
CodePudding user response:
You can try to do this
//your styled component
class Sidebar extends Component<ISidebar> {
constructor( props ){
super( props );
this.state = { sidebarShow: true };
this.hideSidebar = this.hideSidebar .bind(this);
}
hideSidebar = () => {
// your code
this.setState({
...this.state,
sidebarShow: false
})
}
render() {
return (
<SidebarStyled style={{left: `${this.state.sidebarShow ? '0px' : '-250px'}` }}>
<SidebarHeaderStyled style={{ position: 'relative'}}>
<button onClick={this.hideSidebar} className="buttonSideBar">
-
</button>
[...]
`;
If you want to handle all styles in the styled component you can add a new attribute in a component
<SidebarStyled isShow={this.state.sidebarShow} >
....
</SidebarStyled>
And on component
let SidebarStyled = styled.div`
width: 200px;
position: fixed;
left: ${props=>props.isShow ? '0px': '-250px'};
...
`
It will work for you.