From 221cb6fba838ac287860c660a4c3f94a7fe47e77 Mon Sep 17 00:00:00 2001 From: Pinapelz Date: Sun, 3 Nov 2024 23:09:39 -0800 Subject: add sidebar navigation --- src/components/SubscriberTable/SubscriberTable.tsx | 3 - src/components/TitleBar/TitleBar.tsx | 245 +++++++++++++++++---- 2 files changed, 206 insertions(+), 42 deletions(-) (limited to 'src/components') diff --git a/src/components/SubscriberTable/SubscriberTable.tsx b/src/components/SubscriberTable/SubscriberTable.tsx index 43c8c16..766cd3d 100644 --- a/src/components/SubscriberTable/SubscriberTable.tsx +++ b/src/components/SubscriberTable/SubscriberTable.tsx @@ -30,9 +30,6 @@ const DataTable = ({ channel_data, timestamp }: SubscriberDataTableProp) => {

Subscriber Count

-

- Click on a row to view more details! -

Updated Hourly. Retrieved at: {timestamp}

diff --git a/src/components/TitleBar/TitleBar.tsx b/src/components/TitleBar/TitleBar.tsx index 127534e..c4a65c4 100644 --- a/src/components/TitleBar/TitleBar.tsx +++ b/src/components/TitleBar/TitleBar.tsx @@ -1,51 +1,218 @@ +"use client"; import type React from "react"; import "../TitleBar/TitleBarStyle.css"; -import { faHouse } from "@fortawesome/free-solid-svg-icons"; +import { + faHouse, + faBars, + faTimes, + faChevronDown, + faChevronUp, + faSpinner, +} from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { useState, useEffect } from "react"; +import Link from "next/link"; interface TitleBarProps { - title: string; - redirectUrl?: string; - showHomeButton?: boolean; - backgroundColor?: string; + title: string; + redirectUrl?: string; + showHomeButton?: boolean; + backgroundColor?: string; } const TitleBar: React.FC = ({ - title, - redirectUrl, - showHomeButton, - backgroundColor, + title, + redirectUrl, + showHomeButton, + backgroundColor, }) => { - return ( - <> -
-
- - - {title} - - - {showHomeButton && ( - - - - )} -
-
- - ); + const hideFromSidebar = ["Fuura Yuri"]; // List of names to hide (e.g., due to graduation) + const [isSidebarOpen, setIsSidebarOpen] = useState(false); + const [isMounted, setIsMounted] = useState(false); + const [groupingData, setPhaseData] = useState<{ + [key: string]: string[]; + } | null>(null); + const [collapsedSections, setCollapsedSections] = useState<{ + [key: string]: boolean; + }>({}); + const [loadingMember, setLoadingMember] = useState(null); + + useEffect(() => { + setIsMounted(true); + const fetchPhaseData = async () => { + const apiUrl = process.env.NEXT_PUBLIC_API_URL_TESTING; + try { + const response = await fetch(apiUrl + "/api/groups"); + const data = await response.json(); + setPhaseData(data); + const initialCollapsedState = Object.keys(data).reduce( + (acc, phase) => { + acc[phase] = true; + return acc; + }, + {} as { [key: string]: boolean }, + ); + setCollapsedSections(initialCollapsedState); + } catch (error) { + console.error("Error fetching phase data:", error); + } + }; + + fetchPhaseData(); + }, []); + + const toggleSidebar = () => { + setIsSidebarOpen(!isSidebarOpen); + }; + + const toggleSection = (phase: string) => { + setCollapsedSections((prevState) => ({ + ...prevState, + [phase]: !prevState[phase], + })); + }; + + const handleMemberClick = (member: string) => { + setLoadingMember(member); + }; + + if (!isMounted) { + return null; + } + + return ( + <> +
+
+ + + + {title} + + + {showHomeButton && ( + + + + )} +
+
+ + {/* Sidebar */} +
+
+ PhaseTracker +
+
    + +
  • + Home +
    • + + +
  • + About +
    • + +
+ + +
+ + {/* Content overlay when sidebar is open */} + {isSidebarOpen && ( +
+ )} + + ); }; export default TitleBar; -- cgit v1.2.3