layouts and components, oh my!

2025-07-29 17:41:13 -04:00
parent d1ebd100b5
commit 3bdc768714
36 changed files with 919 additions and 129 deletions
@@ -0,0 +1,65 @@
+"use client";
+
+import React, { useState, ComponentType } from 'react';
+import classnames from 'classnames';
+
+import DynamicIcon from './DynamicIcon';
+import { NavItems } from '@/lib/dashboard';
+
+import { FaArrowCircleLeft, FaArrowCircleRight } from "react-icons/fa";
+import { TbCircleArrowLeft, TbCircleArrowRight } from "react-icons/tb";
+import { PiBreadFill } from "react-icons/pi";
+
+import Button from './Button';
+
+
+interface SideNavProps {
+    maxWidth: string;
+    bgColor: string;
+    navItems: NavItems[];
+}
+
+const SideNav: React.FC<SideNavProps> = (
+    {
+        maxWidth,
+        bgColor,
+        navItems
+    }
+) => {
+    
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+
+  return (
+    <div className={classnames(
+        "relative h-full flex flex-col text-deepcove text-center transition-all duration-500",
+        bgColor, maxWidth,
+        {
+            "w-16" : !isSidebarOpen,
+        }
+
+    )}>
+        <div className="h-25" />
+        <Button
+            onClick={() => setIsSidebarOpen(!isSidebarOpen)}
+            className="h-10 flex justify-end items-center pr-2"
+        >
+            {isSidebarOpen ? <FaArrowCircleLeft size={30} /> : <FaArrowCircleRight size={30} />}
+        </Button>
+        <div className="flex flex-col divide-y divide-bluetang"></div>
+            {navItems.map((navItem, index) => (
+                <a href={navItem.url} className={classnames(
+                    "w-full h-20 flex justify-center items-center hover:text-platinum",
+                    {"bg-bluetang text-platinum" : index == 0}
+                )}>
+                    {isSidebarOpen ? (
+                        <>{navItem.title}</>
+                    ) : (
+                        <DynamicIcon iconName={navItem.iconName} size={30} />
+                    )}
+                </a> 
+            ))}
+    </div>
+  );
+}
+
+export default SideNav;