ekzyis/stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor Indicator component (#2453)

Browse Source 
* Fix inconsistent indicator style in dropdown, offcanvas

* Fix missing offcanvas indicator

* Refactor indicators

---------

Co-authored-by: Keyan <34140557+huumn@users.noreply.github.com>
This commit is contained in:
ekzyis 2025-08-29 20:22:05 +02:00 committed by GitHub
parent a83709dfe3
commit 2d3d3ac6c9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 21 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
components/nav/common.js
View File

@ -160,16 +160,21 @@ export function NavWalletSummary ({ className }) {
)
}
export const Indicator = () => {
export const Indicator = ({ show, children }) => {
return (
<span className='d-inline-block p-1'>
<span
className='position-absolute p-1 bg-secondary'
style={{ top: '5px', right: '0px', height: '5px', width: '5px' }}
>
<span className='invisible'>{' '}</span>
</span>
</span>
<div className='w-fit-content position-relative'>
{children}
{show && (
<span className='d-inline-block p-1'>
<span
className='position-absolute p-1 bg-secondary'
style={{ top: '5px', right: '0px', height: '5px', width: '5px' }}
>
<span className='invisible'>{' '}</span>
</span>
</span>
)}
</div>
)
}
@ -186,8 +191,7 @@ export function MeDropdown ({ me, dropNavKey }) {
<Dropdown.Toggle className='nav-link nav-item fw-normal' id='profile' variant='custom'>
<div className='d-flex align-items-center'>
<Nav.Link eventKey={me.name} as='span' className='p-0 position-relative'>
{`@${me.name}`}
{indicator && <Indicator />}
<Indicator show={indicator}>@{me.name}</Indicator>
</Nav.Link>
<Badges user={me} />
</div>
@ -195,10 +199,7 @@ export function MeDropdown ({ me, dropNavKey }) {
<Dropdown.Menu>
<Link href={'/' + me.name} passHref legacyBehavior>
<Dropdown.Item active={me.name === dropNavKey}>
<div className='w-fit-content position-relative'>
profile
{profileIndicator && <Indicator />}
</div>
<Indicator show={profileIndicator}>profile</Indicator>
</Dropdown.Item>
</Link>
<Link href={'/' + me.name + '/bookmarks'} passHref legacyBehavior>
@ -206,10 +207,7 @@ export function MeDropdown ({ me, dropNavKey }) {
</Link>
<Link href='/wallets' passHref legacyBehavior>
<Dropdown.Item eventKey='wallets'>
<div className='w-fit-content position-relative'>
wallets
{walletIndicator && <Indicator />}
</div>
<Indicator show={walletIndicator}>wallets</Indicator>
</Dropdown.Item>
</Link>
<Link href='/credits' passHref legacyBehavior>

21
components/nav/mobile/offcanvas.js
View File

@ -32,11 +32,7 @@ export default function OffCanvas ({ me, dropNavKey }) {
return (
<>
<div className='position-relative'>
<MeImage onClick={handleShow} />
{indicator && <Indicator />}
</div>
<Indicator show={indicator}><MeImage onClick={handleShow} /></Indicator>
<Offcanvas className={canvasStyles.offcanvas} show={show} onHide={handleClose} placement='end'>
<Offcanvas.Header closeButton>
<Offcanvas.Title><NavWalletSummary /></Offcanvas.Title>
@ -57,10 +53,7 @@ export default function OffCanvas ({ me, dropNavKey }) {
<>
<Link href={'/' + me.name} passHref legacyBehavior>
<Dropdown.Item active={me.name === dropNavKey}>
<div className='w-fit-content position-relative'>
profile
{profileIndicator && <Indicator />}
</div>
<Indicator show={profileIndicator}>profile</Indicator>
</Dropdown.Item>
</Link>
<Link href={'/' + me.name + '/bookmarks'} passHref legacyBehavior>
@ -68,10 +61,7 @@ export default function OffCanvas ({ me, dropNavKey }) {
</Link>
<Link href='/wallets' passHref legacyBehavior>
<Dropdown.Item eventKey='wallets'>
<div className='w-fit-content position-relative'>
wallets
{walletIndicator && <Indicator />}
</div>
<Indicator show={walletIndicator}>wallets</Indicator>
</Dropdown.Item>
</Link>
<Link href='/credits' passHref legacyBehavior>
@ -101,10 +91,7 @@ export default function OffCanvas ({ me, dropNavKey }) {
<Link href={`/${me?.name || 'anon'}`} className='d-flex flex-row p-2 mt-auto text-muted'>
<MeImage />
<div className='ms-2'>
<div className='w-fit-content position-relative'>
@{me?.name || 'anon'}
{indicator && <Indicator />}
</div>
<Indicator show={indicator}>@{me?.name || 'anon'}</Indicator>
</div>
</Link>
</Nav>