Building a Modern Bootstrap Sidebar Navigation with React

src/
├── components/
│   ├── Navbar.js          # Top navigation bar
│   ├── Sidebar.js         # Main sidebar component
│   └── Content.js         # Main content area
├── App.js                 # Main application component
├── App.css                # Global styles and component styles
└── index.js               # Application entry point

1App
2├── Navbar
3│   ├── Brand Section
4│   ├── Search Bar
5│   └── Notification Area
6├── Sidebar
7│   ├── Navigation Items
8│   ├── Submenus
9│   └── Settings Section
10└── Content
11    ├── Dashboard
12    ├── Projects
13    ├── Messages
14    └── Other Sections

1import React, { useState, useEffect } from 'react';
2import Navbar from './components/Navbar';
3import Sidebar from './components/Sidebar';
4import Content from './components/Content';
5import './App.css';
6
7function App() {
8  const [activeSection, setActiveSection] = useState('dashboard');
9  const [sidebarOpen, setSidebarOpen] = useState(true);
10  const [isMobile, setIsMobile] = useState(false);
11
12  // Responsive behavior management
13  useEffect(() => {
14    const handleResize = () => {
15      const mobile = window.innerWidth < 992;
16      setIsMobile(mobile);
17      if (mobile) {
18        setSidebarOpen(false);
19      }
20    };
21
22    window.addEventListener('resize', handleResize);
23    handleResize(); // Initial check
24
25    return () => window.removeEventListener('resize', handleResize);
26  }, []);
27
28  return (
29    <div className="App">
30      <Navbar onToggleSidebar={() => setSidebarOpen(!sidebarOpen)} />
31      <Sidebar 
32        activeSection={activeSection}
33        onSectionChange={setActiveSection}
34        isOpen={sidebarOpen}
35        onClose={() => setSidebarOpen(false)}
36      />
37      <Content activeSection={activeSection} />
38    </div>
39  );
40}
41
42export default App;

1const Navbar = ({ onToggleSidebar }) => {
2  const [isScrolled, setIsScrolled] = useState(false);
3  const [searchFocused, setSearchFocused] = useState(false);
4
5  // Scroll detection for visual effects
6  useEffect(() => {
7    const handleScroll = () => {
8      setIsScrolled(window.scrollY > 20);
9    };
10
11    window.addEventListener('scroll', handleScroll);
12    return () => window.removeEventListener('scroll', handleScroll);
13  }, []);
14
15  return (
16    <nav className={`navbar navbar-expand-lg fixed-top navbar-modern ${
17      isScrolled ? 'navbar-scrolled' : 'navbar-transparent'
18    }`}>
19      {/* Navbar content */}
20    </nav>
21  );
22};

1const Sidebar = ({ activeSection, onSectionChange, isOpen, onClose }) => {
2  const [expandedGroups, setExpandedGroups] = useState([]);
3  const [hoveredItem, setHoveredItem] = useState(null);
4
5  const menuItems = [
6    {
7      id: 'dashboard',
8      label: 'Dashboard',
9      icon: 'fas fa-tachometer-alt',
10      badge: { text: 'New', type: 'success' }
11    },
12    // ... more menu items
13  ];
14
15  return (
16    <div className={`sidebar-modern ${isOpen ? 'open' : 'closed'}`}>
17      <nav className="sidebar-nav">
18        {menuItems.map(item => (
19          <SidebarItem 
20            key={item.id}
21            item={item}
22            isActive={activeSection === item.id}
23            onSelect={onSectionChange}
24          />
25        ))}
26      </nav>
27    </div>
28  );
29};

1/* =============================================================== */
2/* ENHANCED NAVBAR - MODERN DESIGN */
3/* =============================================================== */
4
5.navbar-modern {
6  background: rgba(255, 255, 255, 0.95);
7  backdrop-filter: blur(20px);
8  -webkit-backdrop-filter: blur(20px);
9  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
10  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
11  padding: 0.75rem 0;
12  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
13}
14
15.navbar-modern.navbar-scrolled {
16  background: rgba(255, 255, 255, 0.98);
17  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
18  padding: 0.5rem 0;
19}

1.sidebar-nav::-webkit-scrollbar {
2  width: 8px;
3  background: transparent;
4}
5
6.sidebar-nav::-webkit-scrollbar-thumb {
7  background: linear-gradient(180deg, 
8    rgba(102, 126, 234, 0.6) 0%, 
9    rgba(118, 75, 162, 0.6) 100%);
10  border-radius: 10px;
11  transition: all 0.3s ease;
12}

1@media (max-width: 991.98px) {
2  .sidebar-modern {
3    position: fixed;
4    top: 76px;
5    left: -320px;
6    width: 320px;
7    height: calc(100vh - 76px);
8    transform: translateX(var(--sidebar-offset, 0));
9    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
10    z-index: 1040;
11  }
12  
13  .sidebar-modern.open {
14    --sidebar-offset: 320px;
15  }
16}

1.sidebar-modern {
2  transform: translateZ(0);
3  backface-visibility: hidden;
4  will-change: transform;
5}
6
7.nav-item {
8  transform: translateZ(0);
9  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
10}

1.dashboard-content {
2  overflow: visible !important;
3  min-height: auto !important;
4}
5
6body {
7  overflow-y: auto;
8  scroll-behavior: smooth;
9}

1const handleKeyDown = (e) => {
2  switch (e.key) {
3    case 'ArrowDown':
4      focusNextItem();
5      break;
6    case 'ArrowUp':
7      focusPreviousItem();
8      break;
9    case 'Enter':
10    case ' ':
11      activateItem();
12      break;
13    case 'Escape':
14      closeSubmenus();
15      break;
16  }
17};

1<nav role="navigation" aria-label="Main navigation">
2  <button 
3    aria-expanded="false"
4    aria-controls="submenu-projects"
5    aria-label="Toggle projects submenu"
6  >
7    Projects
8  </button>
9</nav>

1@media (prefers-contrast: high) {
2  .navbar-modern {
3    background: #ffffff;
4    border-bottom: 2px solid #000000;
5  }
6}
7
8@media (prefers-reduced-motion: reduce) {
9  .sidebar-modern {
10    transition: none;
11  }
12}

:root {
  --sidebar-width: 320px;
  --navbar-height: 76px;
  --primary-color: #667eea;
  --secondary-color: #764ba2;
  --background-gradient: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

1const newMenuItem = {
2  id: 'analytics',
3  label: 'Analytics',
4  icon: 'fas fa-chart-bar',
5  badge: { text: '5', type: 'primary' },
6  submenu: [
7    { id: 'reports', label: 'Reports', icon: 'fas fa-file-alt' },
8    { id: 'insights', label: 'Insights', icon: 'fas fa-lightbulb' }
9  ]
10};

// Solution: Check viewport meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">

/* Solution: Enable hardware acceleration */
.sidebar-modern {
  transform: translateZ(0);
  will-change: transform;
}

/* Solution: Increase specificity */
.sidebar-modern .nav-link {
  /* Your custom styles */
}

/* Fallback for browsers without backdrop-filter */
@supports not (backdrop-filter: blur(20px)) {
  .navbar-modern {
    background: rgba(255, 255, 255, 0.98);
  }
}