1 files changed, 55 insertions, 0 deletions
diff --git a/frontend/src/components/Layout/Layout.tsx b/frontend/src/components/Layout/Layout.tsx
new file mode 100644
index 0000000..6617038
--- /dev/null
+++ b/frontend/src/components/Layout/Layout.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import React, { useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+const paths = [
+  { href: "/dashboard", label: "Home" },
+  { href: "/dashboard/positions", label: "Positions" },
+];
+
+export type LayoutProps = Readonly<{
+  children: React.ReactNode;
+}>;
+
+export default function Layout({ children }: LayoutProps) {
+  const [isOpen, setIsOpen] = useState(true);
+  const path = usePathname();
+
+  return (
+    <div className="flex h-screen bg-gray-100">
+      {/* Sidebar */}
+      <div
+        className={`relative text-black space-y-6 py-7 px-2 transition-all duration-500 ease-in-out ${isOpen ? "w-64" : "w-12 overflow-hidden"}`}>
+        {/* Sidebar content */}
+        <nav className={isOpen ? "" : "hidden"}>
+          {paths.map(({ href, label }) => (
+            <Link key={href} href={href}
+                  className={`block py-2.5 px-4 mb-2 rounded transition duration-200 ${href == path ? "bg-blue-200" : "hover:bg-blue-200"}`}>
+              {label}
+            </Link>
+          ))}
+        </nav>
+        {/* Toggle button */}
+        <div className="absolute bottom-2 right-0 p-2">
+          <button onClick={() => setIsOpen(!isOpen)}
+                  className="text-gray-700 focus:outline-none transition-transform duration-500 transform"
+                  style={{ transform: isOpen ? "rotate(180deg)" : "rotate(0)" }}
+          >
+            <FontAwesomeIcon icon={faArrowRight} size="2x" />
+          </button>
+        </div>
+      </div>
+
+      {/* Main content */}
+      <div className="flex-1 flex flex-col overflow-hidden">
+        <main className="flex-1 overflow-y-auto p-4">
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+}