diff --git a/src/components/Sidebar.css b/src/components/Sidebar.css new file mode 100644 index 0000000..191fb40 --- /dev/null +++ b/src/components/Sidebar.css @@ -0,0 +1,45 @@ +.sidebar { + position: fixed; + top: 0; + left: 0; + height: 100vh; + width: 250px; + background-color: #fff; + box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); + border-right: 1px solid #e5e7eb; +} + +.sidebar-header { + padding: 1.5rem; + border-bottom: 1px solid #e5e7eb; + background-color: #f9fafb; +} + +.sidebar-title { + margin: 0; + font-size: 1.25rem; + font-weight: 600; + color: #374151; +} + +.sidebar-nav { + padding: 1rem 0; +} + +.sidebar-link { + display: block; + padding: 0.75rem 1.5rem; + color: #374151; + text-decoration: none; + transition: background-color 0.2s ease; + border-left: 3px solid transparent; +} + +.sidebar-link:hover { + background-color: #f3f4f6; + border-left-color: #3b82f6; +} + +.sidebar-link:active { + background-color: #e5e7eb; +} diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx new file mode 100644 index 0000000..90d3eb0 --- /dev/null +++ b/src/components/Sidebar.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import './Sidebar.css'; + + +const Sidebar: React.FC = () => { + return ( +
+
+

Menu

+
+ + +
+ ); +}; + +export default Sidebar; diff --git a/src/pages/dashboard/dashboard.tsx b/src/pages/dashboard/dashboard.tsx index 9d72125..8b88a6e 100644 --- a/src/pages/dashboard/dashboard.tsx +++ b/src/pages/dashboard/dashboard.tsx @@ -1,7 +1,10 @@ +import Sidebar from "../../components/Sidebar"; + const Dashboard = () => { return (

Dashboard

+
) }