Added some debugging to the token service file.

And converted the sidebar script to a react component.

backend/services/tokenService.js

@@ -23,6 +23,7 @@ export async function authenticate(req, res, next) {
     req.user = payload;
     next();
   } catch (e) {
+    console.log("TOKEN SERVICE ERROR: ", e)
     return res.status(403).send("Invalid or expired token");
   }
 }

client/src/components/Sidebar.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import userIcon from "../assets/circle-user-solid-full.svg";
+import logoIcon from "../assets/bicycle-solid-full.svg";
+
+const Sidebar: React.FC = () => (
+  <aside className="w-72 bg-white/90 shadow-2xl rounded-r-3xl p-8 flex flex-col gap-10 border-r border-blue-100">
+    <div className="flex items-center gap-4 mb-10">
+      <img
+        src={logoIcon}
+        alt="Bikelane Logo"
+        className="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center shadow-lg"
+      />
+      <span className="font-extrabold text-2xl text-blue-700 tracking-wide drop-shadow">
+        Bikelanes
+      </span>
+    </div>
+    <nav>
+      <ul className="space-y-6">
+        <li>
+          <a
+            href="/#"
+            className="flex items-center gap-3 px-4 py-3 rounded-xl text-blue-700 font-medium bg-blue-50 hover:bg-blue-200 hover:text-blue-900 transition-all shadow-sm"
+          >
+            <img src={userIcon} alt="Users" className="w-6 h-6" />
+            <span className="text-lg">Users</span>
+          </a>
+        </li>
+        {/* Add more links as needed */}
+      </ul>
+    </nav>
+    <div className="mt-auto text-xs text-blue-300 text-center pt-6 border-t border-blue-100">
+      <span>Bikelane pre-0.1</span>
+    </div>
+  </aside>
+);
+
+export default Sidebar;

client/src/layout/Layout.tsx

@@ -3,6 +3,7 @@ import Header from "../components/Header";
 import userIcon from "../assets/circle-user-solid-full.svg";
 import logoIcon from "../assets/bicycle-solid-full.svg";
 import Cookies from "js-cookie"; // Add this import
+import Sidebar from "../components/Sidebar";
 
 type LayoutProps = {
   children: React.ReactNode;
@@ -18,35 +19,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
         {isLoggedIn && (
           <>
             {/* Sidebar */}
-            <aside className="w-72 bg-white/90 shadow-2xl rounded-r-3xl p-8 flex flex-col gap-10 border-r border-blue-100">
+            <Sidebar />
-              <div className="flex items-center gap-4 mb-10">
-                <img
-                  src={logoIcon}
-                  alt="Bikelane Logo"
-                  className="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center shadow-lg"
-                />
-                <span className="font-extrabold text-2xl text-blue-700 tracking-wide drop-shadow">
-                  Bikelanes
-                </span>
-              </div>
-              <nav>
-                <ul className="space-y-6">
-                  <li>
-                    <a
-                      href="/#"
-                      className="flex items-center gap-3 px-4 py-3 rounded-xl text-blue-700 font-medium bg-blue-50 hover:bg-blue-200 hover:text-blue-900 transition-all shadow-sm"
-                    >
-                      <img src={userIcon} alt="Users" className="w-6 h-6" />
-                      <span className="text-lg">Users</span>
-                    </a>
-                  </li>
-                  {/* Add more links as needed */}
-                </ul>
-              </nav>
-              <div className="mt-auto text-xs text-blue-300 text-center pt-6 border-t border-blue-100">
-                <span>Bikelane pre-0.1</span>
-              </div>
-            </aside>
             {/* Main content */}
             <main className="flex-1 p-10 bg-white/80 rounded-l-3xl shadow-2xl m-6 overflow-auto">
               {children}
@@ -67,7 +40,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
               target="_blank"
               rel="noopener noreferrer"
             >
-              GitHub Repository
+              Gitea Repository
             </a>
             <span className="ml-1">| Fork me please 🚲</span>
           </span>