feat: blur past venues in navbar and dropdowns (#1044)

Author: Recxsmacx

components/Dropdown/dropdown.tsx

@@ -1,5 +1,7 @@
 import React, { useState, useRef, useEffect, SetStateAction, JSX } from 'react';
 import Arrows from '../illustration/arrows';
+import { ConferenceStatus } from '../../types/types';
+import { getEventStatus } from '../../utils/status';
 
 interface IDropdown<T> {
   selectedItem: T | null;
@@ -75,11 +77,16 @@ function Dropdown<T>({
             {items &&
               items.map((item, i) => {
                 const displayText = getDisplayValue(item);
+                const isEnded =
+                  item && typeof item === 'object' && 'date' in item && typeof (item as any).date === 'string'
+                    ? getEventStatus((item as any).date) === ConferenceStatus.ENDED
+                    : false;
+
                 return (
                   <div
                     key={i}
                     onClick={() => handleItemSelect(item)}
-                    className={`block p-4 text-md text-white cursor-pointer hover:bg-black/10`}
+                    className={`block p-4 text-md text-white cursor-pointer hover:bg-black/10 ${isEnded ? 'opacity-50' : ''}`}
                     role="menuitem"
                     tabIndex={-1}
                     id={`menu-item-${i}`}

components/Navbar/navDrop.tsx

@@ -7,7 +7,7 @@ import React, {
 } from 'react';
 import Link from 'next/link';
 import Dropdown from '../illustration/dropdown';
-import { LinkItem } from '../../types/types';
+import { LinkItem, ConferenceStatus } from '../../types/types';
 import { isExternalUrl, resolveCfpUrl } from '../../utils/pretalx';
 import { links } from '../../config/navigation';
 import { usePathname } from 'next/navigation';
@@ -83,7 +83,7 @@ const NavDrop = forwardRef<HTMLDivElement, INavDropProp>(
                                   pathname === sub.ref
                                     ? 'font-semibold bg-white/10 text-[#C6BED9]'
                                     : ''
-                                }`}
+                                } ${sub.status === ConferenceStatus.ENDED ? 'opacity-50' : ''}`}
                               >
                                 {sub.title}
                               </div>

components/Navbar/navbar.tsx

@@ -8,7 +8,7 @@ import Hamburger from '../illustration/hamburger';
 import { useMediaQuery } from 'react-responsive';
 import Cancel from '../illustration/cancel';
 import Image from 'next/image';
-import { LinkItem } from '../../types/types';
+import { LinkItem, ConferenceStatus } from '../../types/types';
 import { isExternalUrl, resolveCfpUrl } from '../../utils/pretalx';
 import { links } from '../../config/navigation';
 import { usePathname } from 'next/navigation';
@@ -248,7 +248,7 @@ function Navbar(): JSX.Element {
                                 isActive(subL)
                                   ? 'bg-white bg-opacity-10 font-semibold text-[#C6BED9]'
                                   : ''
-                              }`}
+                              } ${subL.status === ConferenceStatus.ENDED ? 'opacity-50' : ''}`}
                               data-test={`nav-sub-${subL.title}`}
                               onKeyDown={(e) => {
                                 const currentIndex = index;

config/navigation.ts

@@ -1,6 +1,7 @@
 import linksJson from './links.json';
 import { cities } from './conference-data';
 import { LinkItem } from '../types/types';
+import { getEventStatus } from '../utils/status';
 
 export const links: LinkItem[] = (linksJson as LinkItem[]).map((link) => {
   if (link.title !== 'Venue') {
@@ -13,6 +14,7 @@ export const links: LinkItem[] = (linksJson as LinkItem[]).map((link) => {
       title:
         city.name === 'Online' ? city.name : `${city.name}, ${city.country}`,
       ref: `/venue/${encodeURIComponent(city.name)}`,
+      status: getEventStatus(city.date),
     })),
   };
 });

types/types.ts

@@ -9,6 +9,7 @@ export interface LinkItem {
   title: string;
   ref: string;
   subMenu?: LinkItem[];
+  status?: ConferenceStatus;
 }
 
 export type CfpConfig =