From 0ee14890ccc268738b0f40ca1b4fab174ad9daa6 Mon Sep 17 00:00:00 2001
From: Meliora Ho <nho10@fordham.edu>
Date: Sat, 23 Mar 2024 04:05:36 +0000
Subject: [PATCH] Added sidebar component

---
 compass/app/layout.tsx                  |  6 +---
 compass/app/resource/layout.tsx         | 24 +++++++++++++
 compass/components/resource/Sidebar.tsx | 46 +++++++++++++++++++++++++
 3 files changed, 71 insertions(+), 5 deletions(-)
 create mode 100644 compass/app/resource/layout.tsx
 create mode 100644 compass/components/resource/Sidebar.tsx

diff --git a/compass/app/layout.tsx b/compass/app/layout.tsx
index 2509089..58c13ff 100644
--- a/compass/app/layout.tsx
+++ b/compass/app/layout.tsx
@@ -1,9 +1,5 @@
 import '../styles/globals.css';
-import { Metadata } from 'next'
- 
-export const metadata: Metadata = {
-  title: 'Login',
-}
+
 
 export default function RootLayout({
   // Layouts must accept a children prop.
diff --git a/compass/app/resource/layout.tsx b/compass/app/resource/layout.tsx
new file mode 100644
index 0000000..c34eb87
--- /dev/null
+++ b/compass/app/resource/layout.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import Sidebar from '@/components/resource/Sidebar';
+import React, { useState } from 'react';
+
+export default function RootLayout({
+
+    children,
+}: {
+    children: React.ReactNode
+}) {
+    const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+
+    return (
+        <div className="flex-row">
+            <div className={`absolute inset-y-0 left-0 transform ${isSidebarOpen ? 'translate-x-0' : '-translate-x-full'} w-64 transition duration-300 ease-in-out`}>
+                <Sidebar />
+            </div>
+            <div className={`flex-1 transition duration-300 ease-in-out ${isSidebarOpen ? 'ml-64' : 'ml-0'}`}>
+                {children}
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/compass/components/resource/Sidebar.tsx b/compass/components/resource/Sidebar.tsx
new file mode 100644
index 0000000..0988924
--- /dev/null
+++ b/compass/components/resource/Sidebar.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { ChevronRightIcon, BookmarkIcon, ClipboardIcon, BookOpenIcon } from '@heroicons/react/24/solid';
+
+const Sidebar: React.FC = () => {
+  return (
+    <div className="w-64 h-full border border-gray-200 bg-gray-50 px-4 pt-6 shadow">
+      <div className="flex flex-col space-y-8">
+
+        <div className="flex items-center p-4 space-x-2 border border-gray-200 rounded-md ">
+          
+          <div className="flex flex-col items-start space-y-2">
+            <div className="flex flex-col">
+                <span className="text-sm text-gray-700 font-bold">Compass Center</span>
+                <span className="text-xs text-gray-500">cssgunc@gmail.com</span>
+            </div>
+            <button className="text-red-600 text-xs hover:underline mt-1">Sign out</button>
+          </div>
+        </div>
+        <div className="flex flex-col space-y-2">
+        <h4 className="text-xs font-semibold text-gray-500">Pages</h4>
+        <nav className="flex flex-col">
+          <SidebarItem icon={<BookmarkIcon className="w-4 h-4 text-gray-700" />} text="Resources" />
+          <SidebarItem icon={<ClipboardIcon className="w-4 h-4 text-gray-700" />} text="Services" />
+          <SidebarItem icon={<BookOpenIcon className="w-4 h-4 text-gray-700" />} text="Training Manuals" />
+        </nav>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface SidebarItemProps {
+  icon: React.ReactElement;
+  text: string;
+}
+
+const SidebarItem: React.FC<SidebarItemProps> = ({ icon, text }) => {
+  return (
+    <a href="#" className="flex items-center p-2 space-x-2 hover:bg-gray-200 rounded-md">
+      {icon}
+      <span className="flex-grow font-semibold text-xs text-gray-700">{text}</span>
+    </a>
+  );
+};
+
+export default Sidebar;
\ No newline at end of file