Untitled

import React, { useState } from "react";
import * as FaIcons from "react-icons/fa";
import { VscAdd } from "react-icons/vsc";
import { BsSearch, BsFillChatLeftTextFill } from "react-icons/bs";
import { FiSettings } from "react-icons/fi";
export default function Sidebar() {
  
  return (
    <div className="drawer drawer-mobile">
      <input id="my-drawer-2" type="checkbox" className="drawer-toggle" />
      <div className="drawer-content flex flex-col items-center justify-center">
      </div>
      <div className="drawer-side">
        <label htmlFor="my-drawer-2" className="drawer-overlay"></label>
        <ul className="menu p-4 w-80 bg-base-100 text-base-content">
          <li>
            <a href="/home">
              <FaIcons.FaHome className="Icon" /> Home
            </a>
          </li>
          <li>
            <a href="/new-alert">
              <VscAdd className="Icon" /> New Alert
            </a>
          </li>
          <li>
            <a href="/search">
              <BsSearch className="Icon" /> Search
            </a>
          </li>
          <li>
            <a href="/friends">
              <FaIcons.FaUserFriends className="Icon" /> Friends
            </a>
          </li>
          <li>
            <a href="/chat">
              <BsFillChatLeftTextFill className="Icon" /> Chat
            </a>
          </li>
          <li>
            <a href="/settings">
              <FiSettings className="Icon" /> Settings
            </a>
          </li>
        </ul>
      </div>
    </div>
  );
}