Responsive fixes

uchicago-dsi · May 23, 2024 · c3cfdea · c3cfdea
1 parent c9e9bf9
commit c3cfdea
Show file tree

Hide file tree

Showing 7 changed files with 123 additions and 12 deletions.
diff --git a/components/Nav/Interactive.tsx 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<NavProps> = ({ navInfo }) => {
+  const links = navInfo.data.nav.links
+  const title = navInfo.data.nav.title
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
+
+  const toggleMobileMenu = () => {
+    setIsMobileMenuOpen(!isMobileMenuOpen)
+  }
+
+  return (
+    <nav className="flex w-full flex-row justify-between bg-white/85 p-4 text-neutral-950 shadow-md" id="top-nav">
+      <div className="prose m-0 p-0 font-display">
+        <a href="/" className="line-height-0 m-0 p-0 no-underline">
+          <h1 className="m-0 p-0">{navInfo.data.nav.title}</h1>
+        </a>
+      </div>
+      <ul className="hidden items-center justify-end md:flex">
+        {links.map((link, li) => {
+          if (link.sublinks?.length > 0) {
+            return (
+              <li key={li} className="mr-4">
+                <SubNavList title={link.title} subLinks={link.sublinks} />
+              </li>
+            )
+          } else {
+            return (
+              <li className="mr-4" key={li}>
+                <a href={link.path}>{link.title}</a>
+              </li>
+            )
+          }
+        })}
+      </ul>
+      <div className="md:hidden">
+        <button onClick={toggleMobileMenu} className="focus:outline-none">
+          {isMobileMenuOpen ? <HiX size={28} /> : <HiMenu size={28} />}
+        </button>
+      </div>
+      {isMobileMenuOpen && (
+        <div className="fixed inset-0 z-50 flex flex-col pl-12 justify-center bg-white/95 md:hidden">
+          <button onClick={toggleMobileMenu} className="absolute right-4 top-4 text-neutral-900 focus:outline-none">
+            <HiX size={28} />
+          </button>
+          <div className="space-y-4 text-left">
+            {links.map((link, idx) => (
+              <div key={idx}>
+                <a href={link.sublinks?.length ? '' : link.path} className="block py-2 text-2xl">
+                  {link.title}
+                </a>
+                {!!link.sublinks?.length &&  (
+                  <ul className="list-disc pl-6">
+                    {link.sublinks.map((sublink, subIdx) => (
+                      <li key={`${idx}-${subIdx}`}>
+                        <a href={sublink.path} className="text-2xl block py-2">{sublink.title}</a>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </nav>
+  )
+}
diff --git 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<NavProps> = ({ navInfo }) => {
+export const DesktopNavStatic: React.FC<NavProps> = ({ navInfo }) => {
   const links = navInfo.data.nav.links
   // horizontal sticky div
   // right aligned list of items
   // render subLinks as dropdown
   return (
-    <div className="sticky top-0 z-50 mt-0 bg-white/85 p-4 text-neutral-950 shadow-md" id="top-nav">
-      <div className="flex items-center justify-between">
-        <span className="font-display prose m-0 p-0">
+    <div className="bg-white/85 p-4 text-neutral-950 shadow-md " id="top-nav">
+        <div className="font-display prose m-0 p-0">
           <a href="/" className="m-0 p-0 line-height-0 no-underline">
             <h1 className="m-0 p-0">{navInfo.data.nav.title}</h1>
           </a>
-        </span>
-        <ul className="flex justify-end">
+        </div>
+        <ul className="justify-end hidden md:flex">
           {links.map((link, li) => {
             // @ts-ignore
             if (link.sublinks?.length > 0) {
@@ -37,6 +37,14 @@ export const NavRenderer: React.FC<NavProps> = ({ navInfo }) => {
           })}
         </ul>
       </div>
-    </div>
   )
 }
+
+
+export const NavRenderer: React.FC<NavProps> = ({ navInfo }) => {
+  if (typeof window === "undefined") {
+    return <DesktopNavStatic navInfo={navInfo} />
+  } else {
+    return <InteractiveNav navInfo={navInfo} />
+  }
+}
diff --git 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<LinkSpec & {subLinks: Array<LinkSpec>}>
+        links: Array<LinkSpec & {sublinks: Array<LinkSpec>}>
       }
     }
   }

diff --git a/components/Pages/Home/Renderer.tsx b/components/Pages/Home/Renderer.tsx
@@ -52,7 +52,7 @@ export const Renderer: React.FC<HomeProps> = () => {
         <hr />
         {/* 4 div flex layout equal widths */}
         {/* reports, trends, toolkit, about */}
-        <div className="my-4 flex flex-row justify-between gap-4">
+        <div className="my-4 flex flex-col md:flex-row justify-between gap-4">
           <div className="flex flex-col border-2 p-4">
             <h1>Reports</h1>
             <p>Find reports on food access, market concentration, and structural racism.</p>

diff --git a/components/PieChart/PieChart.tsx b/components/PieChart/PieChart.tsx
@@ -87,7 +87,7 @@ const PieChart: React.FC<PieChartProps<Record<string, any>>> = ({
   })
 
   return (
-    <div className="flex items-center justify-center content-center lg:flex-row w-full max-h-[40vh]" ref={parentRef}>
+    <div className="flex items-center justify-center content-center flex-col lg:flex-row w-full lg:max-h-[40vh]" ref={parentRef}>
       <svg width={width} height={height}>
         <Group top={height/2} left={width/2}>
           <Pie
@@ -134,7 +134,7 @@ const PieChart: React.FC<PieChartProps<Record<string, any>>> = ({
       </svg>
       <LegendOrdinal
         scale={colorScale}
-        className="max-w-[50%]"
+        className="lg:max-w-[50%] max-h-[100%] overflow-y-auto "
         labelFormat={(label) => {
           const sum = sums[label] ? ` (${percentFormatter.format(sums[label]!)})` : ``
           return `${toCase(label, "title")}${sum}`

diff --git 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