animating sliding div in react on button click from another component - Reactjs

mordor619
February 17, 2023
198 views
1 vote
2 Answers

i am trying to create a navbar and a sidebar. i have a button in navbar and when i click on it a sidebar appears and disappears. both are seperate components. i am doing this using state.
but now instead of just appearing on screen i want the sidebar to animate(slide in from left and slide out to left) but i am unable to figure out how. can someone help?

Home.js

import { useState } from "react";
import Navbar from "../navbar/navbar";
import Sidebar from "../sidebar/sidebar";
import "./style.css";
import { useSelector, useDispatch } from "react-redux";

function Home() {
  const sidebarOpen = useSelector((state) => state.sidebarOpenState);

  return (
    <>
      <Navbar />

      <div className="home-box d-flex">
        {sidebarOpen && (
          <div className="p-2 flex-fill">
            <Sidebar />
          </div>
        )}
      </div>
    </>
  );
}

export default Home;

Sidebar.js

export default function Sidebar() {
return (<div className="divSidebar">
</div>)
}

navbar.js

import "./style.css";

import { useSelector, useDispatch } from "react-redux";
import { actions } from "../../store/indexStore";
import { Link } from "react-router-dom";

function Navbar() {
  const sidebarOpen = useSelector((state) => state.sidebarOpenState);
  const dispatch = useDispatch();

  const handleToggleSidebar = (e) => {
    e.preventDefault();
    // console.log('CLICKED');
    dispatch(actions.toggleSidebar());
  };

  return (
    <div className="divNavbar">
      <ul>

        <li>
          <button className="btn-navbar-burger" onClick={handleToggleSidebar}>

          </button>
        </li>

      </ul>
    </div>
  );
}

export default Navbar;

let me know if u want anything else.

—edit

style.css(sidebar)

.divSidebar {
  margin-top: 5px;
  height: 550px;
  width: 300px;
  background-color: #6cb4ee;
}

Tags: javascript reactjs

Answers

for show animation you need to doing hide/show Sidebar with changing css style or toggle an class :

import { useState } from "react";
import Navbar from "../navbar/navbar";
import Sidebar from "../sidebar/sidebar";
import "./style.css";
import { useSelector, useDispatch } from "react-redux";

function Home() {
  const sidebarOpen = useSelector((state) => state.sidebarOpenState);

  return (
    <>
      <Navbar />

      <div className="home-box d-flex">
          <div className={"p-2 flex-fill " + (sidebarOpen?"show":"hide") }>
            <Sidebar />
          </div>
      </div>
    </>
  );
}

export default Home;

update :

for example you can add this css style for hide or show to element :

.home-box .divSidebar {
    margin-top: 5px;
    height: 550px;
    width: 300px;
    background-color: #6cb4ee;
    transition: .3s all; /* animation duration */
    opacity:1;
}

.home-box.show .divSidebar{
    width:300px;
    opacity:1; 
}
.home-box.hide .divSidebar.hide{
    width:0;
    opacity:.5; 
}

Like this goonerbox.com

Very easy do !

Styled components just attaches css to the div’s. I suggest you use styled components on your project !

import { useState } from "react";

import Styled from "styled-components";

const Component = props => {
    const [open, setOpen] = useState(false);
    const onOpen = () => setOpen(true);
    const onClose = () => setOpen(false);
    return (
        <Container>
            <Menu open = {open} />
            <Section open = {open}>
                <Header>
                    <Icon onClick = {onOpen} />
                    <Logo>
                        ooo
                    </Logo>
                    <Empty />
                </Header>
                <Main>
                    <Block />
                    <Spacer />
                    <Stuff />
                </Main>
            </Section>
            <Backdrop
                open = {open}
                onClick = {onClose} />
        </Container>
    );
};

const Container = Styled.div`
    width: 100%;
    height: 100%;
    position: relative;
    background: white;
`;

const Menu = Styled.div`
    width: 300px;
    height: 100%;
    background: black;
    position: absolute;
    left: ${({ open }) => open ? "0px" : "-300px"};
    transition: left ease 0.2s;
`;

const Section = Styled.div`
    width: 100%;
    height: 100%;
    position: absolute;
    left: ${({ open }) => open ? "300px" : "0px"};
    transition: left ease 0.2s;
`;

const Header = Styled.div`
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: red;
    padding: 0px 20px;
`;

const Icon = Styled.div`
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50%;
    cursor: pointer;
    &:hover { background: pink; }
`;

const Logo = Styled.div`
    height: 26px;
    color: white;
    font-size: 30px;
    line-height: 22px;
`;

const Empty = Styled.div`
    width: 40px;
    height: 40px;
`;

const Main = Styled.div`
    width: 100%;
    height: calc(100% - 60px);
    overflow-y: scroll;
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
`;

const Block = Styled.div`
    width: 100%;
    height: 120px;
    background: yellow;
`;

const Spacer = Styled.div`
    width: 100%;
    height: 20px;
`;

const Stuff = Styled.div`
    width: 100%;
    height: 2000px;
    background: purple;
`;

const Backdrop = Styled.div`
    width: 100%;
    height: 100%;
    position: absolute;
    background: black;
    opacity: ${({ open }) => open ? "0.5" : "0"};
    left: ${({ open }) => open ? "300px" : "0px"};
    transition: opacity ease 0.25s, left ease 0.2s;
    ${({ open }) => !open && " pointer-events: none; "};
    cursor: pointer;
`;

export default Component;

animating sliding div in react on button click from another component – Reactjs

Answers