diff --git a/app/components/nasa-logo-color.js b/app/components/nasa-logo-color.js
new file mode 100644
index 0000000..b85ff9b
--- /dev/null
+++ b/app/components/nasa-logo-color.js
@@ -0,0 +1,217 @@
+import React from 'react';
+
+export default function NasaLogoColor() {
+ return (
+
+ );
+}
diff --git a/app/components/nav.tsx b/app/components/nav.tsx
index 9c2fc3c..b6202c1 100644
--- a/app/components/nav.tsx
+++ b/app/components/nav.tsx
@@ -1,63 +1,69 @@
import React from 'react';
import Link from 'next/link';
-import { PageHeader, LogoContainer } from '@lib';
-import NasaLogo from '../../public/images/nasa-logo';
+import { PageHeader } from '@lib';
import { NavItem } from '@lib';
+import NasaLogoColor from 'app/components/nasa-logo-color.js';
+
const navItems: NavItem[] = [
- // @TODO: This should use the NavLinkType from veda-ui...
- {
- title: 'Home',
- to: '/',
- type: 'internalLink',
- },
{
+ id: 'data-catalog',
title: 'Data Catalog',
to: '/data-catalog',
- type: 'internalLink',
+ type: 'internalLink'
},
{
+ id: 'exploration',
title: 'Exploration',
to: '/exploration',
- type: 'internalLink',
+ type: 'internalLink'
},
{
+ id: 'stories',
title: 'Stories',
to: '/stories',
- type: 'internalLink',
- },
+ type: 'internalLink'
+ }
];
+const subNavItems: NavItem[] = [
+ {
+ id: 'about',
+ title: 'About',
+ to: '/about',
+ type: 'internalLink'
+ },
+ {
+ id: 'contact-us',
+ title: 'Contact us',
+ actionId: 'open-google-form',
+ type: 'action'
+ }
+]
+
export function Navbar() {
const linkProps = {
LinkElement: Link,
pathAttributeKeyName: 'href',
};
- const Logo: JSX.Element = (
-
+ {/*
+ USWDS targets only tags for styling links. However when the text is a
+ instead of a link, it does not inherit the color styling (it ends up being white).
+ To fix this, we must add the color inline like this.
+ TODO: Ideally we can address this on the veda-ui side so that the color applies to all elements within the logo.
+ */}
+
+ Earthdata VEDA Dashboard
+
+ }
linkProperties={linkProps}
- logo={}
- title='Earthdata'
- subTitle='veda dashboard'
- version='1.0.0'
/>
);
-
- return (
-
- );
}
diff --git a/app/lib/index.ts b/app/lib/index.ts
index e63659e..2cdf918 100644
--- a/app/lib/index.ts
+++ b/app/lib/index.ts
@@ -16,7 +16,6 @@ import {
MapBlock,
CompareImage,
PageHeader,
- LogoContainer,
NavItem,
InternalNavLink,
ExplorationAndAnalysis,
@@ -44,7 +43,6 @@ export {
PageHero,
PageMainContent,
PageHeader,
- LogoContainer,
ExplorationAndAnalysis,
DatasetSelectorModal,
StoriesHubContent,
diff --git a/package.json b/package.json
index fd854e5..3c9e1c9 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
"fix": "yarn run format && yarn run lint:fix"
},
"dependencies": {
- "@developmentseed/veda-ui": "v5.11.0",
+ "@developmentseed/veda-ui": "v5.11.3-ph-a",
"@devseed-ui/theme-provider": "^4.1.0",
"@tailwindcss/postcss": "4.0.0-alpha.13",
"@types/node": "20.11.17",