1import React from 'react';2import {3 CDBSidebar,4 CDBSidebarContent,5 CDBSidebarFooter,6 CDBSidebarHeader,7 CDBSidebarMenu,8 CDBSidebarMenuItem,9} from 'cdbreact';10import { NavLink } from 'react-router-dom';1112const Sidebar = () => {13 return (14 <div style={{ display: 'flex', height: '100vh', overflow: 'scroll initial' }}>15 <CDBSidebar textColor="#fff" backgroundColor="#333">16 <CDBSidebarHeader prefix={<i className="fa fa-bars fa-large"></i>}>17 <a href="/" className="text-decoration-none" style={{ color: 'inherit' }}>18 Sidebar19 </a>20 </CDBSidebarHeader>2122 <CDBSidebarContent className="sidebar-content">23 <CDBSidebarMenu>24 <NavLink exact to="/" activeClassName="activeClicked">25 <CDBSidebarMenuItem icon="columns">Dashboard</CDBSidebarMenuItem>26 </NavLink>27 <NavLink exact to="/tables" activeClassName="activeClicked">28 <CDBSidebarMenuItem icon="table">Tables</CDBSidebarMenuItem>29 </NavLink>30 <NavLink exact to="/profile" activeClassName="activeClicked">31 <CDBSidebarMenuItem icon="user">Profile page</CDBSidebarMenuItem>32 </NavLink>33 <NavLink exact to="/analytics" activeClassName="activeClicked">34 <CDBSidebarMenuItem icon="chart-line">Analytics</CDBSidebarMenuItem>35 </NavLink>3637 <NavLink exact to="/hero404" target="_blank" activeClassName="activeClicked">38 <CDBSidebarMenuItem icon="exclamation-circle">404 page</CDBSidebarMenuItem>39 </NavLink>40 </CDBSidebarMenu>41 </CDBSidebarContent>4243 <CDBSidebarFooter style={{ textAlign: 'center' }}>44 <div45 style={{46 padding: '20px 5px',47 }}48 >49 Sidebar Footer50 </div>51 </CDBSidebarFooter>52 </CDBSidebar>53 </div>54 );55};5657export default Sidebar;