Skip to content

Commit

Permalink
fix(sidebar): collapse button and tldr and sidebar
Browse files Browse the repository at this point in the history
  • Loading branch information
aliraza556 committed Nov 1, 2024
1 parent e58881a commit 2021ea4
Show file tree
Hide file tree
Showing 9 changed files with 380 additions and 346 deletions.
2 changes: 1 addition & 1 deletion src/components/App/AppBar/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
`

Expand Down
2 changes: 1 addition & 1 deletion src/components/App/MainToolbar/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion src/components/App/SecondarySidebar/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
14 changes: 5 additions & 9 deletions src/components/App/SideBar/Trending/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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'
Expand All @@ -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)
Expand All @@ -40,6 +39,8 @@ export const Trending = () => {

const { setValue } = useFormContext()

const { setTrend } = useBriefDescriptionStore()

const init = useCallback(async () => {
setLoading(true)
setReadyToUpdate(false)
Expand Down Expand Up @@ -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()
Expand Down Expand Up @@ -226,7 +223,6 @@ export const Trending = () => {
</ul>
)}
</div>
{selectedTrend && <BriefDescription onClose={hideModal} trend={selectedTrend} />}
</Wrapper>
)
}
Expand Down
4 changes: 2 additions & 2 deletions src/components/App/SideBar/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand All @@ -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,
},
Expand Down
Loading

0 comments on commit 2021ea4

Please sign in to comment.