diff --git a/components/Nav/Interactive.tsx b/components/Nav/Interactive.tsx new file mode 100644 index 0000000..de9267f --- /dev/null +++ b/components/Nav/Interactive.tsx @@ -0,0 +1,73 @@ +"use client" +import React, { useState } from "react" +import * as DropdownMenu from "@radix-ui/react-dropdown-menu" +import { LinkSpec, NavProps } from "./types" +import { HiMenu, HiX } from "react-icons/hi" +import { SubNavList } from "./SubNavList" + +export const InteractiveNav: React.FC = ({ navInfo }) => { + const links = navInfo.data.nav.links + const title = navInfo.data.nav.title + const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false) + + const toggleMobileMenu = () => { + setIsMobileMenuOpen(!isMobileMenuOpen) + } + + return ( + + ) +} diff --git a/components/Nav/Renderer.tsx b/components/Nav/Renderer.tsx index 1ac58e5..34785e5 100644 --- a/components/Nav/Renderer.tsx +++ b/components/Nav/Renderer.tsx @@ -1,20 +1,20 @@ +import { InteractiveNav } from "./Interactive" import { SubNavList } from "./SubNavList" import { NavProps } from "./types" -export const NavRenderer: React.FC = ({ navInfo }) => { +export const DesktopNavStatic: React.FC = ({ navInfo }) => { const links = navInfo.data.nav.links // horizontal sticky div // right aligned list of items // render subLinks as dropdown return ( -
-
- +
+ +
    {links.map((link, li) => { // @ts-ignore if (link.sublinks?.length > 0) { @@ -37,6 +37,14 @@ export const NavRenderer: React.FC = ({ navInfo }) => { })}
-
) } + + +export const NavRenderer: React.FC = ({ navInfo }) => { + if (typeof window === "undefined") { + return + } else { + return + } +} \ No newline at end of file diff --git a/components/Nav/types.ts b/components/Nav/types.ts index 854031a..326e2ab 100644 --- a/components/Nav/types.ts +++ b/components/Nav/types.ts @@ -1,5 +1,6 @@ export type LinkSpec = { title: string; - path: string} + path: string +} export type NavProps = { navInfo: @@ -9,7 +10,7 @@ export type NavProps = { data: { nav:{ title: string; - links: Array}> + links: Array}> } } } diff --git a/components/Pages/Home/Renderer.tsx b/components/Pages/Home/Renderer.tsx index 9880e55..78252cc 100644 --- a/components/Pages/Home/Renderer.tsx +++ b/components/Pages/Home/Renderer.tsx @@ -52,7 +52,7 @@ export const Renderer: React.FC = () => {
{/* 4 div flex layout equal widths */} {/* reports, trends, toolkit, about */} -
+

Reports

Find reports on food access, market concentration, and structural racism.

diff --git a/components/PieChart/PieChart.tsx b/components/PieChart/PieChart.tsx index 9da0fef..0e994ab 100644 --- a/components/PieChart/PieChart.tsx +++ b/components/PieChart/PieChart.tsx @@ -87,7 +87,7 @@ const PieChart: React.FC>> = ({ }) return ( -
+
>> = ({ { const sum = sums[label] ? ` (${percentFormatter.format(sums[label]!)})` : `` return `${toCase(label, "title")}${sum}` diff --git a/package.json b/package.json index 70fc83a..79551cc 100644 --- a/package.json +++ b/package.json @@ -75,6 +75,7 @@ "@types/node-gzip": "^1.1.3", "@types/pako": "^2.0.3", "@types/papaparse": "^5.3.14", + "@types/react-icons": "^3.0.0", "@types/tinycolor2": "^1.4.6", "@vercel/otel": "^0.3.0", "@visx/axis": "^3.10.1", @@ -103,6 +104,7 @@ "duckdb": "^0.10.2", "duckdb-wasm-kit": "^0.1.31", "gray-matter": "^4.0.3", + "hi": "link:@types/react-icons/hi", "http-server": "^14.1.1", "lodash": "^4.17.21", "mapbox-gl": "^3.1.2", @@ -120,6 +122,7 @@ "pmtiles": "^3.0.3", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-icons": "^5.2.1", "react-map-gl": "^7.1.7", "react-native-fetch-blob": "0.7.5", "react-native-fs": "^2.20.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2ecf58d..432ce9e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -161,6 +161,9 @@ dependencies: '@types/papaparse': specifier: ^5.3.14 version: 5.3.14 + '@types/react-icons': + specifier: ^3.0.0 + version: 3.0.0(react@18.2.0) '@types/tinycolor2': specifier: ^1.4.6 version: 1.4.6 @@ -245,6 +248,9 @@ dependencies: gray-matter: specifier: ^4.0.3 version: 4.0.3 + hi: + specifier: link:@types/react-icons/hi + version: link:@types/react-icons/hi http-server: specifier: ^14.1.1 version: 14.1.1 @@ -296,6 +302,9 @@ dependencies: react-dom: specifier: ^18.2.0 version: 18.2.0(react@18.2.0) + react-icons: + specifier: ^5.2.1 + version: 5.2.1(react@18.2.0) react-map-gl: specifier: ^7.1.7 version: 7.1.7(mapbox-gl@3.1.2)(react-dom@18.2.0)(react@18.2.0) @@ -10196,6 +10205,15 @@ packages: dependencies: '@types/react': 18.2.53 + /@types/react-icons@3.0.0(react@18.2.0): + resolution: {integrity: sha512-Vefs6LkLqF61vfV7AiAqls+vpR94q67gunhMueDznG+msAkrYgRxl7gYjNem/kZ+as2l2mNChmF1jRZzzQQtMg==} + deprecated: This is a stub types definition. react-icons provides its own type definitions, so you do not need this installed. + dependencies: + react-icons: 5.2.1(react@18.2.0) + transitivePeerDependencies: + - react + dev: false + /@types/react-redux@7.1.33: resolution: {integrity: sha512-NF8m5AjWCkert+fosDsN3hAlHzpjSiXlVy9EgQEmLoBhaNXbmyeGs/aj5dQzKuF+/q+S7JQagorGDW8pJ28Hmg==} dependencies: @@ -26412,6 +26430,14 @@ packages: react: 18.2.0 dev: false + /react-icons@5.2.1(react@18.2.0): + resolution: {integrity: sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==} + peerDependencies: + react: '*' + dependencies: + react: 18.2.0 + dev: false + /react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}