import React, { useState } from 'react';
import Menu from './Menu';
import Profile from './Profile';
import SearchBar from './SearchBar';

const Sidebar = () => {
  const [searchQuery, setSearchQuery] = useState('');

  return (
    <div id="layoutSidenav_nav">
      <nav className="sb-sidenav accordion sb-sidenav-light" id="sidenavAccordion">
        <Profile />
        <SearchBar onSearch={(query) => setSearchQuery(query.toLowerCase())} />
        <Menu searchQuery={searchQuery} />
        <div className="sb-sidenav-footer">
          <div className="small">Logged in as:</div>
          Start Bootstrap
        </div>
      </nav>
    </div>
  );
};


export default Sidebar;
