Skip to content
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

update to match exposed uswds pageheader #20

Merged
merged 13 commits into from
Dec 10, 2024
Merged

update to match exposed uswds pageheader #20

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
bbe9896
update to match exposed uswds pageheader
sandrahoang686 Nov 25, 2024
f9ee236
Bump UI version to test USWDS styles
dzole0311 Nov 29, 2024
aed16bf
Revert "Bump UI version to test USWDS styles"
dzole0311 Nov 29, 2024
81ce7e5
Bump UI version
dzole0311 Nov 29, 2024
bc22587
Bump UI, add mock nav items for testing
dzole0311 Dec 2, 2024
4f401be
Fix import
dzole0311 Dec 2, 2024
dba2980
Bump UI version
dzole0311 Dec 3, 2024
a03ef2d
Bump UI version
dzole0311 Dec 10, 2024
724fab1
Revert "Bump UI version"
dzole0311 Dec 10, 2024
77fe62b
Update page header to match the veda-ui
dzole0311 Dec 10, 2024
6d9161f
Fix logo styles
dzole0311 Dec 10, 2024
4305afe
Merge branch 'main' into use-uswds-pageheader
dzole0311 Dec 10, 2024
5db1a4a
Remove obsolete elements
dzole0311 Dec 10, 2024
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
36 changes: 13 additions & 23 deletions app/components/nav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,31 @@
import React from 'react';
import Link from 'next/link';
import { PageHeader, LogoContainer } from '@lib';
import { PageHeader } from '@lib';
import NasaLogo from '../../public/images/nasa-logo';
import { NavItem } from '@lib';

const navItems: NavItem[] = [
// @TODO: This should use the NavLinkType from veda-ui...
{
id: 'home',
title: 'Home',
to: '/',
type: 'internalLink',
},
{
id: 'data-catalog',
title: 'Data Catalog',
to: '/data-catalog',
type: 'internalLink',
},
{
id: 'exploration',
title: 'Exploration',
to: '/exploration',
type: 'internalLink',
},
{
id: 'stories',
title: 'Stories',
to: '/stories',
type: 'internalLink',
Expand All @@ -34,30 +38,16 @@ export function Navbar() {
pathAttributeKeyName: 'href',
};

const Logo: JSX.Element = (
<LogoContainer
linkProperties={linkProps}
logo={<NasaLogo />}
title='Earthdata'
subTitle='veda dashboard'
version='1.0.0'
/>
);

return (
<aside className='-ml-[8px] tracking-tight'>
<div className='lg:sticky lg:top-20'>
<nav id='nav'>
<div className='flex flex-row space-x-0 hug-reset-container'>
<PageHeader
mainNavItems={navItems}
subNavItems={[]}
logo={Logo}
linkProperties={linkProps}
/>
</div>
</nav>
</div>
<nav id='nav'>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am wondering if this nav element isn't conflicting with the one created by the header component? What is it's purpose here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav - it came with the template nextJs setup, could probably just remove it

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should remove the unnecessary elements, <nav> and <aside>, as we have those implemented with the <PageHeader> component itself.

<PageHeader
mainNavItems={navItems}
subNavItems={[]}
logo={<NasaLogo />}
linkProperties={linkProps}
/>
</nav>
</aside>
);
}
2 changes: 0 additions & 2 deletions app/lib/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ import {
MapBlock,
CompareImage,
PageHeader,
LogoContainer,
NavItem,
InternalNavLink,
NavItemType,
Expand All @@ -43,7 +42,6 @@ export {
PageHero,
PageMainContent,
PageHeader,
LogoContainer,
ExplorationAndAnalysis,
DatasetSelectorModal,

Expand Down