src/components/Sidebar.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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;