/* views/components/sidebar/sidebar.css */ /* Floating Menu Button Styles */ .floating-menu-btn { display: none; position: fixed; bottom: 25px; right: 25px; width: 60px; height: 60px; border-radius: 50%; background-color: #e84e0f; color: white; border: none; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); z-index: 1030; cursor: pointer; align-items: center; justify-content: center; transition: all 0.3s ease; } .floating-menu-btn:hover { background-color: #c93d0a; transform: scale(1.05); } .floating-menu-btn i { font-size: 1.8rem; } /* Sidebar Overlay */ .sidebar-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1040; } .sidebar-overlay.show { display: block; } /* Sidebar Styles */ .sidebar { position: fixed; top: 0; left: -300px; width: 300px; height: 100%; background-color: #30875f; z-index: 1050; overflow-y: auto; transition: left 0.3s ease; padding: 20px; box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2); } .sidebar.open { left: 0; } .sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .sidebar-logo { width: 60px; height: auto; } .close-sidebar { background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; } .sidebar-nav { display: flex; flex-direction: column; } .sidebar-nav .nav-link { padding: 15px 10px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1); color: white !important; text-decoration: none; } .sidebar-contact { margin-top: 20px; color: white; font-size: 0.9rem; } .sidebar-contact div { margin-bottom: 10px; } /* Media Queries for Sidebar */ @media (max-width: 768px) { .floating-menu-btn { display: flex; } } @media (max-width: 576px) { .sidebar { width: 250px; } .floating-menu-btn { width: 50px; height: 50px; bottom: 20px; right: 20px; } }