fix: Hide appnav banner when collapsed (#186)

This commit is contained in:
Shorpo 2024-01-04 21:13:41 -07:00 committed by GitHub
parent 8815eff9b8
commit 08b06fa5aa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 72 additions and 55 deletions

View file

@ -0,0 +1,5 @@
---
'@hyperdx/app': patch
---
Hide appnav banner when collapsed

View file

@ -277,8 +277,12 @@ export default function AlertsPage() {
<div className="text-center text-slate-400 my-4 fs-8">
Error
</div>
) : alerts?.length ? (
<AlertCardList alerts={alerts} />
) : (
alerts?.length && <AlertCardList alerts={alerts} />
<div className="text-center text-slate-400 my-4 fs-8">
No alerts created yet
</div>
)}
</Container>
</div>

View file

@ -866,61 +866,69 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
) : null}
</div>
</div>
<div className="mb-4 mt-4">
<div className="my-3 bg-hdx-dark rounded p-2 text-center">
<span className="">Ready to use HyperDX Cloud?</span>
<div className="mt-3 mb-2">
<Link href="https://www.hyperdx.io/register" passHref>
<Button variant="outline-success" className="inter" size="sm">
Get Started for Free
</Button>
</Link>
{!isCollapsed && (
<>
<div className="mb-4 mt-4">
<div className="my-3 bg-hdx-dark rounded p-2 text-center">
<span className="">Ready to use HyperDX Cloud?</span>
<div className="mt-3 mb-2">
<Link href="https://www.hyperdx.io/register" passHref>
<Button
variant="outline-success"
className="inter"
size="sm"
>
Get Started for Free
</Button>
</Link>
</div>
</div>
<div className="my-3">
<Link href="/team">
<a
className={cx(
'text-decoration-none d-flex justify-content-between align-items-center text-muted-hover',
{
'fw-bold text-success': pathname.includes('/team'),
},
)}
>
<span>
<i className="bi bi-gear" />{' '}
{!isCollapsed && <span>Team Settings</span>}
</span>
</a>
</Link>
</div>
<div className="my-3">
<Link href="https://hyperdx.io/docs">
<a
className={cx(
'text-decoration-none d-flex justify-content-between align-items-center text-muted-hover',
)}
target="_blank"
>
<span>
<i className="bi bi-book" />{' '}
{!isCollapsed && <span>Documentation</span>}
</span>
</a>
</Link>
</div>
<div className="my-4">
<Link href={`${API_SERVER_URL}/logout`}>
<span role="button" className="text-muted-hover">
<i className="bi bi-box-arrow-left" />{' '}
{!isCollapsed && <span>Logout</span>}
</span>
</Link>
</div>
</div>
</div>
<div className="my-3">
<Link href="/team">
<a
className={cx(
'text-decoration-none d-flex justify-content-between align-items-center text-muted-hover',
{
'fw-bold text-success': pathname.includes('/team'),
},
)}
>
<span>
<i className="bi bi-gear" />{' '}
{!isCollapsed && <span>Team Settings</span>}
</span>
</a>
</Link>
</div>
<div className="my-3">
<Link href="https://hyperdx.io/docs">
<a
className={cx(
'text-decoration-none d-flex justify-content-between align-items-center text-muted-hover',
)}
target="_blank"
>
<span>
<i className="bi bi-book" />{' '}
{!isCollapsed && <span>Documentation</span>}
</span>
</a>
</Link>
</div>
<div className="my-4">
<Link href={`${API_SERVER_URL}/logout`}>
<span role="button" className="text-muted-hover">
<i className="bi bi-box-arrow-left" />{' '}
{!isCollapsed && <span>Logout</span>}
</span>
</Link>
</div>
</div>
<div className="d-flex justify-content-end align-items-end">
<span className="text-muted-hover fs-7">v{version}</span>
</div>
<div className="d-flex justify-content-end align-items-end">
<span className="text-muted-hover fs-7">v{version}</span>
</div>
</>
)}
</div>
</>
);