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 ( +