Skip to content

Mobile web top right menu#12521

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dharit-tan merged 3 commits into from
Jul 15, 2025
Merged

Mobile web top right menu #12521

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ae59582
Mobile web top left menu
dharit-tan Jul 11, 2025
9041b76
anim
dharit-tan Jul 11, 2025
1e5e72a
update everywhere
dharit-tan Jul 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 1 addition & 13 deletions packages/web/src/components/nav/mobile/ConnectedNavBar.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -19,7 +19,7 @@ import { push, goBack } from 'utils/navigation'

import NavBar from './NavBar'

const { NOTIFICATION_PAGE, SETTINGS_PAGE, REWARDS_PAGE } = route
const { NOTIFICATION_PAGE } = route

type ConnectedNavBarProps = ReturnType<typeof mapStateToProps> &
ReturnType<typeof mapDispatchToProps> &
Expand DownExpand Up@@ -56,32 +56,20 @@ const ConnectedNavBar = ({
record(make(Name.NOTIFICATIONS_OPEN, { source: 'button' }))
}, [goToRoute, setStackReset, setSlideDirection, record])

const goToSettingsPage = useCallback(() => {
setStackReset(true)
setImmediate(() => goToRoute(SETTINGS_PAGE))
}, [goToRoute, setStackReset])

const signUp = useCallback(() => {
setStackReset(true)
}, [setStackReset])

const goToRewardsPage = useCallback(() => {
setStackReset(true)
setImmediate(() => goToRoute(REWARDS_PAGE))
}, [goToRoute, setStackReset])

return (
<NavBar
isSignedIn={hasAccount}
isLoading={accountStatus === Status.LOADING}
signUp={signUp}
rewardsCount={rewardsCount}
goToNotificationPage={goToNotificationPage}
goToSettingsPage={goToSettingsPage}
search={search}
goBack={goBack}
history={history}
goToRewardsPage={goToRewardsPage}
/>
)
}
Expand Down
124 changes: 25 additions & 99 deletions packages/web/src/components/nav/mobile/NavBar.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,22 @@
import { useState, useContext, useCallback, useEffect } from 'react'

import { useNotificationUnreadCount } from '@audius/common/api'
import { Status } from '@audius/common/models'
import { formatCount, route } from '@audius/common/utils'
import {
IconAudiusLogoHorizontal,
IconSettings,
IconCaretLeft,
IconClose,
IconNotificationOn,
IconButton,
IconGift,
Flex
Flex,
IconKebabHorizontal
} from '@audius/harmony'
import cn from 'classnames'
import { History } from 'history'
import { Link } from 'react-router-dom'
// eslint-disable-next-line no-restricted-imports -- TODO: migrate to @react-spring/web
import { useTransition, animated } from 'react-spring'

import { useHistoryContext } from 'app/HistoryProvider'
import {
RouterContext,
SlideDirection
Expand All@@ -29,10 +26,10 @@ import NavContext, {
CenterPreset,
RightPreset
} from 'components/nav/mobile/NavContext'
import SearchBar from 'components/search-bar/SearchBar'
import { getIsIOS } from 'utils/browser'

import styles from './NavBar.module.css'
import { NavBarActionDrawer } from './NavBarActionDrawer'

const { SIGN_UP_PAGE, TRENDING_PAGE } = route

Expand All@@ -42,8 +39,6 @@ interface NavBarProps {
rewardsCount: number
signUp: () => void
goToNotificationPage: () => void
goToSettingsPage: () => void
goToRewardsPage: () => void
search: (term: string) => void
goBack: () => void
history: History<any>
Expand All@@ -61,41 +56,26 @@ const NavBar = ({
search,
signUp,
goToNotificationPage,
goToSettingsPage,
goBack,
goToRewardsPage,
history: {
location: { pathname }
}
}: NavBarProps) => {
const { history } = useHistoryContext()
const { leftElement, centerElement, rightElement } = useContext(NavContext)!
const { data: notificationCount = 0 } = useNotificationUnreadCount()

const [isSearching, setIsSearching] = useState(false)
const [searchValue, setSearchValue] = useState('')

const { setStackReset } = useContext(RouterContext)
const beginSearch = useCallback(() => {
setStackReset(true)
setImmediate(() => search(searchValue))
}, [setStackReset, search, searchValue])

const [isActionDrawerOpen, setIsActionDrawerOpen] = useState(false)

useEffect(() => {
const splitPath = pathname.split('/')
const isSearch = splitPath.length > 1 && splitPath[1] === 'search'
setIsSearching(isSearch)
}, [pathname])

const handleOpenSearch = useCallback(() => {
history.push(`/explore`)
}, [history])

const onCloseSearch = () => {
setIsSearching(false)
setSearchValue('')
}

const logoTransitions = useTransition(!isSearching, null, {
from: {
opacity: 0,
Expand DownExpand Up@@ -194,74 +174,25 @@ const NavBar = ({
</Flex>
)}
</Flex>
<Flex>
<IconButton
aria-label='audio rewards'
color={rewardsCount > 0 ? 'warning' : 'subdued'}
icon={IconGift}
onClick={goToRewardsPage}
/>
{rewardsCount > 0 && (
<Flex
css={{
position: 'absolute',
top: 0,
right: 6,
backgroundColor: 'var(--harmony-red)',
color: 'var(--harmony-white)',
fontSize: '11px',
fontWeight: 'bold',
letterSpacing: '0.07px',
lineHeight: '14px',
textTransform: 'uppercase',
padding: '0px 6px',
transform: 'translateX(50%)',
borderRadius: '8px'
}}
>
{formatCount(rewardsCount)}
</Flex>
)}
</Flex>
</Flex>
)
} else if (leftElement === LeftPreset.SETTINGS && isSignedIn) {
left = (
<>
<IconButton
aria-label='settings'
color='subdued'
icon={IconSettings}
onClick={goToSettingsPage}
/>
<IconButton
aria-label='audio rewards'
color={rewardsCount > 0 ? 'warning' : 'subdued'}
icon={IconGift}
onClick={goToRewardsPage}
/>
{rewardsCount > 0 && (
<div className={styles.iconTag}>{formatCount(rewardsCount)}</div>
)}
</>
)
} else {
left = leftElement
}

return (
<div
<Flex
className={cn(styles.container, {
[styles.containerNoBorder]: isSearching
})}
>
<div
<Flex
className={cn(styles.leftElement, {
[styles.isLoading]: isLoading
})}
>
{left}
</div>
</Flex>
{centerElement === CenterPreset.LOGO ? (
<Link to={TRENDING_PAGE} className={styles.logo}>
{logoTransitions.map(({ item, props, key }) =>
Expand All@@ -279,36 +210,31 @@ const NavBar = ({
) : null}
{typeof centerElement === 'string' &&
!Object.values(CenterPreset).includes(centerElement as any) && (
<div className={styles.centerText}> {centerElement} </div>
<Flex className={styles.centerText}> {centerElement} </Flex>
)}
<div
<Flex
className={cn(styles.rightElement, {
[styles.isLoading]: isLoading
})}
>
{rightElement === RightPreset.SEARCH ? (
<SearchBar
open={isSearching}
onOpen={handleOpenSearch}
onClose={onCloseSearch}
value={searchValue}
onSearch={setSearchValue}
placeholder={messages.searchPlaceholderV2}
showHeader={false}
className={cn(
styles.searchBar,
{ [styles.searchBarClosed]: !isSearching },
{ [styles.searchBarClosedSignedOut]: !isSearching && !isSignedIn }
)}
iconClassname={styles.searchIcon}
beginSearch={beginSearch}
status={isSearching ? Status.LOADING : Status.IDLE}
/>
{rightElement === RightPreset.KEBAB ? (
<Flex mr='s'>
<IconButton
aria-label='menu'
icon={IconKebabHorizontal}
color-='subdued'
onClick={() => setIsActionDrawerOpen(true)}
/>
</Flex>
) : (
rightElement
)}
</div>
</div>
</Flex>
<NavBarActionDrawer
isOpen={isActionDrawerOpen}
onClose={() => setIsActionDrawerOpen(false)}
/>
</Flex>
)
}

Expand Down
73 changes: 73 additions & 0 deletions packages/web/src/components/nav/mobile/NavBarActionDrawer.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
import { useCallback, useContext, useMemo } from 'react'

import { WALLET_PAGE } from '@audius/common/src/utils/route'
import { route } from '@audius/common/utils'
import { useDispatch } from 'react-redux'

import ActionDrawer from 'components/action-drawer/ActionDrawer'
import { RouterContext } from 'components/animated-switch/RouterContextProvider'
import { push } from 'utils/navigation'

const { SETTINGS_PAGE, REWARDS_PAGE } = route

type NavBarActionDrawerProps = {
isOpen: boolean
onClose: () => void
}

const messages = {
wallet: 'Wallet',
rewards: 'Rewards',
settings: 'Settings'
}

export const NavBarActionDrawer = ({
isOpen,
onClose
}: NavBarActionDrawerProps) => {
const dispatch = useDispatch()
const { setStackReset } = useContext(RouterContext)

const goToRoute = useCallback(
(route: string) => {
dispatch(push(route))
},
[dispatch]
)

const goToWalletPage = useCallback(() => {
setImmediate(() => goToRoute(WALLET_PAGE))
onClose()
}, [goToRoute, onClose])

const goToSettingsPage = useCallback(() => {
setStackReset(true)
setImmediate(() => goToRoute(SETTINGS_PAGE))
onClose()
}, [goToRoute, onClose, setStackReset])

const goToRewardsPage = useCallback(() => {
setImmediate(() => goToRoute(REWARDS_PAGE))
onClose()
}, [goToRoute, onClose])

const actions = useMemo(
() => [
{
text: messages.wallet,
onClick: goToWalletPage
},
{
text: messages.rewards,
onClick: goToRewardsPage
},
{
text: messages.settings,
onClick: goToSettingsPage
}
],
[goToRewardsPage, goToSettingsPage, goToWalletPage]
)

return <ActionDrawer actions={actions} onClose={onClose} isOpen={isOpen} />
}
10 changes: 5 additions & 5 deletions packages/web/src/components/nav/mobile/NavContext.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -33,7 +33,7 @@ export enum CenterPreset {
}

export enum RightPreset {
SEARCH = 'SEARCH'
KEBAB = 'KEBAB'
}

type LeftElement = LeftPreset | ReactNode | null
Expand All@@ -46,13 +46,13 @@ const NavContext = createContext<NavContextProps>({
setRight: () => {},
leftElement: LeftPreset.NOTIFICATION,
centerElement: CenterPreset.LOGO,
rightElement: RightPreset.SEARCH
rightElement: RightPreset.KEBAB
})

const useNavContext = () => {
const [leftElement, setLeft] = useState<LeftElement>(LeftPreset.NOTIFICATION)
const [centerElement, setCenter] = useState<CenterElement>(CenterPreset.LOGO)
const [rightElement, setRight] = useState<RightElement>(RightPreset.SEARCH)
const [rightElement, setRight] = useState<RightElement>(RightPreset.KEBAB)
return {
leftElement,
setLeft,
Expand DownExpand Up@@ -85,7 +85,7 @@ export const useMainPageHeader = () => {
useEffect(() => {
setLeft(LeftPreset.NOTIFICATION)
setCenter(CenterPreset.LOGO)
setRight(RightPreset.SEARCH)
setRight(RightPreset.KEBAB)
}, [setLeft, setCenter, setRight])
}

Expand All@@ -98,7 +98,7 @@ export const useSubPageHeader = () => {
useEffect(() => {
setLeft(LeftPreset.BACK)
setCenter(CenterPreset.LOGO)
setRight(RightPreset.SEARCH)
setRight(RightPreset.KEBAB)
}, [setLeft, setCenter, setRight])
}

Expand Down
2 changes: 1 addition & 1 deletion packages/web/src/pages/audio-page/AudioPage.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -85,7 +85,7 @@ const useMobileNavContext = () => {
const { setLeft, setRight } = useContext(NavContext)!
useEffect(() => {
setLeft(LeftPreset.BACK)
setRight(RightPreset.SEARCH)
setRight(RightPreset.KEBAB)
}, [setLeft, setRight])
}

Expand Down
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Mobile web top right menu by dharit-tan · Pull Request #12521 · AudiusProject/apps · GitHub
Skip to content
Mobile web top right menu#12521

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

dharit-tan
merged 3 commits into

from

Jul 15, 2025
 Merged


Mobile web top right menu
#12521
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
ae59582

Mobile web top left menu


dharit-tan Jul 11, 2025
9041b76

anim


dharit-tan Jul 11, 2025
1e5e72a

update everywhere


dharit-tan Jul 11, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


14 changes: 1 addition & 13 deletions
packages/web/src/components/nav/mobile/ConnectedNavBar.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,7 +19,7 @@ import { push, goBack } from 'utils/navigation'

import NavBar from './NavBar'

const { NOTIFICATION_PAGE, SETTINGS_PAGE, REWARDS_PAGE } = route
const { NOTIFICATION_PAGE } = route

type ConnectedNavBarProps = ReturnType<typeof mapStateToProps> &
 ReturnType<typeof mapDispatchToProps> &
Expand DownExpand Up@@ -56,32 +56,20 @@ const ConnectedNavBar = ({
 record(make(Name.NOTIFICATIONS_OPEN, { source: 'button' }))
 }, [goToRoute, setStackReset, setSlideDirection, record])

 const goToSettingsPage = useCallback(() => {
 setStackReset(true)
 setImmediate(() => goToRoute(SETTINGS_PAGE))
 }, [goToRoute, setStackReset])

 const signUp = useCallback(() => {
 setStackReset(true)
 }, [setStackReset])

 const goToRewardsPage = useCallback(() => {
 setStackReset(true)
 setImmediate(() => goToRoute(REWARDS_PAGE))
 }, [goToRoute, setStackReset])

 return (
 <NavBar
 isSignedIn={hasAccount}
 isLoading={accountStatus === Status.LOADING}
 signUp={signUp}
 rewardsCount={rewardsCount}
 goToNotificationPage={goToNotificationPage}
 goToSettingsPage={goToSettingsPage}
 search={search}
 goBack={goBack}
 history={history}
 goToRewardsPage={goToRewardsPage}
 />
 )
}
Expand Down

124 changes: 25 additions & 99 deletions
packages/web/src/components/nav/mobile/NavBar.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,25 +1,22 @@
import { useState, useContext, useCallback, useEffect } from 'react'

import { useNotificationUnreadCount } from '@audius/common/api'
import { Status } from '@audius/common/models'
import { formatCount, route } from '@audius/common/utils'
import {
 IconAudiusLogoHorizontal,
 IconSettings,
 IconCaretLeft,
 IconClose,
 IconNotificationOn,
 IconButton,
IconGift,
Flex
Flex,
IconKebabHorizontal
} from '@audius/harmony'
import cn from 'classnames'
import { History } from 'history'
import { Link } from 'react-router-dom'
// eslint-disable-next-line no-restricted-imports -- TODO: migrate to @react-spring/web
import { useTransition, animated } from 'react-spring'

import { useHistoryContext } from 'app/HistoryProvider'
import {
 RouterContext,
 SlideDirection
Expand All@@ -29,10 +26,10 @@ import NavContext, {
 CenterPreset,
 RightPreset
} from 'components/nav/mobile/NavContext'
import SearchBar from 'components/search-bar/SearchBar'
import { getIsIOS } from 'utils/browser'

import styles from './NavBar.module.css'
import { NavBarActionDrawer } from './NavBarActionDrawer'

const { SIGN_UP_PAGE, TRENDING_PAGE } = route

Expand All@@ -42,8 +39,6 @@ interface NavBarProps {
 rewardsCount: number
 signUp: () => void
 goToNotificationPage: () => void
 goToSettingsPage: () => void
 goToRewardsPage: () => void
 search: (term: string) => void
 goBack: () => void
 history: History<any>
Expand All@@ -61,41 +56,26 @@ const NavBar = ({
 search,
 signUp,
 goToNotificationPage,
 goToSettingsPage,
 goBack,
 goToRewardsPage,
 history: {
 location: { pathname }
 }
}: NavBarProps) => {
 const { history } = useHistoryContext()
 const { leftElement, centerElement, rightElement } = useContext(NavContext)!
 const { data: notificationCount = 0 } = useNotificationUnreadCount()

 const [isSearching, setIsSearching] = useState(false)
 const [searchValue, setSearchValue] = useState('')

 const { setStackReset } = useContext(RouterContext)
 const beginSearch = useCallback(() => {
 setStackReset(true)
 setImmediate(() => search(searchValue))
 }, [setStackReset, search, searchValue])

 const [isActionDrawerOpen, setIsActionDrawerOpen] = useState(false)

 useEffect(() => {
 const splitPath = pathname.split('/')
 const isSearch = splitPath.length > 1 && splitPath[1] === 'search'
 setIsSearching(isSearch)
 }, [pathname])

 const handleOpenSearch = useCallback(() => {
 history.push(`/explore`)
 }, [history])

 const onCloseSearch = () => {
 setIsSearching(false)
 setSearchValue('')
 }

 const logoTransitions = useTransition(!isSearching, null, {
 from: {
 opacity: 0,
Expand DownExpand Up@@ -194,74 +174,25 @@ const NavBar = ({
 </Flex>
 )}
 </Flex>
 <Flex>
 <IconButton
 aria-label='audio rewards'
 color={rewardsCount > 0 ? 'warning' : 'subdued'}
 icon={IconGift}
 onClick={goToRewardsPage}
 />
 {rewardsCount > 0 && (
 <Flex
 css={{
 position: 'absolute',
 top: 0,
 right: 6,
 backgroundColor: 'var(--harmony-red)',
 color: 'var(--harmony-white)',
 fontSize: '11px',
 fontWeight: 'bold',
 letterSpacing: '0.07px',
 lineHeight: '14px',
 textTransform: 'uppercase',
 padding: '0px 6px',
 transform: 'translateX(50%)',
 borderRadius: '8px'
 }}
 >
 {formatCount(rewardsCount)}
 </Flex>
 )}
 </Flex>
 </Flex>
 )
 } else if (leftElement === LeftPreset.SETTINGS && isSignedIn) {
 left = (
 <>
 <IconButton
 aria-label='settings'
 color='subdued'
 icon={IconSettings}
 onClick={goToSettingsPage}
 />
 <IconButton
 aria-label='audio rewards'
 color={rewardsCount > 0 ? 'warning' : 'subdued'}
 icon={IconGift}
 onClick={goToRewardsPage}
 />
 {rewardsCount > 0 && (
 <div className={styles.iconTag}>{formatCount(rewardsCount)}</div>
 )}
 </>
 )
 } else {
 left = leftElement
 }

 return (
 <div
 <Flex
 className={cn(styles.container, {
 [styles.containerNoBorder]: isSearching
 })}
 >
 <div
 <Flex
 className={cn(styles.leftElement, {
 [styles.isLoading]: isLoading
 })}
 >
 {left}
 </div>
 </Flex>
 {centerElement === CenterPreset.LOGO ? (
 <Link to={TRENDING_PAGE} className={styles.logo}>
 {logoTransitions.map(({ item, props, key }) =>
Expand All@@ -279,36 +210,31 @@ const NavBar = ({
 ) : null}
 {typeof centerElement === 'string' &&
 !Object.values(CenterPreset).includes(centerElement as any) && (
 <div className={styles.centerText}> {centerElement} </div>
 <Flex className={styles.centerText}> {centerElement} </Flex>
 )}
 <div
 <Flex
 className={cn(styles.rightElement, {
 [styles.isLoading]: isLoading
 })}
 >
 {rightElement === RightPreset.SEARCH ? (
 <SearchBar
 open={isSearching}
 onOpen={handleOpenSearch}
 onClose={onCloseSearch}
 value={searchValue}
 onSearch={setSearchValue}
 placeholder={messages.searchPlaceholderV2}
 showHeader={false}
 className={cn(
 styles.searchBar,
 { [styles.searchBarClosed]: !isSearching },
 { [styles.searchBarClosedSignedOut]: !isSearching && !isSignedIn }
 )}
 iconClassname={styles.searchIcon}
 beginSearch={beginSearch}
 status={isSearching ? Status.LOADING : Status.IDLE}
 />
 {rightElement === RightPreset.KEBAB ? (
 <Flex mr='s'>
 <IconButton
 aria-label='menu'
 icon={IconKebabHorizontal}
 color-='subdued'
 onClick={() => setIsActionDrawerOpen(true)}
 />
 </Flex>
 ) : (
 rightElement
 )}
 </div>
 </div>
 </Flex>
 <NavBarActionDrawer
 isOpen={isActionDrawerOpen}
 onClose={() => setIsActionDrawerOpen(false)}
 />
 </Flex>
 )
}

Expand Down

73 changes: 73 additions & 0 deletions
packages/web/src/components/nav/mobile/NavBarActionDrawer.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
import { useCallback, useContext, useMemo } from 'react'

import { WALLET_PAGE } from '@audius/common/src/utils/route'
import { route } from '@audius/common/utils'
import { useDispatch } from 'react-redux'

import ActionDrawer from 'components/action-drawer/ActionDrawer'
import { RouterContext } from 'components/animated-switch/RouterContextProvider'
import { push } from 'utils/navigation'

const { SETTINGS_PAGE, REWARDS_PAGE } = route

type NavBarActionDrawerProps = {
 isOpen: boolean
 onClose: () => void
}

const messages = {
 wallet: 'Wallet',
 rewards: 'Rewards',
 settings: 'Settings'
}

export const NavBarActionDrawer = ({
 isOpen,
 onClose
}: NavBarActionDrawerProps) => {
 const dispatch = useDispatch()
 const { setStackReset } = useContext(RouterContext)

 const goToRoute = useCallback(
 (route: string) => {
 dispatch(push(route))
 },
 [dispatch]
 )

 const goToWalletPage = useCallback(() => {
 setImmediate(() => goToRoute(WALLET_PAGE))
 onClose()
 }, [goToRoute, onClose])

 const goToSettingsPage = useCallback(() => {
 setStackReset(true)
 setImmediate(() => goToRoute(SETTINGS_PAGE))
 onClose()
 }, [goToRoute, onClose, setStackReset])

 const goToRewardsPage = useCallback(() => {
 setImmediate(() => goToRoute(REWARDS_PAGE))
 onClose()
 }, [goToRoute, onClose])

 const actions = useMemo(
 () => [
 {
 text: messages.wallet,
 onClick: goToWalletPage
 },
 {
 text: messages.rewards,
 onClick: goToRewardsPage
 },
 {
 text: messages.settings,
 onClick: goToSettingsPage
 }
 ],
 [goToRewardsPage, goToSettingsPage, goToWalletPage]
 )

 return <ActionDrawer actions={actions} onClose={onClose} isOpen={isOpen} />
}

10 changes: 5 additions & 5 deletions
packages/web/src/components/nav/mobile/NavContext.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -33,7 +33,7 @@ export enum CenterPreset {
}

export enum RightPreset {
SEARCH = 'SEARCH'
KEBAB = 'KEBAB'
}

type LeftElement = LeftPreset | ReactNode | null
Expand All@@ -46,13 +46,13 @@ const NavContext = createContext<NavContextProps>({
 setRight: () => {},
 leftElement: LeftPreset.NOTIFICATION,
 centerElement: CenterPreset.LOGO,
 rightElement: RightPreset.SEARCH
 rightElement: RightPreset.KEBAB
})

const useNavContext = () => {
 const [leftElement, setLeft] = useState<LeftElement>(LeftPreset.NOTIFICATION)
 const [centerElement, setCenter] = useState<CenterElement>(CenterPreset.LOGO)
 const [rightElement, setRight] = useState<RightElement>(RightPreset.SEARCH)
 const [rightElement, setRight] = useState<RightElement>(RightPreset.KEBAB)
 return {
 leftElement,
 setLeft,
Expand DownExpand Up@@ -85,7 +85,7 @@ export const useMainPageHeader = () => {
 useEffect(() => {
 setLeft(LeftPreset.NOTIFICATION)
 setCenter(CenterPreset.LOGO)
 setRight(RightPreset.SEARCH)
 setRight(RightPreset.KEBAB)
 }, [setLeft, setCenter, setRight])
}

Expand All@@ -98,7 +98,7 @@ export const useSubPageHeader = () => {
 useEffect(() => {
 setLeft(LeftPreset.BACK)
 setCenter(CenterPreset.LOGO)
 setRight(RightPreset.SEARCH)
 setRight(RightPreset.KEBAB)
 }, [setLeft, setCenter, setRight])
}

Expand Down

2 changes: 1 addition & 1 deletion
packages/web/src/pages/audio-page/AudioPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -85,7 +85,7 @@ const useMobileNavContext = () => {
 const { setLeft, setRight } = useContext(NavContext)!
 useEffect(() => {
 setLeft(LeftPreset.BACK)
 setRight(RightPreset.SEARCH)
 setRight(RightPreset.KEBAB)
 }, [setLeft, setRight])
}

Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Mobile web top right menu by dharit-tan · Pull Request #12521 · AudiusProject/apps · GitHub
Skip to content
Mobile web top right menu#12521

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

dharit-tan
merged 3 commits into

from

Jul 15, 2025
 Merged


Mobile web top right menu
#12521
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
ae59582

Mobile web top left menu


dharit-tan Jul 11, 2025
9041b76

anim


dharit-tan Jul 11, 2025
1e5e72a

update everywhere


dharit-tan Jul 11, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


14 changes: 1 addition & 13 deletions
packages/web/src/components/nav/mobile/ConnectedNavBar.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,7 +19,7 @@ import { push, goBack } from 'utils/navigation'

import NavBar from './NavBar'

const { NOTIFICATION_PAGE, SETTINGS_PAGE, REWARDS_PAGE } = route
const { NOTIFICATION_PAGE } = route

type ConnectedNavBarProps = ReturnType<typeof mapStateToProps> &
 ReturnType<typeof mapDispatchToProps> &
Expand DownExpand Up@@ -56,32 +56,20 @@ const ConnectedNavBar = ({
 record(make(Name.NOTIFICATIONS_OPEN, { source: 'button' }))
 }, [goToRoute, setStackReset, setSlideDirection, record])

 const goToSettingsPage = useCallback(() => {
 setStackReset(true)
 setImmediate(() => goToRoute(SETTINGS_PAGE))
 }, [goToRoute, setStackReset])

 const signUp = useCallback(() => {
 setStackReset(true)
 }, [setStackReset])

 const goToRewardsPage = useCallback(() => {
 setStackReset(true)
 setImmediate(() => goToRoute(REWARDS_PAGE))
 }, [goToRoute, setStackReset])

 return (
 <NavBar
 isSignedIn={hasAccount}
 isLoading={accountStatus === Status.LOADING}
 signUp={signUp}
 rewardsCount={rewardsCount}
 goToNotificationPage={goToNotificationPage}
 goToSettingsPage={goToSettingsPage}
 search={search}
 goBack={goBack}
 history={history}
 goToRewardsPage={goToRewardsPage}
 />
 )
}
Expand Down

124 changes: 25 additions & 99 deletions
packages/web/src/components/nav/mobile/NavBar.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,25 +1,22 @@
import { useState, useContext, useCallback, useEffect } from 'react'

import { useNotificationUnreadCount } from '@audius/common/api'
import { Status } from '@audius/common/models'
import { formatCount, route } from '@audius/common/utils'
import {
 IconAudiusLogoHorizontal,
 IconSettings,
 IconCaretLeft,
 IconClose,
 IconNotificationOn,
 IconButton,
IconGift,
Flex
Flex,
IconKebabHorizontal
} from '@audius/harmony'
import cn from 'classnames'
import { History } from 'history'
import { Link } from 'react-router-dom'
// eslint-disable-next-line no-restricted-imports -- TODO: migrate to @react-spring/web
import { useTransition, animated } from 'react-spring'

import { useHistoryContext } from 'app/HistoryProvider'
import {
 RouterContext,
 SlideDirection
Expand All@@ -29,10 +26,10 @@ import NavContext, {
 CenterPreset,
 RightPreset
} from 'components/nav/mobile/NavContext'
import SearchBar from 'components/search-bar/SearchBar'
import { getIsIOS } from 'utils/browser'

import styles from './NavBar.module.css'
import { NavBarActionDrawer } from './NavBarActionDrawer'

const { SIGN_UP_PAGE, TRENDING_PAGE } = route

Expand All@@ -42,8 +39,6 @@ interface NavBarProps {
 rewardsCount: number
 signUp: () => void
 goToNotificationPage: () => void
 goToSettingsPage: () => void
 goToRewardsPage: () => void
 search: (term: string) => void
 goBack: () => void
 history: History<any>
Expand All@@ -61,41 +56,26 @@ const NavBar = ({
 search,
 signUp,
 goToNotificationPage,
 goToSettingsPage,
 goBack,
 goToRewardsPage,
 history: {
 location: { pathname }
 }
}: NavBarProps) => {
 const { history } = useHistoryContext()
 const { leftElement, centerElement, rightElement } = useContext(NavContext)!
 const { data: notificationCount = 0 } = useNotificationUnreadCount()

 const [isSearching, setIsSearching] = useState(false)
 const [searchValue, setSearchValue] = useState('')

 const { setStackReset } = useContext(RouterContext)
 const beginSearch = useCallback(() => {
 setStackReset(true)
 setImmediate(() => search(searchValue))
 }, [setStackReset, search, searchValue])

 const [isActionDrawerOpen, setIsActionDrawerOpen] = useState(false)

 useEffect(() => {
 const splitPath = pathname.split('/')
 const isSearch = splitPath.length > 1 && splitPath[1] === 'search'
 setIsSearching(isSearch)
 }, [pathname])

 const handleOpenSearch = useCallback(() => {
 history.push(`/explore`)
 }, [history])

 const onCloseSearch = () => {
 setIsSearching(false)
 setSearchValue('')
 }

 const logoTransitions = useTransition(!isSearching, null, {
 from: {
 opacity: 0,
Expand DownExpand Up@@ -194,74 +174,25 @@ const NavBar = ({
 </Flex>
 )}
 </Flex>
 <Flex>
 <IconButton
 aria-label='audio rewards'
 color={rewardsCount > 0 ? 'warning' : 'subdued'}
 icon={IconGift}
 onClick={goToRewardsPage}
 />
 {rewardsCount > 0 && (
 <Flex
 css={{
 position: 'absolute',
 top: 0,
 right: 6,
 backgroundColor: 'var(--harmony-red)',
 color: 'var(--harmony-white)',
 fontSize: '11px',
 fontWeight: 'bold',
 letterSpacing: '0.07px',
 lineHeight: '14px',
 textTransform: 'uppercase',
 padding: '0px 6px',
 transform: 'translateX(50%)',
 borderRadius: '8px'
 }}
 >
 {formatCount(rewardsCount)}
 </Flex>
 )}
 </Flex>
 </Flex>
 )
 } else if (leftElement === LeftPreset.SETTINGS && isSignedIn) {
 left = (
 <>
 <IconButton
 aria-label='settings'
 color='subdued'
 icon={IconSettings}
 onClick={goToSettingsPage}
 />
 <IconButton
 aria-label='audio rewards'
 color={rewardsCount > 0 ? 'warning' : 'subdued'}
 icon={IconGift}
 onClick={goToRewardsPage}
 />
 {rewardsCount > 0 && (
 <div className={styles.iconTag}>{formatCount(rewardsCount)}</div>
 )}
 </>
 )
 } else {
 left = leftElement
 }

 return (
 <div
 <Flex
 className={cn(styles.container, {
 [styles.containerNoBorder]: isSearching
 })}
 >
 <div
 <Flex
 className={cn(styles.leftElement, {
 [styles.isLoading]: isLoading
 })}
 >
 {left}
 </div>
 </Flex>
 {centerElement === CenterPreset.LOGO ? (
 <Link to={TRENDING_PAGE} className={styles.logo}>
 {logoTransitions.map(({ item, props, key }) =>
Expand All@@ -279,36 +210,31 @@ const NavBar = ({
 ) : null}
 {typeof centerElement === 'string' &&
 !Object.values(CenterPreset).includes(centerElement as any) && (
 <div className={styles.centerText}> {centerElement} </div>
 <Flex className={styles.centerText}> {centerElement} </Flex>
 )}
 <div
 <Flex
 className={cn(styles.rightElement, {
 [styles.isLoading]: isLoading
 })}
 >
 {rightElement === RightPreset.SEARCH ? (
 <SearchBar
 open={isSearching}
 onOpen={handleOpenSearch}
 onClose={onCloseSearch}
 value={searchValue}
 onSearch={setSearchValue}
 placeholder={messages.searchPlaceholderV2}
 showHeader={false}
 className={cn(
 styles.searchBar,
 { [styles.searchBarClosed]: !isSearching },
 { [styles.searchBarClosedSignedOut]: !isSearching && !isSignedIn }
 )}
 iconClassname={styles.searchIcon}
 beginSearch={beginSearch}
 status={isSearching ? Status.LOADING : Status.IDLE}
 />
 {rightElement === RightPreset.KEBAB ? (
 <Flex mr='s'>
 <IconButton
 aria-label='menu'
 icon={IconKebabHorizontal}
 color-='subdued'
 onClick={() => setIsActionDrawerOpen(true)}
 />
 </Flex>
 ) : (
 rightElement
 )}
 </div>
 </div>
 </Flex>
 <NavBarActionDrawer
 isOpen={isActionDrawerOpen}
 onClose={() => setIsActionDrawerOpen(false)}
 />
 </Flex>
 )
}

Expand Down

73 changes: 73 additions & 0 deletions
packages/web/src/components/nav/mobile/NavBarActionDrawer.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
import { useCallback, useContext, useMemo } from 'react'

import { WALLET_PAGE } from '@audius/common/src/utils/route'
import { route } from '@audius/common/utils'
import { useDispatch } from 'react-redux'

import ActionDrawer from 'components/action-drawer/ActionDrawer'
import { RouterContext } from 'components/animated-switch/RouterContextProvider'
import { push } from 'utils/navigation'

const { SETTINGS_PAGE, REWARDS_PAGE } = route

type NavBarActionDrawerProps = {
 isOpen: boolean
 onClose: () => void
}

const messages = {
 wallet: 'Wallet',
 rewards: 'Rewards',
 settings: 'Settings'
}

export const NavBarActionDrawer = ({
 isOpen,
 onClose
}: NavBarActionDrawerProps) => {
 const dispatch = useDispatch()
 const { setStackReset } = useContext(RouterContext)

 const goToRoute = useCallback(
 (route: string) => {
 dispatch(push(route))
 },
 [dispatch]
 )

 const goToWalletPage = useCallback(() => {
 setImmediate(() => goToRoute(WALLET_PAGE))
 onClose()
 }, [goToRoute, onClose])

 const goToSettingsPage = useCallback(() => {
 setStackReset(true)
 setImmediate(() => goToRoute(SETTINGS_PAGE))
 onClose()
 }, [goToRoute, onClose, setStackReset])

 const goToRewardsPage = useCallback(() => {
 setImmediate(() => goToRoute(REWARDS_PAGE))
 onClose()
 }, [goToRoute, onClose])

 const actions = useMemo(
 () => [
 {
 text: messages.wallet,
 onClick: goToWalletPage
 },
 {
 text: messages.rewards,
 onClick: goToRewardsPage
 },
 {
 text: messages.settings,
 onClick: goToSettingsPage
 }
 ],
 [goToRewardsPage, goToSettingsPage, goToWalletPage]
 )

 return <ActionDrawer actions={actions} onClose={onClose} isOpen={isOpen} />
}

10 changes: 5 additions & 5 deletions
packages/web/src/components/nav/mobile/NavContext.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -33,7 +33,7 @@ export enum CenterPreset {
}

export enum RightPreset {
SEARCH = 'SEARCH'
KEBAB = 'KEBAB'
}

type LeftElement = LeftPreset | ReactNode | null
Expand All@@ -46,13 +46,13 @@ const NavContext = createContext<NavContextProps>({
 setRight: () => {},
 leftElement: LeftPreset.NOTIFICATION,
 centerElement: CenterPreset.LOGO,
 rightElement: RightPreset.SEARCH
 rightElement: RightPreset.KEBAB
})

const useNavContext = () => {
 const [leftElement, setLeft] = useState<LeftElement>(LeftPreset.NOTIFICATION)
 const [centerElement, setCenter] = useState<CenterElement>(CenterPreset.LOGO)
 const [rightElement, setRight] = useState<RightElement>(RightPreset.SEARCH)
 const [rightElement, setRight] = useState<RightElement>(RightPreset.KEBAB)
 return {
 leftElement,
 setLeft,
Expand DownExpand Up@@ -85,7 +85,7 @@ export const useMainPageHeader = () => {
 useEffect(() => {
 setLeft(LeftPreset.NOTIFICATION)
 setCenter(CenterPreset.LOGO)
 setRight(RightPreset.SEARCH)
 setRight(RightPreset.KEBAB)
 }, [setLeft, setCenter, setRight])
}

Expand All@@ -98,7 +98,7 @@ export const useSubPageHeader = () => {
 useEffect(() => {
 setLeft(LeftPreset.BACK)
 setCenter(CenterPreset.LOGO)
 setRight(RightPreset.SEARCH)
 setRight(RightPreset.KEBAB)
 }, [setLeft, setCenter, setRight])
}

Expand Down

2 changes: 1 addition & 1 deletion
packages/web/src/pages/audio-page/AudioPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -85,7 +85,7 @@ const useMobileNavContext = () => {
 const { setLeft, setRight } = useContext(NavContext)!
 useEffect(() => {
 setLeft(LeftPreset.BACK)
 setRight(RightPreset.SEARCH)
 setRight(RightPreset.KEBAB)
 }, [setLeft, setRight])
}

Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Mobile web top right menu by dharit-tan · Pull Request #12521 · AudiusProject/apps · GitHub
Skip to content
Mobile web top right menu#12521

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

dharit-tan
merged 3 commits into

from

Jul 15, 2025
 Merged


Mobile web top right menu
#12521
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
ae59582

Mobile web top left menu


dharit-tan Jul 11, 2025
9041b76

anim


dharit-tan Jul 11, 2025
1e5e72a

update everywhere


dharit-tan Jul 11, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


14 changes: 1 addition & 13 deletions
packages/web/src/components/nav/mobile/ConnectedNavBar.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,7 +19,7 @@ import { push, goBack } from 'utils/navigation'

import NavBar from './NavBar'

const { NOTIFICATION_PAGE, SETTINGS_PAGE, REWARDS_PAGE } = route
const { NOTIFICATION_PAGE } = route

type ConnectedNavBarProps = ReturnType<typeof mapStateToProps> &
 ReturnType<typeof mapDispatchToProps> &
Expand DownExpand Up@@ -56,32 +56,20 @@ const ConnectedNavBar = ({
 record(make(Name.NOTIFICATIONS_OPEN, { source: 'button' }))
 }, [goToRoute, setStackReset, setSlideDirection, record])

 const goToSettingsPage = useCallback(() => {
 setStackReset(true)
 setImmediate(() => goToRoute(SETTINGS_PAGE))
 }, [goToRoute, setStackReset])

 const signUp = useCallback(() => {
 setStackReset(true)
 }, [setStackReset])

 const goToRewardsPage = useCallback(() => {
 setStackReset(true)
 setImmediate(() => goToRoute(REWARDS_PAGE))
 }, [goToRoute, setStackReset])

 return (
 <NavBar
 isSignedIn={hasAccount}
 isLoading={accountStatus === Status.LOADING}
 signUp={signUp}
 rewardsCount={rewardsCount}
 goToNotificationPage={goToNotificationPage}
 goToSettingsPage={goToSettingsPage}
 search={search}
 goBack={goBack}
 history={history}
 goToRewardsPage={goToRewardsPage}
 />
 )
}
Expand Down

124 changes: 25 additions & 99 deletions
packages/web/src/components/nav/mobile/NavBar.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,25 +1,22 @@
import { useState, useContext, useCallback, useEffect } from 'react'

import { useNotificationUnreadCount } from '@audius/common/api'
import { Status } from '@audius/common/models'
import { formatCount, route } from '@audius/common/utils'
import {
 IconAudiusLogoHorizontal,
 IconSettings,
 IconCaretLeft,
 IconClose,
 IconNotificationOn,
 IconButton,
IconGift,
Flex
Flex,
IconKebabHorizontal
} from '@audius/harmony'
import cn from 'classnames'
import { History } from 'history'
import { Link } from 'react-router-dom'
// eslint-disable-next-line no-restricted-imports -- TODO: migrate to @react-spring/web
import { useTransition, animated } from 'react-spring'

import { useHistoryContext } from 'app/HistoryProvider'
import {
 RouterContext,
 SlideDirection
Expand All@@ -29,10 +26,10 @@ import NavContext, {
 CenterPreset,
 RightPreset
} from 'components/nav/mobile/NavContext'
import SearchBar from 'components/search-bar/SearchBar'
import { getIsIOS } from 'utils/browser'

import styles from './NavBar.module.css'
import { NavBarActionDrawer } from './NavBarActionDrawer'

const { SIGN_UP_PAGE, TRENDING_PAGE } = route

Expand All@@ -42,8 +39,6 @@ interface NavBarProps {
 rewardsCount: number
 signUp: () => void
 goToNotificationPage: () => void
 goToSettingsPage: () => void
 goToRewardsPage: () => void
 search: (term: string) => void
 goBack: () => void
 history: History<any>
Expand All@@ -61,41 +56,26 @@ const NavBar = ({
 search,
 signUp,
 goToNotificationPage,
 goToSettingsPage,
 goBack,
 goToRewardsPage,
 history: {
 location: { pathname }
 }
}: NavBarProps) => {
 const { history } = useHistoryContext()
 const { leftElement, centerElement, rightElement } = useContext(NavContext)!
 const { data: notificationCount = 0 } = useNotificationUnreadCount()

 const [isSearching, setIsSearching] = useState(false)
 const [searchValue, setSearchValue] = useState('')

 const { setStackReset } = useContext(RouterContext)
 const beginSearch = useCallback(() => {
 setStackReset(true)
 setImmediate(() => search(searchValue))
 }, [setStackReset, search, searchValue])

 const [isActionDrawerOpen, setIsActionDrawerOpen] = useState(false)

 useEffect(() => {
 const splitPath = pathname.split('/')
 const isSearch = splitPath.length > 1 && splitPath[1] === 'search'
 setIsSearching(isSearch)
 }, [pathname])

 const handleOpenSearch = useCallback(() => {
 history.push(`/explore`)
 }, [history])

 const onCloseSearch = () => {
 setIsSearching(false)
 setSearchValue('')
 }

 const logoTransitions = useTransition(!isSearching, null, {
 from: {
 opacity: 0,
Expand DownExpand Up@@ -194,74 +174,25 @@ const NavBar = ({
 </Flex>
 )}
 </Flex>
 <Flex>
 <IconButton
 aria-label='audio rewards'
 color={rewardsCount > 0 ? 'warning' : 'subdued'}
 icon={IconGift}
 onClick={goToRewardsPage}
 />
 {rewardsCount > 0 && (
 <Flex
 css={{
 position: 'absolute',
 top: 0,
 right: 6,
 backgroundColor: 'var(--harmony-red)',
 color: 'var(--harmony-white)',
 fontSize: '11px',
 fontWeight: 'bold',
 letterSpacing: '0.07px',
 lineHeight: '14px',
 textTransform: 'uppercase',
 padding: '0px 6px',
 transform: 'translateX(50%)',
 borderRadius: '8px'
 }}
 >
 {formatCount(rewardsCount)}
 </Flex>
 )}
 </Flex>
 </Flex>
 )
 } else if (leftElement === LeftPreset.SETTINGS && isSignedIn) {
 left = (
 <>
 <IconButton
 aria-label='settings'
 color='subdued'
 icon={IconSettings}
 onClick={goToSettingsPage}
 />
 <IconButton
 aria-label='audio rewards'
 color={rewardsCount > 0 ? 'warning' : 'subdued'}
 icon={IconGift}
 onClick={goToRewardsPage}
 />
 {rewardsCount > 0 && (
 <div className={styles.iconTag}>{formatCount(rewardsCount)}</div>
 )}
 </>
 )
 } else {
 left = leftElement
 }

 return (
 <div
 <Flex
 className={cn(styles.container, {
 [styles.containerNoBorder]: isSearching
 })}
 >
 <div
 <Flex
 className={cn(styles.leftElement, {
 [styles.isLoading]: isLoading
 })}
 >
 {left}
 </div>
 </Flex>
 {centerElement === CenterPreset.LOGO ? (
 <Link to={TRENDING_PAGE} className={styles.logo}>
 {logoTransitions.map(({ item, props, key }) =>
Expand All@@ -279,36 +210,31 @@ const NavBar = ({
 ) : null}
 {typeof centerElement === 'string' &&
 !Object.values(CenterPreset).includes(centerElement as any) && (
 <div className={styles.centerText}> {centerElement} </div>
 <Flex className={styles.centerText}> {centerElement} </Flex>
 )}
 <div
 <Flex
 className={cn(styles.rightElement, {
 [styles.isLoading]: isLoading
 })}
 >
 {rightElement === RightPreset.SEARCH ? (
 <SearchBar
 open={isSearching}
 onOpen={handleOpenSearch}
 onClose={onCloseSearch}
 value={searchValue}
 onSearch={setSearchValue}
 placeholder={messages.searchPlaceholderV2}
 showHeader={false}
 className={cn(
 styles.searchBar,
 { [styles.searchBarClosed]: !isSearching },
 { [styles.searchBarClosedSignedOut]: !isSearching && !isSignedIn }
 )}
 iconClassname={styles.searchIcon}
 beginSearch={beginSearch}
 status={isSearching ? Status.LOADING : Status.IDLE}
 />
 {rightElement === RightPreset.KEBAB ? (
 <Flex mr='s'>
 <IconButton
 aria-label='menu'
 icon={IconKebabHorizontal}
 color-='subdued'
 onClick={() => setIsActionDrawerOpen(true)}
 />
 </Flex>
 ) : (
 rightElement
 )}
 </div>
 </div>
 </Flex>
 <NavBarActionDrawer
 isOpen={isActionDrawerOpen}
 onClose={() => setIsActionDrawerOpen(false)}
 />
 </Flex>
 )
}

Expand Down

73 changes: 73 additions & 0 deletions
packages/web/src/components/nav/mobile/NavBarActionDrawer.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
import { useCallback, useContext, useMemo } from 'react'

import { WALLET_PAGE } from '@audius/common/src/utils/route'
import { route } from '@audius/common/utils'
import { useDispatch } from 'react-redux'

import ActionDrawer from 'components/action-drawer/ActionDrawer'
import { RouterContext } from 'components/animated-switch/RouterContextProvider'
import { push } from 'utils/navigation'

const { SETTINGS_PAGE, REWARDS_PAGE } = route

type NavBarActionDrawerProps = {
 isOpen: boolean
 onClose: () => void
}

const messages = {
 wallet: 'Wallet',
 rewards: 'Rewards',
 settings: 'Settings'
}

export const NavBarActionDrawer = ({
 isOpen,
 onClose
}: NavBarActionDrawerProps) => {
 const dispatch = useDispatch()
 const { setStackReset } = useContext(RouterContext)

 const goToRoute = useCallback(
 (route: string) => {
 dispatch(push(route))
 },
 [dispatch]
 )

 const goToWalletPage = useCallback(() => {
 setImmediate(() => goToRoute(WALLET_PAGE))
 onClose()
 }, [goToRoute, onClose])

 const goToSettingsPage = useCallback(() => {
 setStackReset(true)
 setImmediate(() => goToRoute(SETTINGS_PAGE))
 onClose()
 }, [goToRoute, onClose, setStackReset])

 const goToRewardsPage = useCallback(() => {
 setImmediate(() => goToRoute(REWARDS_PAGE))
 onClose()
 }, [goToRoute, onClose])

 const actions = useMemo(
 () => [
 {
 text: messages.wallet,
 onClick: goToWalletPage
 },
 {
 text: messages.rewards,
 onClick: goToRewardsPage
 },
 {
 text: messages.settings,
 onClick: goToSettingsPage
 }
 ],
 [goToRewardsPage, goToSettingsPage, goToWalletPage]
 )

 return <ActionDrawer actions={actions} onClose={onClose} isOpen={isOpen} />
}

10 changes: 5 additions & 5 deletions
packages/web/src/components/nav/mobile/NavContext.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -33,7 +33,7 @@ export enum CenterPreset {
}

export enum RightPreset {
SEARCH = 'SEARCH'
KEBAB = 'KEBAB'
}

type LeftElement = LeftPreset | ReactNode | null
Expand All@@ -46,13 +46,13 @@ const NavContext = createContext<NavContextProps>({
 setRight: () => {},
 leftElement: LeftPreset.NOTIFICATION,
 centerElement: CenterPreset.LOGO,
 rightElement: RightPreset.SEARCH
 rightElement: RightPreset.KEBAB
})

const useNavContext = () => {
 const [leftElement, setLeft] = useState<LeftElement>(LeftPreset.NOTIFICATION)
 const [centerElement, setCenter] = useState<CenterElement>(CenterPreset.LOGO)
 const [rightElement, setRight] = useState<RightElement>(RightPreset.SEARCH)
 const [rightElement, setRight] = useState<RightElement>(RightPreset.KEBAB)
 return {
 leftElement,
 setLeft,
Expand DownExpand Up@@ -85,7 +85,7 @@ export const useMainPageHeader = () => {
 useEffect(() => {
 setLeft(LeftPreset.NOTIFICATION)
 setCenter(CenterPreset.LOGO)
 setRight(RightPreset.SEARCH)
 setRight(RightPreset.KEBAB)
 }, [setLeft, setCenter, setRight])
}

Expand All@@ -98,7 +98,7 @@ export const useSubPageHeader = () => {
 useEffect(() => {
 setLeft(LeftPreset.BACK)
 setCenter(CenterPreset.LOGO)
 setRight(RightPreset.SEARCH)
 setRight(RightPreset.KEBAB)
 }, [setLeft, setCenter, setRight])
}

Expand Down

2 changes: 1 addition & 1 deletion
packages/web/src/pages/audio-page/AudioPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -85,7 +85,7 @@ const useMobileNavContext = () => {
 const { setLeft, setRight } = useContext(NavContext)!
 useEffect(() => {
 setLeft(LeftPreset.BACK)
 setRight(RightPreset.SEARCH)
 setRight(RightPreset.KEBAB)
 }, [setLeft, setRight])
}

Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
Mobile web top right menu by dharit-tan · Pull Request #12521 · AudiusProject/apps · GitHub
Skip to content
Mobile web top right menu#12521

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

dharit-tan
merged 3 commits into

from

Jul 15, 2025
 Merged


Mobile web top right menu
#12521
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
ae59582

Mobile web top left menu


dharit-tan Jul 11, 2025
9041b76

anim


dharit-tan Jul 11, 2025
1e5e72a

update everywhere


dharit-tan Jul 11, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


14 changes: 1 addition & 13 deletions
packages/web/src/components/nav/mobile/ConnectedNavBar.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,7 +19,7 @@ import { push, goBack } from 'utils/navigation'

import NavBar from './NavBar'

const { NOTIFICATION_PAGE, SETTINGS_PAGE, REWARDS_PAGE } = route
const { NOTIFICATION_PAGE } = route

type ConnectedNavBarProps = ReturnType<typeof mapStateToProps> &
 ReturnType<typeof mapDispatchToProps> &
Expand DownExpand Up@@ -56,32 +56,20 @@ const ConnectedNavBar = ({
 record(make(Name.NOTIFICATIONS_OPEN, { source: 'button' }))
 }, [goToRoute, setStackReset, setSlideDirection, record])

 const goToSettingsPage = useCallback(() => {
 setStackReset(true)
 setImmediate(() => goToRoute(SETTINGS_PAGE))
 }, [goToRoute, setStackReset])

 const signUp = useCallback(() => {
 setStackReset(true)
 }, [setStackReset])

 const goToRewardsPage = useCallback(() => {
 setStackReset(true)
 setImmediate(() => goToRoute(REWARDS_PAGE))
 }, [goToRoute, setStackReset])

 return (
 <NavBar
 isSignedIn={hasAccount}
 isLoading={accountStatus === Status.LOADING}
 signUp={signUp}
 rewardsCount={rewardsCount}
 goToNotificationPage={goToNotificationPage}
 goToSettingsPage={goToSettingsPage}
 search={search}
 goBack={goBack}
 history={history}
 goToRewardsPage={goToRewardsPage}
 />
 )
}
Expand Down

124 changes: 25 additions & 99 deletions
packages/web/src/components/nav/mobile/NavBar.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,25 +1,22 @@
import { useState, useContext, useCallback, useEffect } from 'react'

import { useNotificationUnreadCount } from '@audius/common/api'
import { Status } from '@audius/common/models'
import { formatCount, route } from '@audius/common/utils'
import {
 IconAudiusLogoHorizontal,
 IconSettings,
 IconCaretLeft,
 IconClose,
 IconNotificationOn,
 IconButton,
IconGift,
Flex
Flex,
IconKebabHorizontal
} from '@audius/harmony'
import cn from 'classnames'
import { History } from 'history'
import { Link } from 'react-router-dom'
// eslint-disable-next-line no-restricted-imports -- TODO: migrate to @react-spring/web
import { useTransition, animated } from 'react-spring'

import { useHistoryContext } from 'app/HistoryProvider'
import {
 RouterContext,
 SlideDirection
Expand All@@ -29,10 +26,10 @@ import NavContext, {
 CenterPreset,
 RightPreset
} from 'components/nav/mobile/NavContext'
import SearchBar from 'components/search-bar/SearchBar'
import { getIsIOS } from 'utils/browser'

import styles from './NavBar.module.css'
import { NavBarActionDrawer } from './NavBarActionDrawer'

const { SIGN_UP_PAGE, TRENDING_PAGE } = route

Expand All@@ -42,8 +39,6 @@ interface NavBarProps {
 rewardsCount: number
 signUp: () => void
 goToNotificationPage: () => void
 goToSettingsPage: () => void
 goToRewardsPage: () => void
 search: (term: string) => void
 goBack: () => void
 history: History<any>
Expand All@@ -61,41 +56,26 @@ const NavBar = ({
 search,
 signUp,
 goToNotificationPage,
 goToSettingsPage,
 goBack,
 goToRewardsPage,
 history: {
 location: { pathname }
 }
}: NavBarProps) => {
 const { history } = useHistoryContext()
 const { leftElement, centerElement, rightElement } = useContext(NavContext)!
 const { data: notificationCount = 0 } = useNotificationUnreadCount()

 const [isSearching, setIsSearching] = useState(false)
 const [searchValue, setSearchValue] = useState('')

 const { setStackReset } = useContext(RouterContext)
 const beginSearch = useCallback(() => {
 setStackReset(true)
 setImmediate(() => search(searchValue))
 }, [setStackReset, search, searchValue])

 const [isActionDrawerOpen, setIsActionDrawerOpen] = useState(false)

 useEffect(() => {
 const splitPath = pathname.split('/')
 const isSearch = splitPath.length > 1 && splitPath[1] === 'search'
 setIsSearching(isSearch)
 }, [pathname])

 const handleOpenSearch = useCallback(() => {
 history.push(`/explore`)
 }, [history])

 const onCloseSearch = () => {
 setIsSearching(false)
 setSearchValue('')
 }

 const logoTransitions = useTransition(!isSearching, null, {
 from: {
 opacity: 0,
Expand DownExpand Up@@ -194,74 +174,25 @@ const NavBar = ({
 </Flex>
 )}
 </Flex>
 <Flex>
 <IconButton
 aria-label='audio rewards'
 color={rewardsCount > 0 ? 'warning' : 'subdued'}
 icon={IconGift}
 onClick={goToRewardsPage}
 />
 {rewardsCount > 0 && (
 <Flex
 css={{
 position: 'absolute',
 top: 0,
 right: 6,
 backgroundColor: 'var(--harmony-red)',
 color: 'var(--harmony-white)',
 fontSize: '11px',
 fontWeight: 'bold',
 letterSpacing: '0.07px',
 lineHeight: '14px',
 textTransform: 'uppercase',
 padding: '0px 6px',
 transform: 'translateX(50%)',
 borderRadius: '8px'
 }}
 >
 {formatCount(rewardsCount)}
 </Flex>
 )}
 </Flex>
 </Flex>
 )
 } else if (leftElement === LeftPreset.SETTINGS && isSignedIn) {
 left = (
 <>
 <IconButton
 aria-label='settings'
 color='subdued'
 icon={IconSettings}
 onClick={goToSettingsPage}
 />
 <IconButton
 aria-label='audio rewards'
 color={rewardsCount > 0 ? 'warning' : 'subdued'}
 icon={IconGift}
 onClick={goToRewardsPage}
 />
 {rewardsCount > 0 && (
 <div className={styles.iconTag}>{formatCount(rewardsCount)}</div>
 )}
 </>
 )
 } else {
 left = leftElement
 }

 return (
 <div
 <Flex
 className={cn(styles.container, {
 [styles.containerNoBorder]: isSearching
 })}
 >
 <div
 <Flex
 className={cn(styles.leftElement, {
 [styles.isLoading]: isLoading
 })}
 >
 {left}
 </div>
 </Flex>
 {centerElement === CenterPreset.LOGO ? (
 <Link to={TRENDING_PAGE} className={styles.logo}>
 {logoTransitions.map(({ item, props, key }) =>
Expand All@@ -279,36 +210,31 @@ const NavBar = ({
 ) : null}
 {typeof centerElement === 'string' &&
 !Object.values(CenterPreset).includes(centerElement as any) && (
 <div className={styles.centerText}> {centerElement} </div>
 <Flex className={styles.centerText}> {centerElement} </Flex>
 )}
 <div
 <Flex
 className={cn(styles.rightElement, {
 [styles.isLoading]: isLoading
 })}
 >
 {rightElement === RightPreset.SEARCH ? (
 <SearchBar
 open={isSearching}
 onOpen={handleOpenSearch}
 onClose={onCloseSearch}
 value={searchValue}
 onSearch={setSearchValue}
 placeholder={messages.searchPlaceholderV2}
 showHeader={false}
 className={cn(
 styles.searchBar,
 { [styles.searchBarClosed]: !isSearching },
 { [styles.searchBarClosedSignedOut]: !isSearching && !isSignedIn }
 )}
 iconClassname={styles.searchIcon}
 beginSearch={beginSearch}
 status={isSearching ? Status.LOADING : Status.IDLE}
 />
 {rightElement === RightPreset.KEBAB ? (
 <Flex mr='s'>
 <IconButton
 aria-label='menu'
 icon={IconKebabHorizontal}
 color-='subdued'
 onClick={() => setIsActionDrawerOpen(true)}
 />
 </Flex>
 ) : (
 rightElement
 )}
 </div>
 </div>
 </Flex>
 <NavBarActionDrawer
 isOpen={isActionDrawerOpen}
 onClose={() => setIsActionDrawerOpen(false)}
 />
 </Flex>
 )
}

Expand Down

73 changes: 73 additions & 0 deletions
packages/web/src/components/nav/mobile/NavBarActionDrawer.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
import { useCallback, useContext, useMemo } from 'react'

import { WALLET_PAGE } from '@audius/common/src/utils/route'
import { route } from '@audius/common/utils'
import { useDispatch } from 'react-redux'

import ActionDrawer from 'components/action-drawer/ActionDrawer'
import { RouterContext } from 'components/animated-switch/RouterContextProvider'
import { push } from 'utils/navigation'

const { SETTINGS_PAGE, REWARDS_PAGE } = route

type NavBarActionDrawerProps = {
 isOpen: boolean
 onClose: () => void
}

const messages = {
 wallet: 'Wallet',
 rewards: 'Rewards',
 settings: 'Settings'
}

export const NavBarActionDrawer = ({
 isOpen,
 onClose
}: NavBarActionDrawerProps) => {
 const dispatch = useDispatch()
 const { setStackReset } = useContext(RouterContext)

 const goToRoute = useCallback(
 (route: string) => {
 dispatch(push(route))
 },
 [dispatch]
 )

 const goToWalletPage = useCallback(() => {
 setImmediate(() => goToRoute(WALLET_PAGE))
 onClose()
 }, [goToRoute, onClose])

 const goToSettingsPage = useCallback(() => {
 setStackReset(true)
 setImmediate(() => goToRoute(SETTINGS_PAGE))
 onClose()
 }, [goToRoute, onClose, setStackReset])

 const goToRewardsPage = useCallback(() => {
 setImmediate(() => goToRoute(REWARDS_PAGE))
 onClose()
 }, [goToRoute, onClose])

 const actions = useMemo(
 () => [
 {
 text: messages.wallet,
 onClick: goToWalletPage
 },
 {
 text: messages.rewards,
 onClick: goToRewardsPage
 },
 {
 text: messages.settings,
 onClick: goToSettingsPage
 }
 ],
 [goToRewardsPage, goToSettingsPage, goToWalletPage]
 )

 return <ActionDrawer actions={actions} onClose={onClose} isOpen={isOpen} />
}

10 changes: 5 additions & 5 deletions
packages/web/src/components/nav/mobile/NavContext.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -33,7 +33,7 @@ export enum CenterPreset {
}

export enum RightPreset {
SEARCH = 'SEARCH'
KEBAB = 'KEBAB'
}

type LeftElement = LeftPreset | ReactNode | null
Expand All@@ -46,13 +46,13 @@ const NavContext = createContext<NavContextProps>({
 setRight: () => {},
 leftElement: LeftPreset.NOTIFICATION,
 centerElement: CenterPreset.LOGO,
 rightElement: RightPreset.SEARCH
 rightElement: RightPreset.KEBAB
})

const useNavContext = () => {
 const [leftElement, setLeft] = useState<LeftElement>(LeftPreset.NOTIFICATION)
 const [centerElement, setCenter] = useState<CenterElement>(CenterPreset.LOGO)
 const [rightElement, setRight] = useState<RightElement>(RightPreset.SEARCH)
 const [rightElement, setRight] = useState<RightElement>(RightPreset.KEBAB)
 return {
 leftElement,
 setLeft,
Expand DownExpand Up@@ -85,7 +85,7 @@ export const useMainPageHeader = () => {
 useEffect(() => {
 setLeft(LeftPreset.NOTIFICATION)
 setCenter(CenterPreset.LOGO)
 setRight(RightPreset.SEARCH)
 setRight(RightPreset.KEBAB)
 }, [setLeft, setCenter, setRight])
}

Expand All@@ -98,7 +98,7 @@ export const useSubPageHeader = () => {
 useEffect(() => {
 setLeft(LeftPreset.BACK)
 setCenter(CenterPreset.LOGO)
 setRight(RightPreset.SEARCH)
 setRight(RightPreset.KEBAB)
 }, [setLeft, setCenter, setRight])
}

Expand Down

2 changes: 1 addition & 1 deletion
packages/web/src/pages/audio-page/AudioPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -85,7 +85,7 @@ const useMobileNavContext = () => {
 const { setLeft, setRight } = useContext(NavContext)!
 useEffect(() => {
 setLeft(LeftPreset.BACK)
 setRight(RightPreset.SEARCH)
 setRight(RightPreset.KEBAB)
 }, [setLeft, setRight])
}

Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Mobile web top right menu by dharit-tan · Pull Request #12521 · AudiusProject/apps · GitHub
Skip to content
Mobile web top right menu#12521

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

dharit-tan
merged 3 commits into

from

Jul 15, 2025
 Merged


Mobile web top right menu
#12521
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
ae59582

Mobile web top left menu


dharit-tan Jul 11, 2025
9041b76

anim


dharit-tan Jul 11, 2025
1e5e72a

update everywhere


dharit-tan Jul 11, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


14 changes: 1 addition & 13 deletions
packages/web/src/components/nav/mobile/ConnectedNavBar.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,7 +19,7 @@ import { push, goBack } from 'utils/navigation'

import NavBar from './NavBar'

const { NOTIFICATION_PAGE, SETTINGS_PAGE, REWARDS_PAGE } = route
const { NOTIFICATION_PAGE } = route

type ConnectedNavBarProps = ReturnType<typeof mapStateToProps> &
 ReturnType<typeof mapDispatchToProps> &
Expand DownExpand Up@@ -56,32 +56,20 @@ const ConnectedNavBar = ({
 record(make(Name.NOTIFICATIONS_OPEN, { source: 'button' }))
 }, [goToRoute, setStackReset, setSlideDirection, record])

 const goToSettingsPage = useCallback(() => {
 setStackReset(true)
 setImmediate(() => goToRoute(SETTINGS_PAGE))
 }, [goToRoute, setStackReset])

 const signUp = useCallback(() => {
 setStackReset(true)
 }, [setStackReset])

 const goToRewardsPage = useCallback(() => {
 setStackReset(true)
 setImmediate(() => goToRoute(REWARDS_PAGE))
 }, [goToRoute, setStackReset])

 return (
 <NavBar
 isSignedIn={hasAccount}
 isLoading={accountStatus === Status.LOADING}
 signUp={signUp}
 rewardsCount={rewardsCount}
 goToNotificationPage={goToNotificationPage}
 goToSettingsPage={goToSettingsPage}
 search={search}
 goBack={goBack}
 history={history}
 goToRewardsPage={goToRewardsPage}
 />
 )
}
Expand Down

124 changes: 25 additions & 99 deletions
packages/web/src/components/nav/mobile/NavBar.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,25 +1,22 @@
import { useState, useContext, useCallback, useEffect } from 'react'

import { useNotificationUnreadCount } from '@audius/common/api'
import { Status } from '@audius/common/models'
import { formatCount, route } from '@audius/common/utils'
import {
 IconAudiusLogoHorizontal,
 IconSettings,
 IconCaretLeft,
 IconClose,
 IconNotificationOn,
 IconButton,
IconGift,
Flex
Flex,
IconKebabHorizontal
} from '@audius/harmony'
import cn from 'classnames'
import { History } from 'history'
import { Link } from 'react-router-dom'
// eslint-disable-next-line no-restricted-imports -- TODO: migrate to @react-spring/web
import { useTransition, animated } from 'react-spring'

import { useHistoryContext } from 'app/HistoryProvider'
import {
 RouterContext,
 SlideDirection
Expand All@@ -29,10 +26,10 @@ import NavContext, {
 CenterPreset,
 RightPreset
} from 'components/nav/mobile/NavContext'
import SearchBar from 'components/search-bar/SearchBar'
import { getIsIOS } from 'utils/browser'

import styles from './NavBar.module.css'
import { NavBarActionDrawer } from './NavBarActionDrawer'

const { SIGN_UP_PAGE, TRENDING_PAGE } = route

Expand All@@ -42,8 +39,6 @@ interface NavBarProps {
 rewardsCount: number
 signUp: () => void
 goToNotificationPage: () => void
 goToSettingsPage: () => void
 goToRewardsPage: () => void
 search: (term: string) => void
 goBack: () => void
 history: History<any>
Expand All@@ -61,41 +56,26 @@ const NavBar = ({
 search,
 signUp,
 goToNotificationPage,
 goToSettingsPage,
 goBack,
 goToRewardsPage,
 history: {
 location: { pathname }
 }
}: NavBarProps) => {
 const { history } = useHistoryContext()
 const { leftElement, centerElement, rightElement } = useContext(NavContext)!
 const { data: notificationCount = 0 } = useNotificationUnreadCount()

 const [isSearching, setIsSearching] = useState(false)
 const [searchValue, setSearchValue] = useState('')

 const { setStackReset } = useContext(RouterContext)
 const beginSearch = useCallback(() => {
 setStackReset(true)
 setImmediate(() => search(searchValue))
 }, [setStackReset, search, searchValue])

 const [isActionDrawerOpen, setIsActionDrawerOpen] = useState(false)

 useEffect(() => {
 const splitPath = pathname.split('/')
 const isSearch = splitPath.length > 1 && splitPath[1] === 'search'
 setIsSearching(isSearch)
 }, [pathname])

 const handleOpenSearch = useCallback(() => {
 history.push(`/explore`)
 }, [history])

 const onCloseSearch = () => {
 setIsSearching(false)
 setSearchValue('')
 }

 const logoTransitions = useTransition(!isSearching, null, {
 from: {
 opacity: 0,
Expand DownExpand Up@@ -194,74 +174,25 @@ const NavBar = ({
 </Flex>
 )}
 </Flex>
 <Flex>
 <IconButton
 aria-label='audio rewards'
 color={rewardsCount > 0 ? 'warning' : 'subdued'}
 icon={IconGift}
 onClick={goToRewardsPage}
 />
 {rewardsCount > 0 && (
 <Flex
 css={{
 position: 'absolute',
 top: 0,
 right: 6,
 backgroundColor: 'var(--harmony-red)',
 color: 'var(--harmony-white)',
 fontSize: '11px',
 fontWeight: 'bold',
 letterSpacing: '0.07px',
 lineHeight: '14px',
 textTransform: 'uppercase',
 padding: '0px 6px',
 transform: 'translateX(50%)',
 borderRadius: '8px'
 }}
 >
 {formatCount(rewardsCount)}
 </Flex>
 )}
 </Flex>
 </Flex>
 )
 } else if (leftElement === LeftPreset.SETTINGS && isSignedIn) {
 left = (
 <>
 <IconButton
 aria-label='settings'
 color='subdued'
 icon={IconSettings}
 onClick={goToSettingsPage}
 />
 <IconButton
 aria-label='audio rewards'
 color={rewardsCount > 0 ? 'warning' : 'subdued'}
 icon={IconGift}
 onClick={goToRewardsPage}
 />
 {rewardsCount > 0 && (
 <div className={styles.iconTag}>{formatCount(rewardsCount)}</div>
 )}
 </>
 )
 } else {
 left = leftElement
 }

 return (
 <div
 <Flex
 className={cn(styles.container, {
 [styles.containerNoBorder]: isSearching
 })}
 >
 <div
 <Flex
 className={cn(styles.leftElement, {
 [styles.isLoading]: isLoading
 })}
 >
 {left}
 </div>
 </Flex>
 {centerElement === CenterPreset.LOGO ? (
 <Link to={TRENDING_PAGE} className={styles.logo}>
 {logoTransitions.map(({ item, props, key }) =>
Expand All@@ -279,36 +210,31 @@ const NavBar = ({
 ) : null}
 {typeof centerElement === 'string' &&
 !Object.values(CenterPreset).includes(centerElement as any) && (
 <div className={styles.centerText}> {centerElement} </div>
 <Flex className={styles.centerText}> {centerElement} </Flex>
 )}
 <div
 <Flex
 className={cn(styles.rightElement, {
 [styles.isLoading]: isLoading
 })}
 >
 {rightElement === RightPreset.SEARCH ? (
 <SearchBar
 open={isSearching}
 onOpen={handleOpenSearch}
 onClose={onCloseSearch}
 value={searchValue}
 onSearch={setSearchValue}
 placeholder={messages.searchPlaceholderV2}
 showHeader={false}
 className={cn(
 styles.searchBar,
 { [styles.searchBarClosed]: !isSearching },
 { [styles.searchBarClosedSignedOut]: !isSearching && !isSignedIn }
 )}
 iconClassname={styles.searchIcon}
 beginSearch={beginSearch}
 status={isSearching ? Status.LOADING : Status.IDLE}
 />
 {rightElement === RightPreset.KEBAB ? (
 <Flex mr='s'>
 <IconButton
 aria-label='menu'
 icon={IconKebabHorizontal}
 color-='subdued'
 onClick={() => setIsActionDrawerOpen(true)}
 />
 </Flex>
 ) : (
 rightElement
 )}
 </div>
 </div>
 </Flex>
 <NavBarActionDrawer
 isOpen={isActionDrawerOpen}
 onClose={() => setIsActionDrawerOpen(false)}
 />
 </Flex>
 )
}

Expand Down

73 changes: 73 additions & 0 deletions
packages/web/src/components/nav/mobile/NavBarActionDrawer.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
import { useCallback, useContext, useMemo } from 'react'

import { WALLET_PAGE } from '@audius/common/src/utils/route'
import { route } from '@audius/common/utils'
import { useDispatch } from 'react-redux'

import ActionDrawer from 'components/action-drawer/ActionDrawer'
import { RouterContext } from 'components/animated-switch/RouterContextProvider'
import { push } from 'utils/navigation'

const { SETTINGS_PAGE, REWARDS_PAGE } = route

type NavBarActionDrawerProps = {
 isOpen: boolean
 onClose: () => void
}

const messages = {
 wallet: 'Wallet',
 rewards: 'Rewards',
 settings: 'Settings'
}

export const NavBarActionDrawer = ({
 isOpen,
 onClose
}: NavBarActionDrawerProps) => {
 const dispatch = useDispatch()
 const { setStackReset } = useContext(RouterContext)

 const goToRoute = useCallback(
 (route: string) => {
 dispatch(push(route))
 },
 [dispatch]
 )

 const goToWalletPage = useCallback(() => {
 setImmediate(() => goToRoute(WALLET_PAGE))
 onClose()
 }, [goToRoute, onClose])

 const goToSettingsPage = useCallback(() => {
 setStackReset(true)
 setImmediate(() => goToRoute(SETTINGS_PAGE))
 onClose()
 }, [goToRoute, onClose, setStackReset])

 const goToRewardsPage = useCallback(() => {
 setImmediate(() => goToRoute(REWARDS_PAGE))
 onClose()
 }, [goToRoute, onClose])

 const actions = useMemo(
 () => [
 {
 text: messages.wallet,
 onClick: goToWalletPage
 },
 {
 text: messages.rewards,
 onClick: goToRewardsPage
 },
 {
 text: messages.settings,
 onClick: goToSettingsPage
 }
 ],
 [goToRewardsPage, goToSettingsPage, goToWalletPage]
 )

 return <ActionDrawer actions={actions} onClose={onClose} isOpen={isOpen} />
}

10 changes: 5 additions & 5 deletions
packages/web/src/components/nav/mobile/NavContext.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -33,7 +33,7 @@ export enum CenterPreset {
}

export enum RightPreset {
SEARCH = 'SEARCH'
KEBAB = 'KEBAB'
}

type LeftElement = LeftPreset | ReactNode | null
Expand All@@ -46,13 +46,13 @@ const NavContext = createContext<NavContextProps>({
 setRight: () => {},
 leftElement: LeftPreset.NOTIFICATION,
 centerElement: CenterPreset.LOGO,
 rightElement: RightPreset.SEARCH
 rightElement: RightPreset.KEBAB
})

const useNavContext = () => {
 const [leftElement, setLeft] = useState<LeftElement>(LeftPreset.NOTIFICATION)
 const [centerElement, setCenter] = useState<CenterElement>(CenterPreset.LOGO)
 const [rightElement, setRight] = useState<RightElement>(RightPreset.SEARCH)
 const [rightElement, setRight] = useState<RightElement>(RightPreset.KEBAB)
 return {
 leftElement,
 setLeft,
Expand DownExpand Up@@ -85,7 +85,7 @@ export const useMainPageHeader = () => {
 useEffect(() => {
 setLeft(LeftPreset.NOTIFICATION)
 setCenter(CenterPreset.LOGO)
 setRight(RightPreset.SEARCH)
 setRight(RightPreset.KEBAB)
 }, [setLeft, setCenter, setRight])
}

Expand All@@ -98,7 +98,7 @@ export const useSubPageHeader = () => {
 useEffect(() => {
 setLeft(LeftPreset.BACK)
 setCenter(CenterPreset.LOGO)
 setRight(RightPreset.SEARCH)
 setRight(RightPreset.KEBAB)
 }, [setLeft, setCenter, setRight])
}

Expand Down

2 changes: 1 addition & 1 deletion
packages/web/src/pages/audio-page/AudioPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -85,7 +85,7 @@ const useMobileNavContext = () => {
 const { setLeft, setRight } = useContext(NavContext)!
 useEffect(() => {
 setLeft(LeftPreset.BACK)
 setRight(RightPreset.SEARCH)
 setRight(RightPreset.KEBAB)
 }, [setLeft, setRight])
}

Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Mobile web top right menu by dharit-tan · Pull Request #12521 · AudiusProject/apps · GitHub
Skip to content
Mobile web top right menu#12521

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

dharit-tan
merged 3 commits into

from

Jul 15, 2025
 Merged


Mobile web top right menu
#12521
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
ae59582

Mobile web top left menu


dharit-tan Jul 11, 2025
9041b76

anim


dharit-tan Jul 11, 2025
1e5e72a

update everywhere


dharit-tan Jul 11, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


14 changes: 1 addition & 13 deletions
packages/web/src/components/nav/mobile/ConnectedNavBar.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,7 +19,7 @@ import { push, goBack } from 'utils/navigation'

import NavBar from './NavBar'

const { NOTIFICATION_PAGE, SETTINGS_PAGE, REWARDS_PAGE } = route
const { NOTIFICATION_PAGE } = route

type ConnectedNavBarProps = ReturnType<typeof mapStateToProps> &
 ReturnType<typeof mapDispatchToProps> &
Expand DownExpand Up@@ -56,32 +56,20 @@ const ConnectedNavBar = ({
 record(make(Name.NOTIFICATIONS_OPEN, { source: 'button' }))
 }, [goToRoute, setStackReset, setSlideDirection, record])

 const goToSettingsPage = useCallback(() => {
 setStackReset(true)
 setImmediate(() => goToRoute(SETTINGS_PAGE))
 }, [goToRoute, setStackReset])

 const signUp = useCallback(() => {
 setStackReset(true)
 }, [setStackReset])

 const goToRewardsPage = useCallback(() => {
 setStackReset(true)
 setImmediate(() => goToRoute(REWARDS_PAGE))
 }, [goToRoute, setStackReset])

 return (
 <NavBar
 isSignedIn={hasAccount}
 isLoading={accountStatus === Status.LOADING}
 signUp={signUp}
 rewardsCount={rewardsCount}
 goToNotificationPage={goToNotificationPage}
 goToSettingsPage={goToSettingsPage}
 search={search}
 goBack={goBack}
 history={history}
 goToRewardsPage={goToRewardsPage}
 />
 )
}
Expand Down

124 changes: 25 additions & 99 deletions
packages/web/src/components/nav/mobile/NavBar.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,25 +1,22 @@
import { useState, useContext, useCallback, useEffect } from 'react'

import { useNotificationUnreadCount } from '@audius/common/api'
import { Status } from '@audius/common/models'
import { formatCount, route } from '@audius/common/utils'
import {
 IconAudiusLogoHorizontal,
 IconSettings,
 IconCaretLeft,
 IconClose,
 IconNotificationOn,
 IconButton,
IconGift,
Flex
Flex,
IconKebabHorizontal
} from '@audius/harmony'
import cn from 'classnames'
import { History } from 'history'
import { Link } from 'react-router-dom'
// eslint-disable-next-line no-restricted-imports -- TODO: migrate to @react-spring/web
import { useTransition, animated } from 'react-spring'

import { useHistoryContext } from 'app/HistoryProvider'
import {
 RouterContext,
 SlideDirection
Expand All@@ -29,10 +26,10 @@ import NavContext, {
 CenterPreset,
 RightPreset
} from 'components/nav/mobile/NavContext'
import SearchBar from 'components/search-bar/SearchBar'
import { getIsIOS } from 'utils/browser'

import styles from './NavBar.module.css'
import { NavBarActionDrawer } from './NavBarActionDrawer'

const { SIGN_UP_PAGE, TRENDING_PAGE } = route

Expand All@@ -42,8 +39,6 @@ interface NavBarProps {
 rewardsCount: number
 signUp: () => void
 goToNotificationPage: () => void
 goToSettingsPage: () => void
 goToRewardsPage: () => void
 search: (term: string) => void
 goBack: () => void
 history: History<any>
Expand All@@ -61,41 +56,26 @@ const NavBar = ({
 search,
 signUp,
 goToNotificationPage,
 goToSettingsPage,
 goBack,
 goToRewardsPage,
 history: {
 location: { pathname }
 }
}: NavBarProps) => {
 const { history } = useHistoryContext()
 const { leftElement, centerElement, rightElement } = useContext(NavContext)!
 const { data: notificationCount = 0 } = useNotificationUnreadCount()

 const [isSearching, setIsSearching] = useState(false)
 const [searchValue, setSearchValue] = useState('')

 const { setStackReset } = useContext(RouterContext)
 const beginSearch = useCallback(() => {
 setStackReset(true)
 setImmediate(() => search(searchValue))
 }, [setStackReset, search, searchValue])

 const [isActionDrawerOpen, setIsActionDrawerOpen] = useState(false)

 useEffect(() => {
 const splitPath = pathname.split('/')
 const isSearch = splitPath.length > 1 && splitPath[1] === 'search'
 setIsSearching(isSearch)
 }, [pathname])

 const handleOpenSearch = useCallback(() => {
 history.push(`/explore`)
 }, [history])

 const onCloseSearch = () => {
 setIsSearching(false)
 setSearchValue('')
 }

 const logoTransitions = useTransition(!isSearching, null, {
 from: {
 opacity: 0,
Expand DownExpand Up@@ -194,74 +174,25 @@ const NavBar = ({
 </Flex>
 )}
 </Flex>
 <Flex>
 <IconButton
 aria-label='audio rewards'
 color={rewardsCount > 0 ? 'warning' : 'subdued'}
 icon={IconGift}
 onClick={goToRewardsPage}
 />
 {rewardsCount > 0 && (
 <Flex
 css={{
 position: 'absolute',
 top: 0,
 right: 6,
 backgroundColor: 'var(--harmony-red)',
 color: 'var(--harmony-white)',
 fontSize: '11px',
 fontWeight: 'bold',
 letterSpacing: '0.07px',
 lineHeight: '14px',
 textTransform: 'uppercase',
 padding: '0px 6px',
 transform: 'translateX(50%)',
 borderRadius: '8px'
 }}
 >
 {formatCount(rewardsCount)}
 </Flex>
 )}
 </Flex>
 </Flex>
 )
 } else if (leftElement === LeftPreset.SETTINGS && isSignedIn) {
 left = (
 <>
 <IconButton
 aria-label='settings'
 color='subdued'
 icon={IconSettings}
 onClick={goToSettingsPage}
 />
 <IconButton
 aria-label='audio rewards'
 color={rewardsCount > 0 ? 'warning' : 'subdued'}
 icon={IconGift}
 onClick={goToRewardsPage}
 />
 {rewardsCount > 0 && (
 <div className={styles.iconTag}>{formatCount(rewardsCount)}</div>
 )}
 </>
 )
 } else {
 left = leftElement
 }

 return (
 <div
 <Flex
 className={cn(styles.container, {
 [styles.containerNoBorder]: isSearching
 })}
 >
 <div
 <Flex
 className={cn(styles.leftElement, {
 [styles.isLoading]: isLoading
 })}
 >
 {left}
 </div>
 </Flex>
 {centerElement === CenterPreset.LOGO ? (
 <Link to={TRENDING_PAGE} className={styles.logo}>
 {logoTransitions.map(({ item, props, key }) =>
Expand All@@ -279,36 +210,31 @@ const NavBar = ({
 ) : null}
 {typeof centerElement === 'string' &&
 !Object.values(CenterPreset).includes(centerElement as any) && (
 <div className={styles.centerText}> {centerElement} </div>
 <Flex className={styles.centerText}> {centerElement} </Flex>
 )}
 <div
 <Flex
 className={cn(styles.rightElement, {
 [styles.isLoading]: isLoading
 })}
 >
 {rightElement === RightPreset.SEARCH ? (
 <SearchBar
 open={isSearching}
 onOpen={handleOpenSearch}
 onClose={onCloseSearch}
 value={searchValue}
 onSearch={setSearchValue}
 placeholder={messages.searchPlaceholderV2}
 showHeader={false}
 className={cn(
 styles.searchBar,
 { [styles.searchBarClosed]: !isSearching },
 { [styles.searchBarClosedSignedOut]: !isSearching && !isSignedIn }
 )}
 iconClassname={styles.searchIcon}
 beginSearch={beginSearch}
 status={isSearching ? Status.LOADING : Status.IDLE}
 />
 {rightElement === RightPreset.KEBAB ? (
 <Flex mr='s'>
 <IconButton
 aria-label='menu'
 icon={IconKebabHorizontal}
 color-='subdued'
 onClick={() => setIsActionDrawerOpen(true)}
 />
 </Flex>
 ) : (
 rightElement
 )}
 </div>
 </div>
 </Flex>
 <NavBarActionDrawer
 isOpen={isActionDrawerOpen}
 onClose={() => setIsActionDrawerOpen(false)}
 />
 </Flex>
 )
}

Expand Down

73 changes: 73 additions & 0 deletions
packages/web/src/components/nav/mobile/NavBarActionDrawer.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
import { useCallback, useContext, useMemo } from 'react'

import { WALLET_PAGE } from '@audius/common/src/utils/route'
import { route } from '@audius/common/utils'
import { useDispatch } from 'react-redux'

import ActionDrawer from 'components/action-drawer/ActionDrawer'
import { RouterContext } from 'components/animated-switch/RouterContextProvider'
import { push } from 'utils/navigation'

const { SETTINGS_PAGE, REWARDS_PAGE } = route

type NavBarActionDrawerProps = {
 isOpen: boolean
 onClose: () => void
}

const messages = {
 wallet: 'Wallet',
 rewards: 'Rewards',
 settings: 'Settings'
}

export const NavBarActionDrawer = ({
 isOpen,
 onClose
}: NavBarActionDrawerProps) => {
 const dispatch = useDispatch()
 const { setStackReset } = useContext(RouterContext)

 const goToRoute = useCallback(
 (route: string) => {
 dispatch(push(route))
 },
 [dispatch]
 )

 const goToWalletPage = useCallback(() => {
 setImmediate(() => goToRoute(WALLET_PAGE))
 onClose()
 }, [goToRoute, onClose])

 const goToSettingsPage = useCallback(() => {
 setStackReset(true)
 setImmediate(() => goToRoute(SETTINGS_PAGE))
 onClose()
 }, [goToRoute, onClose, setStackReset])

 const goToRewardsPage = useCallback(() => {
 setImmediate(() => goToRoute(REWARDS_PAGE))
 onClose()
 }, [goToRoute, onClose])

 const actions = useMemo(
 () => [
 {
 text: messages.wallet,
 onClick: goToWalletPage
 },
 {
 text: messages.rewards,
 onClick: goToRewardsPage
 },
 {
 text: messages.settings,
 onClick: goToSettingsPage
 }
 ],
 [goToRewardsPage, goToSettingsPage, goToWalletPage]
 )

 return <ActionDrawer actions={actions} onClose={onClose} isOpen={isOpen} />
}

10 changes: 5 additions & 5 deletions
packages/web/src/components/nav/mobile/NavContext.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -33,7 +33,7 @@ export enum CenterPreset {
}

export enum RightPreset {
SEARCH = 'SEARCH'
KEBAB = 'KEBAB'
}

type LeftElement = LeftPreset | ReactNode | null
Expand All@@ -46,13 +46,13 @@ const NavContext = createContext<NavContextProps>({
 setRight: () => {},
 leftElement: LeftPreset.NOTIFICATION,
 centerElement: CenterPreset.LOGO,
 rightElement: RightPreset.SEARCH
 rightElement: RightPreset.KEBAB
})

const useNavContext = () => {
 const [leftElement, setLeft] = useState<LeftElement>(LeftPreset.NOTIFICATION)
 const [centerElement, setCenter] = useState<CenterElement>(CenterPreset.LOGO)
 const [rightElement, setRight] = useState<RightElement>(RightPreset.SEARCH)
 const [rightElement, setRight] = useState<RightElement>(RightPreset.KEBAB)
 return {
 leftElement,
 setLeft,
Expand DownExpand Up@@ -85,7 +85,7 @@ export const useMainPageHeader = () => {
 useEffect(() => {
 setLeft(LeftPreset.NOTIFICATION)
 setCenter(CenterPreset.LOGO)
 setRight(RightPreset.SEARCH)
 setRight(RightPreset.KEBAB)
 }, [setLeft, setCenter, setRight])
}

Expand All@@ -98,7 +98,7 @@ export const useSubPageHeader = () => {
 useEffect(() => {
 setLeft(LeftPreset.BACK)
 setCenter(CenterPreset.LOGO)
 setRight(RightPreset.SEARCH)
 setRight(RightPreset.KEBAB)
 }, [setLeft, setCenter, setRight])
}

Expand Down

2 changes: 1 addition & 1 deletion
packages/web/src/pages/audio-page/AudioPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -85,7 +85,7 @@ const useMobileNavContext = () => {
 const { setLeft, setRight } = useContext(NavContext)!
 useEffect(() => {
 setLeft(LeftPreset.BACK)
 setRight(RightPreset.SEARCH)
 setRight(RightPreset.KEBAB)
 }, [setLeft, setRight])
}

Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
Mobile web top right menu by dharit-tan · Pull Request #12521 · AudiusProject/apps · GitHub
Skip to content
Mobile web top right menu#12521

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

dharit-tan
merged 3 commits into

from

Jul 15, 2025
 Merged


Mobile web top right menu
#12521
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
ae59582

Mobile web top left menu


dharit-tan Jul 11, 2025
9041b76

anim


dharit-tan Jul 11, 2025
1e5e72a

update everywhere


dharit-tan Jul 11, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


14 changes: 1 addition & 13 deletions
packages/web/src/components/nav/mobile/ConnectedNavBar.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,7 +19,7 @@ import { push, goBack } from 'utils/navigation'

import NavBar from './NavBar'

const { NOTIFICATION_PAGE, SETTINGS_PAGE, REWARDS_PAGE } = route
const { NOTIFICATION_PAGE } = route

type ConnectedNavBarProps = ReturnType<typeof mapStateToProps> &
 ReturnType<typeof mapDispatchToProps> &
Expand DownExpand Up@@ -56,32 +56,20 @@ const ConnectedNavBar = ({
 record(make(Name.NOTIFICATIONS_OPEN, { source: 'button' }))
 }, [goToRoute, setStackReset, setSlideDirection, record])

 const goToSettingsPage = useCallback(() => {
 setStackReset(true)
 setImmediate(() => goToRoute(SETTINGS_PAGE))
 }, [goToRoute, setStackReset])

 const signUp = useCallback(() => {
 setStackReset(true)
 }, [setStackReset])

 const goToRewardsPage = useCallback(() => {
 setStackReset(true)
 setImmediate(() => goToRoute(REWARDS_PAGE))
 }, [goToRoute, setStackReset])

 return (
 <NavBar
 isSignedIn={hasAccount}
 isLoading={accountStatus === Status.LOADING}
 signUp={signUp}
 rewardsCount={rewardsCount}
 goToNotificationPage={goToNotificationPage}
 goToSettingsPage={goToSettingsPage}
 search={search}
 goBack={goBack}
 history={history}
 goToRewardsPage={goToRewardsPage}
 />
 )
}
Expand Down

124 changes: 25 additions & 99 deletions
packages/web/src/components/nav/mobile/NavBar.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,25 +1,22 @@
import { useState, useContext, useCallback, useEffect } from 'react'

import { useNotificationUnreadCount } from '@audius/common/api'
import { Status } from '@audius/common/models'
import { formatCount, route } from '@audius/common/utils'
import {
 IconAudiusLogoHorizontal,
 IconSettings,
 IconCaretLeft,
 IconClose,
 IconNotificationOn,
 IconButton,
IconGift,
Flex
Flex,
IconKebabHorizontal
} from '@audius/harmony'
import cn from 'classnames'
import { History } from 'history'
import { Link } from 'react-router-dom'
// eslint-disable-next-line no-restricted-imports -- TODO: migrate to @react-spring/web
import { useTransition, animated } from 'react-spring'

import { useHistoryContext } from 'app/HistoryProvider'
import {
 RouterContext,
 SlideDirection
Expand All@@ -29,10 +26,10 @@ import NavContext, {
 CenterPreset,
 RightPreset
} from 'components/nav/mobile/NavContext'
import SearchBar from 'components/search-bar/SearchBar'
import { getIsIOS } from 'utils/browser'

import styles from './NavBar.module.css'
import { NavBarActionDrawer } from './NavBarActionDrawer'

const { SIGN_UP_PAGE, TRENDING_PAGE } = route

Expand All@@ -42,8 +39,6 @@ interface NavBarProps {
 rewardsCount: number
 signUp: () => void
 goToNotificationPage: () => void
 goToSettingsPage: () => void
 goToRewardsPage: () => void
 search: (term: string) => void
 goBack: () => void
 history: History<any>
Expand All@@ -61,41 +56,26 @@ const NavBar = ({
 search,
 signUp,
 goToNotificationPage,
 goToSettingsPage,
 goBack,
 goToRewardsPage,
 history: {
 location: { pathname }
 }
}: NavBarProps) => {
 const { history } = useHistoryContext()
 const { leftElement, centerElement, rightElement } = useContext(NavContext)!
 const { data: notificationCount = 0 } = useNotificationUnreadCount()

 const [isSearching, setIsSearching] = useState(false)
 const [searchValue, setSearchValue] = useState('')

 const { setStackReset } = useContext(RouterContext)
 const beginSearch = useCallback(() => {
 setStackReset(true)
 setImmediate(() => search(searchValue))
 }, [setStackReset, search, searchValue])

 const [isActionDrawerOpen, setIsActionDrawerOpen] = useState(false)

 useEffect(() => {
 const splitPath = pathname.split('/')
 const isSearch = splitPath.length > 1 && splitPath[1] === 'search'
 setIsSearching(isSearch)
 }, [pathname])

 const handleOpenSearch = useCallback(() => {
 history.push(`/explore`)
 }, [history])

 const onCloseSearch = () => {
 setIsSearching(false)
 setSearchValue('')
 }

 const logoTransitions = useTransition(!isSearching, null, {
 from: {
 opacity: 0,
Expand DownExpand Up@@ -194,74 +174,25 @@ const NavBar = ({
 </Flex>
 )}
 </Flex>
 <Flex>
 <IconButton
 aria-label='audio rewards'
 color={rewardsCount > 0 ? 'warning' : 'subdued'}
 icon={IconGift}
 onClick={goToRewardsPage}
 />
 {rewardsCount > 0 && (
 <Flex
 css={{
 position: 'absolute',
 top: 0,
 right: 6,
 backgroundColor: 'var(--harmony-red)',
 color: 'var(--harmony-white)',
 fontSize: '11px',
 fontWeight: 'bold',
 letterSpacing: '0.07px',
 lineHeight: '14px',
 textTransform: 'uppercase',
 padding: '0px 6px',
 transform: 'translateX(50%)',
 borderRadius: '8px'
 }}
 >
 {formatCount(rewardsCount)}
 </Flex>
 )}
 </Flex>
 </Flex>
 )
 } else if (leftElement === LeftPreset.SETTINGS && isSignedIn) {
 left = (
 <>
 <IconButton
 aria-label='settings'
 color='subdued'
 icon={IconSettings}
 onClick={goToSettingsPage}
 />
 <IconButton
 aria-label='audio rewards'
 color={rewardsCount > 0 ? 'warning' : 'subdued'}
 icon={IconGift}
 onClick={goToRewardsPage}
 />
 {rewardsCount > 0 && (
 <div className={styles.iconTag}>{formatCount(rewardsCount)}</div>
 )}
 </>
 )
 } else {
 left = leftElement
 }

 return (
 <div
 <Flex
 className={cn(styles.container, {
 [styles.containerNoBorder]: isSearching
 })}
 >
 <div
 <Flex
 className={cn(styles.leftElement, {
 [styles.isLoading]: isLoading
 })}
 >
 {left}
 </div>
 </Flex>
 {centerElement === CenterPreset.LOGO ? (
 <Link to={TRENDING_PAGE} className={styles.logo}>
 {logoTransitions.map(({ item, props, key }) =>
Expand All@@ -279,36 +210,31 @@ const NavBar = ({
 ) : null}
 {typeof centerElement === 'string' &&
 !Object.values(CenterPreset).includes(centerElement as any) && (
 <div className={styles.centerText}> {centerElement} </div>
 <Flex className={styles.centerText}> {centerElement} </Flex>
 )}
 <div
 <Flex
 className={cn(styles.rightElement, {
 [styles.isLoading]: isLoading
 })}
 >
 {rightElement === RightPreset.SEARCH ? (
 <SearchBar
 open={isSearching}
 onOpen={handleOpenSearch}
 onClose={onCloseSearch}
 value={searchValue}
 onSearch={setSearchValue}
 placeholder={messages.searchPlaceholderV2}
 showHeader={false}
 className={cn(
 styles.searchBar,
 { [styles.searchBarClosed]: !isSearching },
 { [styles.searchBarClosedSignedOut]: !isSearching && !isSignedIn }
 )}
 iconClassname={styles.searchIcon}
 beginSearch={beginSearch}
 status={isSearching ? Status.LOADING : Status.IDLE}
 />
 {rightElement === RightPreset.KEBAB ? (
 <Flex mr='s'>
 <IconButton
 aria-label='menu'
 icon={IconKebabHorizontal}
 color-='subdued'
 onClick={() => setIsActionDrawerOpen(true)}
 />
 </Flex>
 ) : (
 rightElement
 )}
 </div>
 </div>
 </Flex>
 <NavBarActionDrawer
 isOpen={isActionDrawerOpen}
 onClose={() => setIsActionDrawerOpen(false)}
 />
 </Flex>
 )
}

Expand Down

73 changes: 73 additions & 0 deletions
packages/web/src/components/nav/mobile/NavBarActionDrawer.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
import { useCallback, useContext, useMemo } from 'react'

import { WALLET_PAGE } from '@audius/common/src/utils/route'
import { route } from '@audius/common/utils'
import { useDispatch } from 'react-redux'

import ActionDrawer from 'components/action-drawer/ActionDrawer'
import { RouterContext } from 'components/animated-switch/RouterContextProvider'
import { push } from 'utils/navigation'

const { SETTINGS_PAGE, REWARDS_PAGE } = route

type NavBarActionDrawerProps = {
 isOpen: boolean
 onClose: () => void
}

const messages = {
 wallet: 'Wallet',
 rewards: 'Rewards',
 settings: 'Settings'
}

export const NavBarActionDrawer = ({
 isOpen,
 onClose
}: NavBarActionDrawerProps) => {
 const dispatch = useDispatch()
 const { setStackReset } = useContext(RouterContext)

 const goToRoute = useCallback(
 (route: string) => {
 dispatch(push(route))
 },
 [dispatch]
 )

 const goToWalletPage = useCallback(() => {
 setImmediate(() => goToRoute(WALLET_PAGE))
 onClose()
 }, [goToRoute, onClose])

 const goToSettingsPage = useCallback(() => {
 setStackReset(true)
 setImmediate(() => goToRoute(SETTINGS_PAGE))
 onClose()
 }, [goToRoute, onClose, setStackReset])

 const goToRewardsPage = useCallback(() => {
 setImmediate(() => goToRoute(REWARDS_PAGE))
 onClose()
 }, [goToRoute, onClose])

 const actions = useMemo(
 () => [
 {
 text: messages.wallet,
 onClick: goToWalletPage
 },
 {
 text: messages.rewards,
 onClick: goToRewardsPage
 },
 {
 text: messages.settings,
 onClick: goToSettingsPage
 }
 ],
 [goToRewardsPage, goToSettingsPage, goToWalletPage]
 )

 return <ActionDrawer actions={actions} onClose={onClose} isOpen={isOpen} />
}

10 changes: 5 additions & 5 deletions
packages/web/src/components/nav/mobile/NavContext.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -33,7 +33,7 @@ export enum CenterPreset {
}

export enum RightPreset {
SEARCH = 'SEARCH'
KEBAB = 'KEBAB'
}

type LeftElement = LeftPreset | ReactNode | null
Expand All@@ -46,13 +46,13 @@ const NavContext = createContext<NavContextProps>({
 setRight: () => {},
 leftElement: LeftPreset.NOTIFICATION,
 centerElement: CenterPreset.LOGO,
 rightElement: RightPreset.SEARCH
 rightElement: RightPreset.KEBAB
})

const useNavContext = () => {
 const [leftElement, setLeft] = useState<LeftElement>(LeftPreset.NOTIFICATION)
 const [centerElement, setCenter] = useState<CenterElement>(CenterPreset.LOGO)
 const [rightElement, setRight] = useState<RightElement>(RightPreset.SEARCH)
 const [rightElement, setRight] = useState<RightElement>(RightPreset.KEBAB)
 return {
 leftElement,
 setLeft,
Expand DownExpand Up@@ -85,7 +85,7 @@ export const useMainPageHeader = () => {
 useEffect(() => {
 setLeft(LeftPreset.NOTIFICATION)
 setCenter(CenterPreset.LOGO)
 setRight(RightPreset.SEARCH)
 setRight(RightPreset.KEBAB)
 }, [setLeft, setCenter, setRight])
}

Expand All@@ -98,7 +98,7 @@ export const useSubPageHeader = () => {
 useEffect(() => {
 setLeft(LeftPreset.BACK)
 setCenter(CenterPreset.LOGO)
 setRight(RightPreset.SEARCH)
 setRight(RightPreset.KEBAB)
 }, [setLeft, setCenter, setRight])
}

Expand Down

2 changes: 1 addition & 1 deletion
packages/web/src/pages/audio-page/AudioPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -85,7 +85,7 @@ const useMobileNavContext = () => {
 const { setLeft, setRight } = useContext(NavContext)!
 useEffect(() => {
 setLeft(LeftPreset.BACK)
 setRight(RightPreset.SEARCH)
 setRight(RightPreset.KEBAB)
 }, [setLeft, setRight])
}

Expand Down
Loading