├── src
├── index.css
├── assets
│ ├── logo.png
│ ├── profile.png
│ └── react.svg
├── main.jsx
├── App.jsx
└── components
│ └── Sidebar.jsx
├── public
├── SidebarComponent.png
└── vite.svg
├── postcss.config.js
├── vite.config.js
├── tailwind.config.js
├── .gitignore
├── index.html
├── .eslintrc.cjs
├── README.md
└── package.json
/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/constgenius/sidebarReact/HEAD/src/assets/logo.png
--------------------------------------------------------------------------------
/src/assets/profile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/constgenius/sidebarReact/HEAD/src/assets/profile.png
--------------------------------------------------------------------------------
/public/SidebarComponent.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/constgenius/sidebarReact/HEAD/public/SidebarComponent.png
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 | content: [
4 | "./index.html",
5 | "./src/**/*.{js,ts,jsx,tsx}",
6 | ],
7 | theme: {
8 | extend: {},
9 | },
10 | plugins: [],
11 | }
12 |
13 |
--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | 'eslint:recommended',
6 | 'plugin:react/recommended',
7 | 'plugin:react/jsx-runtime',
8 | 'plugin:react-hooks/recommended',
9 | ],
10 | ignorePatterns: ['dist', '.eslintrc.cjs'],
11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 | settings: { react: { version: '18.2' } },
13 | plugins: ['react-refresh'],
14 | rules: {
15 | 'react-refresh/only-export-components': [
16 | 'warn',
17 | { allowConstantExport: true },
18 | ],
19 | },
20 | }
21 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Build a Retractable Sidebar Component purely in ReactJS and Tailwind CSS | React Sidebar Navigation Menu
2 |
3 | The Retractable Sidebar Component, crafted with ReactJS and Tailwind CSS, offers a sleek and responsive solution for implementing retractable sidebars in web applications. Users can effortlessly expand or retract the sidebar with smooth animations, enhancing the overall navigation experience. This component is designed with customization in mind, ensuring it seamlessly integrates into the application's design language.
4 |
5 | Youtube Tutorial Link: https://youtu.be/1xH50C4wWy0
6 |
7 | 
8 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "sidebar",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "lucide-react": "^0.294.0",
14 | "react": "^18.2.0",
15 | "react-dom": "^18.2.0"
16 | },
17 | "devDependencies": {
18 | "@types/react": "^18.2.37",
19 | "@types/react-dom": "^18.2.15",
20 | "@vitejs/plugin-react": "^4.2.0",
21 | "autoprefixer": "^10.4.16",
22 | "eslint": "^8.53.0",
23 | "eslint-plugin-react": "^7.33.2",
24 | "eslint-plugin-react-hooks": "^4.6.0",
25 | "eslint-plugin-react-refresh": "^0.4.4",
26 | "postcss": "^8.4.32",
27 | "tailwindcss": "^3.3.6",
28 | "vite": "^5.0.0"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
1 | import { LayoutDashboard, Home, StickyNote, Layers, Flag, Calendar, LifeBuoy, Settings } from "lucide-react";
2 | import Sidebar, { SidebarItem } from "./components/Sidebar"
3 |
4 | function App() {
5 |
6 | return (
7 | <>
8 |
9 |
10 | } text="Home" alert />
11 | } text="Dashboard" active />
12 | } text="Projects" alert />
13 | } text="Calendar" />
14 | } text="Tasks" />
15 | } text="Reporting" />
16 |
17 | } text="Settings" />
18 | } text="Help" />
19 |
20 |
21 |
22 | )
23 | }
24 |
25 | export default App
26 |
--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/Sidebar.jsx:
--------------------------------------------------------------------------------
1 | import { ChevronFirst, ChevronLast, MoreVertical } from "lucide-react"
2 | import logo from "../assets/logo.png"
3 | import profile from "../assets/profile.png"
4 | import { createContext, useContext, useState } from "react"
5 |
6 | const SidebarContext = createContext();
7 |
8 | export default function Sidebar({ children }) {
9 | const [expanded, setExpanded] = useState(true)
10 | return (
11 | <>
12 |
38 |
39 | )
40 | }
41 |
42 | export function SidebarItem({ icon, text, active, alert }) {
43 | const { expanded } = useContext(SidebarContext)
44 | return (
45 |
46 | {icon}
47 | {text}
48 | {alert && (
49 |
50 |
51 |
52 | )}
53 |
54 | {!expanded && (
55 |
56 | {text}
57 |
58 | )}
59 |
60 | )
61 | }
--------------------------------------------------------------------------------
/src/assets/react.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------