Changeset cb4a1da for frontend/src/App.tsx

Timestamp:

02/05/26 20:52:11 (5 months ago)

Author:

Filip Gavrilovski <filipgavrilovski28@…>

Branches:

main

Children:

2ce7c1e

Parents:

694fc25

Message:

add working server side search to landing page; change some endpoints

File:

• frontend/src/App.tsx (modified) (1 diff)

frontend/src/App.tsx

@@ +1 @@
+import { useState } from "react";
 import { createBrowserRouter, Outlet, RouterProvider } from "react-router-dom";
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
+import Sidebar from "./components/Sidebar";
 import AllUsers from "./pages/AllUsers";
 import LandingPage from "./pages/LandingPage";
 import Login from "./pages/Login";
+import MusicalCollection from "./pages/MusicalCollection";
 import Nav from "./pages/Nav";
 import Register from "./pages/Register";
 import UserDetail from "./pages/UserDetail";
-import MusicalCollection from "./pages/MusicalCollection";
 
 const Layout = () => {
-  return (
-    <div className="flex flex-col min-h-screen">
-      <Nav />
-      <ToastContainer
-        position="top-right"
-        autoClose={2000}
-        hideProgressBar={false}
-        newestOnTop={false}
-        closeOnClick
-        rtl={false}
-        pauseOnFocusLoss
-        draggable
-        pauseOnHover
-        theme="light"
-      />
-      <main className="grow">
-        <Outlet />
-      </main>
-    </div>
-  );
+        const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+
+        return (
+                <div className="flex flex-col min-h-screen bg-[#121212]">
+                        <Nav
+                                isSidebarOpen={isSidebarOpen}
+                                onToggleSidebar={() => setIsSidebarOpen(!isSidebarOpen)}
+                        />
+                        <Sidebar isOpen={isSidebarOpen} onClose={() => setIsSidebarOpen(false)} />
+                        <ToastContainer
+                                position="top-right"
+                                autoClose={2000}
+                                hideProgressBar={false}
+                                newestOnTop={false}
+                                closeOnClick
+                                rtl={false}
+                                pauseOnFocusLoss
+                                draggable
+                                pauseOnHover
+                                theme="light"
+                        />
+                        <main
+                                className={`grow transition-all duration-300 pt-20 ${
+                                        isSidebarOpen ? "ml-64" : "ml-0"
+                                }`}
+                        >
+                                <Outlet />
+                        </main>
+                </div>
+        );
 };
 
 const router = createBrowserRouter([
-  {
-    path: "",
-    element: <Layout />,
-    children: [
-      {
-        path: "/",
-        element: <LandingPage />,
-      },
-      {
-        path: "/login",
-        element: <Login />,
-      },
-      {
-        path: "/users",
-        element: <AllUsers />,
-      },
-      {
-        path: "/users/:username",
-        element: <UserDetail />,
-      },
-      {
-        path: "/register",
-        element: <Register />,
-      },
-      {
-        path: "/collection/:type/:id",
-        element: <MusicalCollection />,
-      },
-    ],
-  },
+        {
+                path: "",
+                element: <Layout />,
+                children: [
+                        {
+                                path: "/",
+                                element: <LandingPage />,
+                        },
+                        {
+                                path: "/login",
+                                element: <Login />,
+                        },
+                        {
+                                path: "/users",
+                                element: <AllUsers />,
+                        },
+                        {
+                                path: "/users/:username",
+                                element: <UserDetail />,
+                        },
+                        {
+                                path: "/register",
+                                element: <Register />,
+                        },
+                        {
+                                path: "/collection/:type/:id",
+                                element: <MusicalCollection />,
+                        },
+                ],
+        },
 ]);
 
 function App() {
-  return <RouterProvider router={router} />;
+        return <RouterProvider router={router} />;
 }