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

move notifications to icon

This commit is contained in:
keyan 2022-04-19 16:37:05 -05:00
parent ef43319cbc
commit 291eab6ada
4 changed files with 29 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
components/header.js
View File

@ -12,11 +12,12 @@ import { useLightning } from './lightning'
import { useEffect, useState } from 'react'
import { randInRange } from '../lib/rand'
import { formatSats } from '../lib/format'
import NoteIcon from '../svgs/notification-4-fill.svg'
function WalletSummary ({ me }) {
if (!me) return null
return `${formatSats(me.sats)} \\ ${formatSats(me.stacked)}`
return `${formatSats(me.sats)}`
}
export default function Header ({ sub }) {
@ -33,6 +34,15 @@ export default function Header ({ sub }) {
<Head>
<link rel='shortcut icon' href={me?.hasNewNotes ? '/favicon-notify.png' : '/favicon.png'} />
</Head>
<Link href='/notifications' passHref>
<Nav.Link className='pl-0 position-relative'>
<NoteIcon className='fill-lgrey' />
{me?.hasNewNotes &&
<span className={styles.notification}>
<span className='invisible'>{' '}</span>
</span>}
</Nav.Link>
</Link>
<div className='position-relative'>
<NavDropdown className={styles.dropdown} title={`@${me?.name}`} alignRight>
<Link href={'/' + me?.name} passHref>
@ -44,18 +54,12 @@ export default function Header ({ sub }) {
</div>}
</NavDropdown.Item>
</Link>
<Link href='/notifications' passHref>
<NavDropdown.Item>
notifications
{me?.hasNewNotes &&
<div className='p-1 d-inline-block bg-danger ml-1'>
<span className='invisible'>{' '}</span>
</div>}
</NavDropdown.Item>
</Link>
<Link href='/wallet' passHref>
<NavDropdown.Item>wallet</NavDropdown.Item>
</Link>
<Link href='/satistics?inc=invoice,withdrawal,stacked,spent' passHref>
<NavDropdown.Item>satistics</NavDropdown.Item>
</Link>
<NavDropdown.Divider />
<Link href='/invites' passHref>
<NavDropdown.Item>invites
@ -74,12 +78,8 @@ export default function Header ({ sub }) {
<NavDropdown.Divider />
<NavDropdown.Item onClick={() => signOut({ callbackUrl: '/' })}>logout</NavDropdown.Item>
</NavDropdown>
{me?.hasNewNotes &&
<span className='position-absolute p-1 bg-danger' style={{ top: '5px', right: '0px' }}>
<span className='invisible'>{' '}</span>
</span>}
{me && !me.bio &&
<span className='position-absolute p-1 bg-secondary' style={{ bottom: '5px', right: '0px' }}>
<span className='position-absolute p-1 bg-secondary' style={{ top: '5px', right: '0px' }}>
<span className='invisible'>{' '}</span>
</span>}
</div>

9
components/header.module.css
View File

@ -27,6 +27,15 @@
padding-left: 0 !important;
}
.notification {
position: absolute;
padding: .25rem;
background-color: var(--danger);
top: 3px;
right: 8px;
border: 1px solid var(--theme-body);
}
.navLink:last-child {
padding-right: 0 !important;
}

4
styles/globals.scss
View File

@ -375,6 +375,10 @@ textarea.form-control {
fill: var(--theme-grey);
}
.fill-lgrey {
fill: #a5a5a5;
}
.fill-secondary {
fill: var(--secondary);
}

1
svgs/notification-4-fill.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M20 18.667l.4.533a.5.5 0 0 1-.4.8H4a.5.5 0 0 1-.4-.8l.4-.533V10a8 8 0 1 1 16 0v8.667zM9.5 21h5a2.5 2.5 0 1 1-5 0z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 251 B