diff --git a/src/Components/Common/Sidebar/Sidebar.tsx b/src/Components/Common/Sidebar/Sidebar.tsx index 20ffb438f65..a6352d1cb52 100644 --- a/src/Components/Common/Sidebar/Sidebar.tsx +++ b/src/Components/Common/Sidebar/Sidebar.tsx @@ -59,14 +59,15 @@ const StatelessSidebar = ({ const activeLinkRef = useRef(null); const [lastIndicatorPosition, setLastIndicatorPosition] = useState(0); const [isOverflowVisible, setOverflowVisisble] = useState(false); - const [moreItems, setMoreItems] = useState(false); + const [moreItemsShown, setMoreItemsShown] = useState(false); useEffect(() => { if (!indicatorRef.current) return; - const index = NavItems.slice(0, moreItems ? NavItems.length : 5).findIndex( - (item) => item.to === activeLink - ); - const navItemCount = (moreItems ? NavItems.length : 5) + 3; // +3 for notification, Dashboard and More + const index = NavItems.slice( + 0, + moreItemsShown ? NavItems.length : 5 + ).findIndex((item) => item.to === activeLink); + const navItemCount = (moreItemsShown ? NavItems.length : 5) + 3; // +3 for notification, Dashboard and More if (index !== -1) { // Haha math go brrrrrrrrr @@ -88,7 +89,7 @@ const StatelessSidebar = ({ } else { indicatorRef.current.style.display = "none"; } - }, [activeLink, lastIndicatorPosition, moreItems]); + }, [activeLink, lastIndicatorPosition, moreItemsShown]); const handleOverflow = (value: boolean) => { setOverflowVisisble(value); @@ -126,7 +127,7 @@ const StatelessSidebar = ({ activeLink ? "opacity-0 md:opacity-100" : "opacity-0" )} /> - {NavItems.slice(0, moreItems ? NavItems.length : 5).map((i) => { + {NavItems.slice(0, moreItemsShown ? NavItems.length : 5).map((i) => { return ( setMoreItems(!moreItems)} + text={moreItemsShown ? "Hide" : "Show more"} + do={() => setMoreItemsShown(!moreItemsShown)} icon={ - moreItems ? ( + moreItemsShown ? ( ) : (