I successfully implemented the sidebar to appear upon clicking the hamburger icon with a transition. However, I am now facing the challenge of triggering the transition when the close button is clicked instead. I have attempted using conditional operations within the render itself, but it did not yield the desired outcome. The code snippet below represents my latest attempt. Any advice on how to achieve this transition would be greatly appreciated. Thank you in advance.

Screenshot Sample

https://i.sstatic.net/DUZxX.gif

Home.jsx

/*
  notes:

  date created: 15/03/2023
*/

import React, { useState, useRef, useEffect } from 'react';
import { Sidebar, UserProfile } from '../components';
import Pins from './Pins';
import { client } from '../client';
import myLogo from '../assets/logoCropped.png';
import { userQuery, fetchUserFromLocalStorage } from '../utils/data';
import { HiMenu } from 'react-icons/hi';
import { AiFillCloseCircle } from 'react-icons/ai';
import { Link, Route, Routes } from 'react-router-dom';

// TODO: added this along the way. continue doing this until it works
const hiddenSidebar = 'fixed w-1/2 bg-black h-screen overflow-y-auto shadow-md z-10 animate-slide-in duration-75';
const activeSidebar = 'bg-red-500 z-10 transition transition-all ';

const Home = () => {

  const [toggleSideBar, setToggleSideBar] = useState(false);
  const [user, setUser] = useState(null);
  const scrollRef = useRef(null);

  // const userInfo = localStorage.getItem('user') !== 'undefined' ? JSON.parse(localStorage.getItem('user')) : localStorage.clear();
  const userInfo = fetchUserFromLocalStorage();

  // set up scroll to be at the top of the sidebar
  useEffect(() => {
    scrollRef.current.scrollTo(0, 0)
  }, [])

  // retrieve data using a query from data.js
  useEffect(() => {
    // sub is the google id
    const query = userQuery(userInfo?.sub)

    client.fetch(query)
      .then((data) => {
        setUser(data[0]);
      })
  })

  return (
    <div className='flex bg-gray-50 md:flex-row flex-col h-screen transition-height duration-75 ease-out'>

      {/* desktop sidebar */}
      <div className='hidden md:flex h-screen flex-initial'>
        <Sidebar user={user && user} />
      </div>

      {/* mobile sidebar */}
      <div className='flex md:hidden flex-row'>
        <div className='p-2 w-full flex flex-row justify-between items-center shadow-md'>
          <HiMenu fontSize={40} className="cursor-pointer" onClick={() => setToggleSideBar(true)} />
          <Link to='/'>
            <img src={myLogo} alt="logo" className='w-16' />
          </Link>
          <Link to={`user-profile/${user?._id}`}>
            <img src={user?.image} alt="logo" className='w-16' />
          </Link>
        </div>

        {
          toggleSideBar && (
            // TODO: modify this
          <div className={toggleSideBar ? hiddenSidebar : activeSidebar}>
            <div className='absolute w-full flex justify-end items-center p-2 '>
              <AiFillCloseCircle fontSize={30} className="cursor-pointer" onClick={() => 
              {
                setToggleSideBar(false)
              }
                } />
            </div>
            <Sidebar user={user && user} closeToggle={setToggleSideBar} />
          </div>
        )} 
      </div>

      {/* routes */}
      <div className='pb-2 flex-1 h-screen overflow-y-scroll' ref={scrollRef}>
        <Routes>
          <Route path="user-profile/:userId" element={<UserProfile />} />
          <Route path='/*' element={<Pins user={user && user} />} />
        </Routes>
      </div>

    </div>
  )
}

export default Home

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, // or media or class

  content: [],
  theme: {
    extend: {
      margin: {
        320: '320px',
      },
      width: {
        190: '190px',
        275: '275px',
        300: '300px',
        340: '340px',
        350: '350px',
        656: '656px',
        880: '880px',
        508: '508px',
      },
      height: {
        80: '80px',
        340: '340px',
        370: '370px',
        420: '420px',
        510: '510px',
        600: '600px',
        685: '685px',
        800: '800px',
        '90vh': '90vh',
      },
      flex: {
        0.7: '0.7 1 0%',
      },
      maxHeight: {
        370: '370px',
      },

      // further tweeks
      minWidth: {
        210: '210px',
        350: '350px',
        620: '620px',
      },

      // change this for personalization
      textColor: {
        lightGray: '#F1EFEE',
        primary: '#FAFAFA',
        secColor: '#efefef',
        navColor: '#BEBEBE',
      },

      // change this for personalization
      backgroundColor: {
        mainColor: '#FBF8F9',
        secondaryColor: '#F0F0F0',
        blackOverlay: 'rgba(0, 0 ,0 ,0.7)',
      },
      /*
        TODO: create slide-out keyframne and animation config for tailwindcss
        basically a reverse of slide in
      */ 
      keyframes: {
        'slide-in': {
          '0%': {
            '-webkit-transform': 'translateX(-200px)',
            transform: 'translateX(-200px)',
          },
          '100%': {
            '-webkit-transform': 'translateX(0px)',
            transform: 'translateX(0px)',
          },
        },
        
        // TODO: added this out
        'slide-out': {
          '0%': {
            '-webkit-transform': 'translateX(0px)',
            transform: 'translateX(0px)',
          },
          '100%': {
            '-webkit-transform': 'translateX(-200px)',
            transform: 'translateX(-200px)',
          },
        },

        'slide-fwd': {
          '0%': {
            '-webkit-transform': 'translateZ(0px)',
            transform: 'translateZ(0px)',
          },
          '100%': {
            '-webkit-transform': 'translateZ(160px)',
            transform: 'translateZ(160px)',
          },
        },

        
      },
      animation: {
        'slide-in': 'slide-in 0.5s ease-out',
        'slide-fwd': 'slide-fwd 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) both',

        // TODO: added this
        'slide-out' : 'slide-out 0.5s ease-out',
      },
      transitionProperty: {
        height: 'height',
      },
    },
    cursor: {
      'zoom-in': 'zoom-in',
      pointer: "pointer",
    },
  },
  variants: {
    // backgroundColor: ['active']
    extend: {
      
    }
  },


  plugins: [],
};