nav updates

uchicago-dsi · Mar 29, 2024 · 4ab65e0 · 4ab65e0
1 parent 7125e58
commit 4ab65e0
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 18 deletions.
diff --git a/components/Nav/Renderer.tsx b/components/Nav/Renderer.tsx
@@ -1,3 +1,4 @@
+import { SubNavList } from "./SubNavList"
 import { NavProps } from "./types"
 
 export const NavRenderer: React.FC<NavProps> = ({ navInfo }) => {
@@ -10,24 +11,26 @@ export const NavRenderer: React.FC<NavProps> = ({ navInfo }) => {
       <div className="flex justify-between">
         <h1>{navInfo.data.nav.title}</h1>
         <ul className="flex justify-end">
-          {links.map((link, li) => (
-            <li className="mr-4" key={li}>
-              <a href={link.path}>{link.title}</a>
-              {link.subLinks && (
-                <div className="absolute bg-gray-800 p-4 text-white">
-                  <ul>
-                    {link.subLinks.map((subLink, sli) => {
-                      return (
-                        <li key={`${li}-${sli}`}>
-                          <a href={subLink.path}>{subLink.title}</a>
-                        </li>
-                      )
-                    })}
-                  </ul>
-                </div>
-              )}
-            </li>
-          ))}
+          {links.map((link, li) => {
+            // @ts-ignore
+            if (link.sublinks?.length > 0) {
+              return (
+                <li key={li} className="mr-4">
+                  <SubNavList
+                    title={link.title}
+                    // @ts-ignore
+                    subLinks={link.sublinks}
+                  />
+                </li>
+              )
+            } else {
+              return (
+                <li className="mr-4" key={li}>
+                  <a href={link.path}>{link.title}</a>
+                </li>
+              )
+            }
+          })}
         </ul>
       </div>
     </div>

diff --git a/components/Nav/SubNavList.tsx b/components/Nav/SubNavList.tsx
@@ -0,0 +1,40 @@
+"use client"
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu"
+import { ChevronDownIcon } from "@radix-ui/react-icons"
+import { LinkSpec } from "./types"
+
+export const SubNavList: React.FC<{ title: string, subLinks: Array<LinkSpec> }> = ({ title, subLinks }) => {
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <button
+          className="outline-none flex items-center text-white cursor-pointer group"
+          aria-label="Customise options"
+        >
+          {title} 
+          {/* chevron down */}
+          <ChevronDownIcon className="w-4 h-4" />
+        </button>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content
+          className="data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade min-w-[220px] rounded-md bg-white p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform]"
+          sideOffset={5}
+        >
+          {subLinks.map((link, li) => {
+            return (
+              <DropdownMenu.Item
+                key={li}
+                className="group relative flex h-[25px] select-none items-center rounded-[3px] px-[5px] text-[13px] leading-none outline-none"
+              >
+                <a href={link.path} className="flex items-center">
+                  {link.title}
+                </a>
+              </DropdownMenu.Item>
+            )
+          })}
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  )
+}
diff --git a/content/nav/main-nav.mdx b/content/nav/main-nav.mdx
@@ -7,6 +7,16 @@ links:
     path: /
   - title: Map
     path: /map
+  - title: Reports
+    sublinks:
+      - title: National
+        path: /reports/national
+      - title: State
+        path: /reports/state
+      - title: County
+        path: /reports/county
+      - title: Neighborhood
+        path: /reports/tract
   - title: Case Studies
     path: /case-studies
   - title: Resources

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -2,6 +2,7 @@
 const { pick, omit } = require("lodash")
 const colors = require("tailwindcss/colors")
 const defaultTheme = require("tailwindcss/defaultTheme")
+const { blackA, mauve, violet } = require('@radix-ui/colors');
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -17,6 +18,9 @@ module.exports = {
   theme: {
     extend: {
       colors: {
+        ...blackA,
+        ...mauve,
+        ...violet,
         primary: {
           50: "#eff6ff",
           100: "#dbeafe",
@@ -66,6 +70,30 @@ module.exports = {
           "Noto Color Emoji",
         ],
       },
+      keyframes: {
+        slideDownAndFade: {
+          from: { opacity: '0', transform: 'translateY(-2px)' },
+          to: { opacity: '1', transform: 'translateY(0)' },
+        },
+        slideLeftAndFade: {
+          from: { opacity: '0', transform: 'translateX(2px)' },
+          to: { opacity: '1', transform: 'translateX(0)' },
+        },
+        slideUpAndFade: {
+          from: { opacity: '0', transform: 'translateY(2px)' },
+          to: { opacity: '1', transform: 'translateY(0)' },
+        },
+        slideRightAndFade: {
+          from: { opacity: '0', transform: 'translateX(-2px)' },
+          to: { opacity: '1', transform: 'translateX(0)' },
+        },
+      },
+      animation: {
+        slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+        slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+        slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+        slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+      },
       borderWidth: {
         DEFAULT: "1px",
         0: "0",