CSS TO ADD (before </style>):
        .sidebar.collapsed {
            width: 70px;
        }
        .sidebar.collapsed .logo span,
        .sidebar.collapsed .menu-item a span {
            display: none;
        }
        .sidebar.collapsed + .main-content {
            margin-left: 70px;
        }
        .toggle-sidebar {
            position: absolute;
            top: 20px;
            right: -15px;
            width: 30px;
            height: 30px;
            background: white;
            border: 2px solid #667eea;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #667eea;
            font-size: 14px;
            transition: all 0.3s;
            z-index: 1001;
        }
        .toggle-sidebar:hover {
            background: #667eea;
            color: white;
            transform: scale(1.1);
        }
        @media (max-width: 768px) {
            .toggle-sidebar {
                display: none;
            }
        }

REPLACE <div class="sidebar"> WITH:
    <div class="sidebar" id="sidebar">
        <button class="toggle-sidebar" onclick="toggleSidebar()">
            <i class="bi bi-chevron-left" id="toggleIcon"></i>
        </button>

REPLACE logo section - ADD <span> tags around text after icon

JS TO ADD (before </body>):
    <script>
        function toggleSidebar() {
            const sidebar = document.getElementById('sidebar');
            const icon = document.getElementById('toggleIcon');
            
            sidebar.classList.toggle('collapsed');
            
            if (sidebar.classList.contains('collapsed')) {
                icon.classList.remove('bi-chevron-left');
                icon.classList.add('bi-chevron-right');
            } else {
                icon.classList.remove('bi-chevron-right');
                icon.classList.add('bi-chevron-left');
            }
            
            localStorage.setItem('sidebarCollapsed', sidebar.classList.contains('collapsed'));
        }
        
        document.addEventListener('DOMContentLoaded', function() {
            const sidebar = document.getElementById('sidebar');
            const icon = document.getElementById('toggleIcon');
            const isCollapsed = localStorage.getItem('sidebarCollapsed') === 'true';
            
            if (isCollapsed) {
                sidebar.classList.add('collapsed');
                icon.classList.remove('bi-chevron-left');
                icon.classList.add('bi-chevron-right');
            }
        });
    </script>