Homepage first runthrough complete

2025-07-02 16:39:16 -04:00
parent 129af6b414
commit 633b2a997a
12 changed files with 337 additions and 248 deletions
@@ -0,0 +1,73 @@
+import React, { useState } from 'react'
+import Link from 'next/link';
+import classnames from 'classnames';
+
+import Button from './Button';
+import { MenuItem } from './Navbar'
+
+interface Props {
+    item: MenuItem;
+}
+
+export default function Dropdown(props: Props) {
+    const { item } = props;
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+    const menuItems = item?.children ? item.children : [];
+    const lastIndex = menuItems.length - 1;
+
+    const toggle = () => {
+        setIsOpen(old => !old);
+    }
+
+    const transClass = isOpen
+        ?
+        "flex"
+        :
+        "hidden";
+    
+    function isLastItem (currentItem: MenuItem) {
+        return lastIndex == menuItems.indexOf(currentItem)
+    }
+
+    return (
+        <>
+            <div className="relative">
+                <Button
+                    className="hover:text-britton-light font-semibold text-lg uppercase"
+                    onClick={toggle}
+                >{item.title}</Button>
+                <div className={`absolute top-8 z-30 w-[150px] flex flex-col bg-stone-300 text-sm rounded-md ${transClass}`}>
+                    {
+                        menuItems.map(item =>
+                            <>
+                                <Link
+                                    key={item.route}
+                                    className="hover:bg-britton-dark hover:text-britton-neutral text-center px-2 py-1"
+                                    href={item?.route || ''}
+                                    onClick={toggle}
+                                >
+                                    {item.title}
+                                </Link>
+                                <div className={classnames(
+                                        "h-px bg-britton-accent",
+                                        {"hidden" : isLastItem(item)}
+                                    )}
+                                />
+                            </>
+                        )
+                    }
+                </div>
+            </div>
+            {
+                isOpen
+                    ?
+                    <div
+                        className="fixed top-0 right-0 bottom-0 left-0 z-20 bg-britton-dark/40"
+                        onClick={toggle}
+                    ></div>
+                    :
+                    <></>
+            }
+        </>
+    )
+}