5 files changed, 363 insertions, 0 deletions

diff --git a/frontend/src/components/Sidebar/Content.tsx b/frontend/src/components/Sidebar/Content.tsx
new file mode 100644
index 0000000..4051b08
--- /dev/null
+++ b/frontend/src/components/Sidebar/Content.tsx
@@ -0,0 +1,133 @@
+import React, { useRef } from "react";
+import { Link } from "react-router-dom";
+import { UserProfile } from "@customTypes/Profile";
+import { Search } from "@customTypes/Search";
+import { API } from "@api/Api";
+
+import styles from "./Sidebar.module.css";
+
+import {
+    FlagIcon,
+    HomeIcon,
+    PortalIcon,
+    SearchIcon,
+} from "../../images/Images";
+
+interface ContentProps {
+    profile?: UserProfile;
+    isSidebarOpen: boolean;
+    sidebarButtonRefs: React.RefObject<(HTMLButtonElement | null)[]>;
+    getButtonClasses: (buttonIndex: number) => string;
+    handle_sidebar_click: (clicked_sidebar_idx: number) => void;
+};
+
+const Content: React.FC<ContentProps> = ({ profile, isSidebarOpen, sidebarButtonRefs, getButtonClasses, handle_sidebar_click }) => {
+    const [searchData, setSearchData] = React.useState<Search | undefined>(
+        undefined
+    );
+
+    const searchbarRef = useRef<HTMLInputElement>(null);
+
+    const _handle_search_change = async (q: string) => {
+        const searchResponse = await API.get_search(q);
+        setSearchData(searchResponse);
+    };
+
+    const iconClasses = "";
+
+    return (
+        <div className="h-full">
+
+            <div className="px-2">
+                <div className={`${styles.button}`}>
+                    <img src={SearchIcon} alt="Search" className={iconClasses} />
+                    <span className="text-white font-[--font-barlow-semicondensed-regular] truncate">Search</span>
+                </div>
+
+                <div className="min-w-0">
+                    <input
+                        ref={searchbarRef}
+                        type="text"
+                        id="searchbar"
+                        placeholder="Search for map or a player..."
+                        onChange={e => _handle_search_change(e.target.value)}
+                        className="w-full p-2 bg-input text-foreground border border-border rounded-lg text-sm min-w-0"
+                    />
+
+                    {searchData && (
+                        <div className="mt-2 max-h-40 overflow-y-auto min-w-0">
+                            {searchData?.maps.map((q, index) => (
+                                <Link to={`/maps/${q.id}`} className="block p-2 mb-1 bg-surface1 rounded hover:bg-surface2 transition-colors min-w-0" key={index}>
+                                    <span className="block text-xs text-subtext1 truncate">{q.game}</span>
+                                    <span className="block text-xs text-subtext1 truncate">{q.chapter}</span>
+                                    <span className="block text-sm text-foreground truncate">{q.map}</span>
+                                </Link>
+                            ))}
+                            {searchData?.players.map((q, index) => (
+                                <Link
+                                    to={
+                                        profile && q.steam_id === profile.steam_id
+                                            ? `/profile`
+                                            : `/users/${q.steam_id}`
+                                    }
+                                    className="flex items-center p-2 mb-1 bg-surface1 rounded hover:bg-surface2 transition-colors min-w-0"
+                                    key={index}
+                                >
+                                    <img src={q.avatar_link} alt="pfp" className="w-6 h-6 rounded-full mr-2 flex-shrink-0" />
+                                    <span className="text-sm text-foreground truncate">
+                                        {q.user_name}
+                                    </span>
+                                </Link>
+                            ))}
+                        </div>
+                    )}
+                </div>
+            </div>
+
+            <div className="flex-1 min-w-0">
+                <nav className="px-2 flex flex-col gap-2">
+                    {[
+                        {
+                            to: "/",
+                            refIndex: 1,
+                            icon: HomeIcon,
+                            alt: "Home",
+                            label: "Home Page",
+                        },
+                        {
+                            to: "/games",
+                            refIndex: 2,
+                            icon: PortalIcon,
+                            alt: "Games",
+                            label: "Games",
+                        },
+                        {
+                            to: "/rankings",
+                            refIndex: 3,
+                            icon: FlagIcon,
+                            alt: "Rankings",
+                            label: "Rankings",
+                        },
+                    ].map(({ to, refIndex, icon, alt, label }) => (
+                        <Link to={to} tabIndex={-1} key={refIndex}>
+                            <button
+                                ref={el => {
+                                    sidebarButtonRefs.current[refIndex] = el
+                                }}
+                                className={`${styles.button}`}
+                                onClick={() => handle_sidebar_click(refIndex)}
+                            >
+                                <img src={icon} alt={alt} className={iconClasses} />
+                                <span className="">
+                                    {label}
+                                </span>
+                            </button>
+                        </Link>
+                    ))}
+                </nav>
+            </div>
+        </div>
+    );
+}
+
+export default Content;
diff --git a/frontend/src/components/Sidebar/Footer.tsx b/frontend/src/components/Sidebar/Footer.tsx
new file mode 100644
index 0000000..070301a
--- /dev/null
+++ b/frontend/src/components/Sidebar/Footer.tsx
@@ -0,0 +1,80 @@
+import React, { useRef } from "react";
+import { Link } from "react-router-dom";
+
+import styles from "./Sidebar.module.css";
+
+import { UserProfile } from "@customTypes/Profile";
+import Login from "@components/Login";
+
+import {
+    UploadIcon,
+    BookIcon,
+    HelpIcon,
+} from "../../images/Images";
+
+interface FooterProps {
+    profile?: UserProfile;
+    onUploadRun: () => void;
+    setProfile: React.Dispatch<React.SetStateAction<UserProfile | undefined>>;
+    setToken: React.Dispatch<React.SetStateAction<string | undefined>>;
+    sidebarButtonRefs: React.RefObject<(HTMLButtonElement | null)[]>;
+    getButtonClasses: (buttonIndex: number) => string;
+    handle_sidebar_click: (clicked_sidebar_idx: number) => void;
+};
+
+const Footer: React.FC<FooterProps> = ({ profile, onUploadRun, setToken, setProfile, sidebarButtonRefs, getButtonClasses, handle_sidebar_click }) => {
+    const uploadRunRef = useRef<HTMLButtonElement>(null);
+
+    return (
+        <div className="">
+            {profile && profile.profile && (
+                <button
+                    ref={uploadRunRef}
+                    id="upload-run"
+                    className={getButtonClasses(-1)}
+                    onClick={() => onUploadRun()}
+                >
+                    <img src={UploadIcon} alt="Upload" className={``} />
+                    {true && <span className="font-[--font-barlow-semicondensed-regular] truncate">Upload Record</span>}
+                </button>
+            )}
+
+            <div className={true ? 'min-w-0' : 'flex justify-center'}>
+                <Login
+                    setToken={setToken}
+                    profile={profile}
+                    setProfile={setProfile}
+                    isOpen={true}
+                />
+            </div>
+
+            <Link to="/rules" tabIndex={-1}>
+                <button
+                    ref={el => {
+                        sidebarButtonRefs.current[5] = el
+                    }}
+                    className={`${styles.button}`}
+                    onClick={() => handle_sidebar_click(5)}
+                >
+                    <img src={BookIcon} alt="Rules" />
+                    {true && <span className="font-[--font-barlow-semicondensed-regular] truncate">Leaderboard Rules</span>}
+                </button>
+            </Link>
+
+            <Link to="/about" tabIndex={-1}>
+                <button
+                    ref={el => {
+                        sidebarButtonRefs.current[6] = el
+                    }}
+                    className={`${styles.button}`}
+                    onClick={() => handle_sidebar_click(6)}
+                >
+                    <img src={HelpIcon} alt="About" />
+                    {true && <span className="font-[--font-barlow-semicondensed-regular] truncate">About LPHUB</span>}
+                </button>
+            </Link>
+        </div>
+    );
+}
+
+export default Footer;
diff --git a/frontend/src/components/Sidebar/Header.tsx b/frontend/src/components/Sidebar/Header.tsx
new file mode 100644
index 0000000..e990060
--- /dev/null
+++ b/frontend/src/components/Sidebar/Header.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+import {
+    LogoIcon,
+} from "../../images/Images";
+
+const Header: React.FC = () => {
+    return (
+        <div className="flex justify-center px-4 py-3 bg-gradient-to-t from-block to-bright">
+            <Link to="/" tabIndex={-1} className="flex gap-4">
+                <img src={LogoIcon} alt="Logo" className="h-18 translate-y-0.5" />
+                <div className="text-[#fff] flex flex-col justify-center not-md:hidden">
+                    <div className="font-barlow-condensed-bold text-5xl truncate leading-10">
+                        PORTAL 2
+                    </div>
+                    <div className="font-barlow-condensed-regular text-3xl leading-7">
+                        Least Portals Hub
+                    </div>
+                </div>
+            </Link>
+        </div>
+    )
+}
+
+export default Header;
diff --git a/frontend/src/components/Sidebar/Sidebar.module.css b/frontend/src/components/Sidebar/Sidebar.module.css
new file mode 100644
index 0000000..8079676
--- /dev/null
+++ b/frontend/src/components/Sidebar/Sidebar.module.css
@@ -0,0 +1,23 @@
+.button {
+    display: flex;
+    width: 100%;
+    cursor: pointer;
+    align-items: center;
+    border-radius: 2000px;
+    transition: all 0.2s ease;
+    padding: 4px 0px;
+}
+
+.button:hover {
+    background-color: var(--color-panel);
+}
+
+.button>img {
+    padding: 0px 8px;
+    height: 28px;
+}
+
+button>span {
+    font-size: 22px;
+    font-family: var(--font-barlow-semicondensed-regular);
+}
\ No newline at end of file
diff --git a/frontend/src/components/Sidebar/Sidebar.tsx b/frontend/src/components/Sidebar/Sidebar.tsx
new file mode 100644
index 0000000..2dafa2b
--- /dev/null
+++ b/frontend/src/components/Sidebar/Sidebar.tsx
@@ -0,0 +1,101 @@
+import React, { useCallback, useRef } from "react";
+import { Link, useLocation } from "react-router-dom";
+import { UserProfile } from "@customTypes/Profile";
+
+import Header from "./Header";
+import Footer from "./Footer";
+import Content from "./Content";
+
+interface SidebarProps {
+  setToken: React.Dispatch<React.SetStateAction<string | undefined>>;
+  profile?: UserProfile;
+  setProfile: React.Dispatch<React.SetStateAction<UserProfile | undefined>>;
+  onUploadRun: () => void;
+}
+
+const Sidebar: React.FC<SidebarProps> = ({
+  setToken,
+  profile,
+  setProfile,
+  onUploadRun,
+}) => {
+  // const [isSidebarLocked, setIsSidebarLocked] = React.useState<boolean>(false);
+  const [isSidebarOpen, setSidebarOpen] = React.useState<boolean>(false);
+  const [selectedButtonIndex, setSelectedButtonIndex] = React.useState<number>(1);
+
+  const location = useLocation();
+  const path = location.pathname;
+
+  const sidebarRef = useRef<HTMLDivElement>(null);
+  const sidebarButtonRefs = useRef<(HTMLButtonElement | null)[]>([]);
+
+  // const _handle_sidebar_toggle = useCallback(() => {
+  //   if (!sidebarRef.current) return;
+
+  //   if (isSidebarOpen) {
+  //     setSidebarOpen(false);
+  //   } else {
+  //     setSidebarOpen(true);
+  //     searchbarRef.current?.focus();
+  //   }
+  // }, [isSidebarOpen]);
+
+  const handle_sidebar_click = useCallback(
+    (clicked_sidebar_idx: number) => {
+      setSelectedButtonIndex(clicked_sidebar_idx);
+      if (isSidebarOpen) {
+        setSidebarOpen(false);
+      }
+    },
+    [isSidebarOpen]
+  );
+
+  React.useEffect(() => {
+    if (path === "/") {
+      setSelectedButtonIndex(1);
+    } else if (path.includes("games")) {
+      setSelectedButtonIndex(2);
+    } else if (path.includes("rankings")) {
+      setSelectedButtonIndex(3);
+    } else if (path.includes("profile")) {
+      setSelectedButtonIndex(4);
+    } else if (path.includes("rules")) {
+      setSelectedButtonIndex(5);
+    } else if (path.includes("about")) {
+      setSelectedButtonIndex(6);
+    }
+  }, [path]);
+
+  const getButtonClasses = (buttonIndex: number) => {
+    const baseClasses = "flex items-center gap-3 w-full text-left bg-inherit cursor-pointer border-none rounded-[2000px] py-3 px-3 transition-all duration-300 hover:bg-panel";
+    const selectedClasses = selectedButtonIndex === buttonIndex ? "bg-primary text-background" : "bg-transparent text-foreground";
+
+    return `${baseClasses} ${selectedClasses}`;
+  };
+
+  return (
+    <div className={`w-80 not-md:w-full text-white bg-block flex flex-col not-md:flex-row
+      }`}>
+
+      {/* Header */}
+      <Header />
+
+      <div className="flex h-full w-full">
+        <div className="flex flex-col">
+          {/* Sidebar Content */}
+          <Content profile={profile} isSidebarOpen={isSidebarOpen} sidebarButtonRefs={sidebarButtonRefs} getButtonClasses={getButtonClasses} handle_sidebar_click={handle_sidebar_click} />
+
+          {/* Bottom Section */}
+          <Footer profile={profile} onUploadRun={onUploadRun} setToken={setToken} setProfile={setProfile} sidebarButtonRefs={sidebarButtonRefs} getButtonClasses={getButtonClasses} handle_sidebar_click={handle_sidebar_click} />
+        </div>
+
+        <div className="w-20">
+
+        </div>
+
+      </div>
+    </div>
+  );
+};
+
+export default Sidebar;