This React component leverages TailwindCSS to deliver a sleek sidebar navigation with interactive icons, including the ability to switch between dark and light modes. Inspired by Discord's navigation bar.
- 🌒 Smooth switch between dark and light mode with the bottom icon
- 🚀 Built with TailwindCSS for fast and efficient styling
- 🎨 Uses Material-UI icons.
- 📱 Responsive and mobile-friendly
- 🔍 Tooltips for each icon's description
- 👁️ Stylish design and animations
- Ensure you have Node.js and npm or yarn installed.
- Clone this repository:
git clone https://github.com/ennzudev/react-sidebar-navigation.git react-sidebar-navigation
cd react-sidebar-navigation
- Install the dependencies:
npm install
- Run the project:
npm run dev
The project should now be running at [http://localhost:5173]
as Vite chooses that port.
Import the sidebar navigation component and use it within your component or page:
import SidebarNavigation from './components/SideBarNavigation';
function App() {
return (
<div className="App">
<SidebarNavigation />
{/* other components */}
</div>
);
}
To customize the icons or add new ones, simply edit the related sidebar navigation file.
- Adding a New Icon 🎨:
- 🌐 Visit Material-UI icons.
- 🔍 Search for an icon of your preference.
- 🖱️ Click on the desired icon.
- 📋 Copy the 'import code' provided.
- 📥 Paste it in your component and use it as needed.
Contributions are welcome. Please open an issue or make a pull request if you wish to add features or fix bugs.
MIT