Restructured sidebar and implemented links var

9 files changed, 214 insertions, 187 deletions

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 3e0d813..d443222 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -4,6 +4,7 @@
 

 @theme {

         --color-main: #141520;

+        --color-input: #161723;

         --color-panel: #202232;

         --color-block: #2b2e46;

         --color-bright: #333753;

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 5d0c8eb..2451307 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -89,7 +89,7 @@ const App: React.FC = () => {
         games={games}
       />
 
-      <div className="flex flex-row not-md:flex-col h-[100vh]">
+      <div className="flex flex-row not-md:flex-col h-screen">
 
         <Sidebar
           setToken={setToken}
@@ -98,7 +98,7 @@ const App: React.FC = () => {
           onUploadRun={() => setUploadRunDialog(true)}
         />
 
-        <main className="w-full">
+        <main className="w-full h-screen">
 
           <Routes>
             <Route path="/" element={<Homepage />} />
diff --git a/frontend/src/components/Sidebar/Content.tsx b/frontend/src/components/Sidebar/Content.tsx
index 4051b08..3d9533a 100644
--- a/frontend/src/components/Sidebar/Content.tsx
+++ b/frontend/src/components/Sidebar/Content.tsx
@@ -1,124 +1,45 @@
 import React, { useRef } from "react";
-import { Link } from "react-router-dom";
+import { Link, useLocation } 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";
 
+import links from "./Links";
+
 interface ContentProps {
     profile?: UserProfile;
+    isSearching: boolean;
+    selectedButtonIndex: number
     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 = "";
+const _Content: React.FC<ContentProps> = ({ profile, isSearching, selectedButtonIndex, isSidebarOpen, handle_sidebar_click }) => {
 
     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 className="px-2 my-2.5">
+                <button onClick={() => handle_sidebar_click(0)} className={`${styles.button} ${selectedButtonIndex == 0 ? styles["button-selected"] : ""} ${isSearching ? styles["button-hidden"] : ""}`}>
+                    <img src={SearchIcon} alt="Search" />
+                    <span>Search</span>
+                </button>
             </div>
 
-            <div className="flex-1 min-w-0">
+            <div className="flex-1 min-w-0 mt-12">
                 <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}>
+                    {links.content.map(({ to, icon, label }, i) => (
+                        <Link to={to} tabIndex={-1} key={i + 1}>
                             <button
-                                ref={el => {
-                                    sidebarButtonRefs.current[refIndex] = el
-                                }}
-                                className={`${styles.button}`}
-                                onClick={() => handle_sidebar_click(refIndex)}
+                                className={`${styles.button} ${selectedButtonIndex == i + 1 ? styles["button-selected"] : ""} ${isSearching ? styles["button-hidden"] : ""}`}
+                                onClick={() => handle_sidebar_click(i + 1)}
                             >
-                                <img src={icon} alt={alt} className={iconClasses} />
-                                <span className="">
+                                <img src={icon} />
+                                <span>
                                     {label}
                                 </span>
                             </button>
@@ -130,4 +51,4 @@ const Content: React.FC<ContentProps> = ({ profile, isSidebarOpen, sidebarButton
     );
 }
 
-export default Content;
+export default _Content;
diff --git a/frontend/src/components/Sidebar/Footer.tsx b/frontend/src/components/Sidebar/Footer.tsx
index 070301a..8e910b3 100644
--- a/frontend/src/components/Sidebar/Footer.tsx
+++ b/frontend/src/components/Sidebar/Footer.tsx
@@ -12,26 +12,28 @@ import {
     HelpIcon,
 } from "../../images/Images";
 
+import links from "./Links";
+
 interface FooterProps {
     profile?: UserProfile;
+    isSearching: boolean;
+    selectedButtonIndex: number;
     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 _Footer: React.FC<FooterProps> = ({ profile, isSearching, selectedButtonIndex, onUploadRun, setToken, setProfile, handle_sidebar_click }) => {
     const uploadRunRef = useRef<HTMLButtonElement>(null);
 
     return (
-        <div className="">
+        <div className="px-2 gap-2 flex flex-col mb-2">
             {profile && profile.profile && (
                 <button
                     ref={uploadRunRef}
                     id="upload-run"
-                    className={getButtonClasses(-1)}
+                    className={``}
                     onClick={() => onUploadRun()}
                 >
                     <img src={UploadIcon} alt="Upload" className={``} />
@@ -39,42 +41,30 @@ const Footer: React.FC<FooterProps> = ({ profile, onUploadRun, setToken, setProf
                 </button>
             )}
 
-            <div className={true ? 'min-w-0' : 'flex justify-center'}>
+            {/* <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>
+            </div> */}
 
-            <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>
+            {links.footer.map(({ to, icon, label }, i) => (
+                <Link to={to} tabIndex={-1} key={i}>
+                    <button
+                        className={`${styles.button} ${selectedButtonIndex == links.content.length + i + 1 ? styles["button-selected"] : ""} ${isSearching ? styles["button-hidden"] : ""}`}
+                        onClick={() => handle_sidebar_click(links.content.length + i + 1)}
+                    >
+                        <img src={icon} />
+                        <span className="">
+                            {label}
+                        </span>
+                    </button>
+                </Link>
+            ))}
         </div>
     );
 }
 
-export default Footer;
+export default _Footer;
diff --git a/frontend/src/components/Sidebar/Header.tsx b/frontend/src/components/Sidebar/Header.tsx
index e990060..c317d38 100644
--- a/frontend/src/components/Sidebar/Header.tsx
+++ b/frontend/src/components/Sidebar/Header.tsx
@@ -5,9 +5,9 @@ import {
     LogoIcon,
 } from "../../images/Images";
 
-const Header: React.FC = () => {
+const _Header: React.FC = () => {
     return (
-        <div className="flex justify-center px-4 py-3 bg-gradient-to-t from-block to-bright">
+        <div className="flex justify-center px-4 py-3 bg-gradient-to-t from-block to-bright md:w-80">
             <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">
@@ -23,4 +23,4 @@ const Header: React.FC = () => {
     )
 }
 
-export default Header;
+export default _Header;
diff --git a/frontend/src/components/Sidebar/Links.ts b/frontend/src/components/Sidebar/Links.ts
new file mode 100644
index 0000000..dfb621d
--- /dev/null
+++ b/frontend/src/components/Sidebar/Links.ts
@@ -0,0 +1,53 @@
+import {
+    FlagIcon,
+    HomeIcon,
+    PortalIcon,
+    BookIcon,
+    HelpIcon,
+} from "../../images/Images";
+
+export interface SidebarLink {
+    to: string;
+    icon: any;
+    label: string;
+};
+
+export interface SidebarLinks {
+    content: SidebarLink[];
+    footer: SidebarLink[];
+}
+
+const links: SidebarLinks = {
+    content: [
+        {
+            to: "/",
+            icon: HomeIcon,
+            label: "Home Page"
+        },
+        {
+            to: "/games",
+            icon: PortalIcon,
+            label: "Games"
+        },
+        {
+            to: "/rankings",
+            icon: FlagIcon,
+            label: "Rankings"
+        },
+    ],
+
+    footer: [
+        {
+            to: "/rules",
+            icon: BookIcon,
+            label: "Leaderboard Rules"
+        },
+        {
+            to: "/about",
+            icon: HelpIcon,
+            label: "About"
+        },
+    ]
+}
+
+export default links;
diff --git a/frontend/src/components/Sidebar/Search.tsx b/frontend/src/components/Sidebar/Search.tsx
new file mode 100644
index 0000000..0c6b868
--- /dev/null
+++ b/frontend/src/components/Sidebar/Search.tsx
@@ -0,0 +1,66 @@
+import React, { useRef } from "react";
+import { Link } from "react-router-dom";
+
+import { Search } from "@customTypes/Search";
+import { API } from "@api/Api";
+import { UserProfile } from "@customTypes/Profile";
+
+interface SearchProps {
+    profile?: UserProfile;
+    isSearching: boolean;
+};
+
+const _Search: React.FC<SearchProps> = ({ profile, isSearching }) => {
+    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);
+    };
+    return (
+        <div className="flex w-full flex-col justify-between p-3">
+            <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 py-2 px-[19px] bg-input rounded-[2000px] outline-none placeholder-bright placeholder:text-[18px] placeholder:font-barlow-semicondensed-regular"
+            />
+
+            {searchData && (
+                <div className="overflow-y-auto">
+                    {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>
+    )
+}
+
+export default _Search;
diff --git a/frontend/src/components/Sidebar/Sidebar.module.css b/frontend/src/components/Sidebar/Sidebar.module.css
index 8079676..9baf415 100644
--- a/frontend/src/components/Sidebar/Sidebar.module.css
+++ b/frontend/src/components/Sidebar/Sidebar.module.css
@@ -6,18 +6,30 @@
     border-radius: 2000px;
     transition: all 0.2s ease;
     padding: 4px 0px;
+    height: 48px;
 }
 
-.button:hover {
+.button:hover,
+.button-selected,
+.button-selected:hover {
     background-color: var(--color-panel);
 }
 
 .button>img {
-    padding: 0px 8px;
     height: 28px;
+    width: 28px;
+    transform: translateX(10px);
 }
 
 button>span {
     font-size: 22px;
     font-family: var(--font-barlow-semicondensed-regular);
+    white-space: nowrap;
+    margin-left: 16px;
+}
+
+.button-hidden>span {
+    cursor: none;
+    pointer-events: none;
+    opacity: 0;
 }
\ No newline at end of file
diff --git a/frontend/src/components/Sidebar/Sidebar.tsx b/frontend/src/components/Sidebar/Sidebar.tsx
index 2dafa2b..1d58d2e 100644
--- a/frontend/src/components/Sidebar/Sidebar.tsx
+++ b/frontend/src/components/Sidebar/Sidebar.tsx
@@ -2,9 +2,11 @@ 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";
+import _Header from "./Header";
+import _Footer from "./Footer";
+import _Content from "./Content";
+import _Search from "./Search";
+import links from "./Links";
 
 interface SidebarProps {
   setToken: React.Dispatch<React.SetStateAction<string | undefined>>;
@@ -19,78 +21,60 @@ const Sidebar: React.FC<SidebarProps> = ({
   setProfile,
   onUploadRun,
 }) => {
-  // const [isSidebarLocked, setIsSidebarLocked] = React.useState<boolean>(false);
+  const [isSearching, setIsSearching] = 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);
+
+      if (clicked_sidebar_idx == 0 && !isSearching) {
+        if (!isSearching) {
+          setIsSearching(true);
+        }
+      } else {
+        setIsSearching(false);
       }
     },
-    [isSidebarOpen]
+    [isSearching]
   );
 
   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";
+    links.content.forEach((link, i) => {
+      if (path.includes(link.to)) {
+        handle_sidebar_click(i + 1);
+      }
+    })
 
-    return `${baseClasses} ${selectedClasses}`;
-  };
+    links.footer.forEach((link, i) => {
+      if (path.includes(link.to)) {
+        handle_sidebar_click(links.content.length + i + 1);
+      }
+    })
+  }, [path]);
 
   return (
-    <div className={`w-80 not-md:w-full text-white bg-block flex flex-col not-md:flex-row
+    <div className={`h-screen w-80 not-md:w-full text-white bg-block flex flex-col not-md:flex-row not-md:bg-gradient-to-t not-md:from-block not-md:to-bright
       }`}>
 
       {/* Header */}
-      <Header />
+      <_Header />
 
-      <div className="flex h-full w-full">
-        <div className="flex flex-col">
+      <div className="flex flex-1 overflow-hidden w-full not-md:hidden ">
+        <div className={`flex flex-col transition-all duration-300 ${isSearching ? "w-[64px]" : "w-full"}`}>
           {/* Sidebar Content */}
-          <Content profile={profile} isSidebarOpen={isSidebarOpen} sidebarButtonRefs={sidebarButtonRefs} getButtonClasses={getButtonClasses} handle_sidebar_click={handle_sidebar_click} />
+          <_Content profile={profile} isSearching={isSearching} selectedButtonIndex={selectedButtonIndex} isSidebarOpen={isSidebarOpen} 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} />
+          <_Footer profile={profile} isSearching={isSearching} selectedButtonIndex={selectedButtonIndex} onUploadRun={onUploadRun} setToken={setToken} setProfile={setProfile} handle_sidebar_click={handle_sidebar_click} />
         </div>
 
-        <div className="w-20">
-
+        <div className={`flex bg-panel ${isSearching ? 'w-full' : "w-0"}`}>
+          <_Search profile={profile} isSearching={isSearching} />
         </div>
 
       </div>