feat: Initialize structure of sidebar component

1 files changed, 32 insertions, 0 deletions

diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
new file mode 100644
index 0000000..2600963
--- /dev/null
+++ b/src/components/Sidebar.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import Container from "./Container";
+const Sidebar = () => {
+
+    return (
+    <Container>
+        <aside
+            id="logo-sidebar"
+            className={`fixed w-64 h-screen bg-white border-gray-200 dark:bg-gray-800 dark:border-gray-700`}
+            aria-label="Sidebar"
+        >
+            <div className="h-full px-3 py-4 overflow-y-auto bg-white dark:bg-gray-800">
+                <ul className="space-y-2">
+
+                    {/* Sidebar menu items */}
+                    <li>
+                        <Link to="/" className="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
+                            <svg className="w-5 h-5 text-gray-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M3 12h18M3 6h18M3 18h18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                            </svg>
+                            <span className="ml-2 text-gray-900 dark:text-white">Home</span>
+                        </Link>
+                    </li>
+                </ul>
+            </div>
+        </aside>
+    </Container>
+    );
+};
+
+export default Sidebar;