[Sidebar]: Duplicate Collapse Button Display and Graph Does Not Shift Left Side After Collapsing and TLDR

src/components/App/AppBar/index.tsx

@@ -58,7 +58,7 @@ const Header = styled(Flex).attrs({
   left: 64px;
   right: 32px;
   transition: opacity 1s;
-  z-index: 1;
+  z-index: 99;
   padding: 20px 23px;
 `
 

src/components/App/MainToolbar/index.tsx

@@ -114,7 +114,7 @@ const Wrapper = styled(Flex).attrs({
   justify: 'flex-start',
 })`
   flex: 0 0 64px;
-  z-index: 1;
+  z-index: 31;
   transition: opacity 1s;
   background: ${colors.BG2};
   position: relative;

src/components/App/SecondarySidebar/index.tsx

@@ -40,7 +40,7 @@ const Wrapper = styled(Flex)(({ theme }) => ({
   height: '100vh',
   padding: '16px 20px',
   width: '100%',
-  zIndex: 1,
+  zIndex: 30,
   display: 'flex',
   [theme.breakpoints.up('sm')]: {
     width: MENU_WIDTH,

src/components/App/SideBar/Trending/index.tsx

@@ -2,6 +2,7 @@ import { Button } from '@mui/material'
 import clsx from 'clsx'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useFormContext } from 'react-hook-form'
+import { useNavigate } from 'react-router-dom'
 import { ClipLoader } from 'react-spinners'
 import styled from 'styled-components'
 import HashTag from '~/components/Icons/HashTag'
@@ -10,6 +11,7 @@ import PlayIcon from '~/components/Icons/PlayIcon'
 import PlusIcon from '~/components/Icons/PlusIcon'
 import ReloadIcon from '~/components/Icons/ReloadIcon'
 import SentimentDataIcon from '~/components/Icons/SentimentDataIcon'
+import { useBriefDescriptionStore } from '~/components/ModalsContainer/BriefDescriptionModal'
 import { Flex } from '~/components/common/Flex'
 import { getTrends } from '~/network/trends'
 import { useAppStore } from '~/stores/useAppStore'
@@ -18,16 +20,13 @@ import { useModal } from '~/stores/useModalStore'
 import { Trending as TrendingType } from '~/types'
 import { getTrendingTopic, showPlayButton } from '~/utils'
 import { colors } from '~/utils/colors'
-import { BriefDescription } from './BriefDescriptionModal'
-import { useNavigate } from 'react-router-dom'
 
 const TRENDING_TOPICS = ['Drivechain', 'Ordinals', 'L402', 'Nostr', 'AI']
 
 export const Trending = () => {
   const { open: openContentAddModal } = useModal('addContent')
   const [loading, setLoading] = useState(false)
   const [readyToUpdate, setReadyToUpdate] = useState(false)
-  const [selectedTrend, setSelectedTrend] = useState<TrendingType | null>(null)
   const audioRef = useRef<HTMLVideoElement>(null)
   const [currentFileIndex, setCurrentFileIndex] = useState(0)
   const [playing, setPlaying] = useState(false)
@@ -40,6 +39,8 @@ export const Trending = () => {
 
   const { setValue } = useFormContext()
 
+  const { setTrend } = useBriefDescriptionStore()
+
   const init = useCallback(async () => {
     setLoading(true)
     setReadyToUpdate(false)
@@ -91,15 +92,11 @@ export const Trending = () => {
     e.currentTarget.blur()
 
     if (trending?.tldr) {
-      setSelectedTrend(trending)
+      setTrend(trending)
       open()
     }
   }
 
-  const hideModal = () => {
-    setSelectedTrend(null)
-  }
-
   const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     e.stopPropagation()
     e.currentTarget.blur()
@@ -226,7 +223,6 @@ export const Trending = () => {
           </ul>
         )}
       </div>
-      {selectedTrend && <BriefDescription onClose={hideModal} trend={selectedTrend} />}
     </Wrapper>
   )
 }

src/components/App/SideBar/index.tsx

@@ -66,7 +66,7 @@ export const SideBar = () => {
 
   return (
     <>
-      <Slide direction="right" in={sidebarIsOpen}>
+      <Slide direction="right" in={sidebarIsOpen} mountOnEnter unmountOnExit>
         <Content subViewOpen={subViewIsOpen} />
       </Slide>
       <SideBarSubView open={subViewIsOpen} />
@@ -80,7 +80,7 @@ const Wrapper = styled(Flex)(({ theme }) => ({
   background: colors.BG1,
   height: '100vh',
   width: '100%',
-  zIndex: 1,
+  zIndex: 30,
   [theme.breakpoints.up('sm')]: {
     width: MENU_WIDTH,
   },