157 lines
3.1 KiB
CSS
157 lines
3.1 KiB
CSS
/* NetGesCon - Sidebar Expandable Menu Styles */
|
|
.sidebar-menu {
|
|
@apply space-y-1;
|
|
}
|
|
|
|
.menu-item {
|
|
@apply flex items-center gap-3 px-4 py-2 rounded-lg text-gray-700 dark:text-gray-200 hover:bg-indigo-100 dark:hover:bg-gray-700 hover:text-indigo-700 dark:hover:text-yellow-300 transition-all duration-200 group;
|
|
}
|
|
|
|
.menu-item.active {
|
|
@apply bg-indigo-500 text-white dark:bg-yellow-600 dark:text-gray-900;
|
|
}
|
|
|
|
.menu-item.active .menu-icon {
|
|
@apply text-white dark:text-gray-900;
|
|
}
|
|
|
|
.menu-item:hover .menu-icon {
|
|
@apply text-indigo-700 dark:text-yellow-300;
|
|
}
|
|
|
|
.menu-icon {
|
|
@apply text-lg transition-colors duration-200;
|
|
}
|
|
|
|
.menu-label {
|
|
@apply font-medium;
|
|
}
|
|
|
|
.menu-toggle-icon {
|
|
@apply ml-auto transform transition-transform duration-200;
|
|
}
|
|
|
|
.menu-toggle-icon.expanded {
|
|
@apply rotate-180;
|
|
}
|
|
|
|
.submenu {
|
|
@apply pl-4 space-y-1 overflow-hidden transition-all duration-300 ease-in-out;
|
|
}
|
|
|
|
.submenu.collapsed {
|
|
@apply max-h-0 opacity-0;
|
|
}
|
|
|
|
.submenu.expanded {
|
|
@apply max-h-96 opacity-100;
|
|
}
|
|
|
|
.submenu-item {
|
|
@apply flex items-center gap-3 px-4 py-2 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600 hover:text-gray-900 dark:hover:text-gray-100 transition-all duration-200 relative;
|
|
}
|
|
|
|
.submenu-item::before {
|
|
@apply absolute left-2 top-1/2 transform -translate-y-1/2 w-2 h-2 rounded-full bg-gray-400 dark:bg-gray-500 transition-colors duration-200;
|
|
content: '';
|
|
}
|
|
|
|
.submenu-item:hover::before {
|
|
@apply bg-indigo-500 dark:bg-yellow-500;
|
|
}
|
|
|
|
.submenu-item.active {
|
|
@apply bg-indigo-100 dark:bg-gray-600 text-indigo-700 dark:text-yellow-300;
|
|
}
|
|
|
|
.submenu-item.active::before {
|
|
@apply bg-indigo-500 dark:bg-yellow-500;
|
|
}
|
|
|
|
.submenu-label {
|
|
@apply text-sm font-medium;
|
|
}
|
|
|
|
/* Animazioni di slide e fade */
|
|
@keyframes slideDown {
|
|
from {
|
|
max-height: 0;
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
max-height: 500px;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from {
|
|
max-height: 500px;
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
max-height: 0;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.submenu.expanding {
|
|
animation: slideDown 0.3s ease-out forwards;
|
|
}
|
|
|
|
.submenu.collapsing {
|
|
animation: slideUp 0.3s ease-out forwards;
|
|
}
|
|
|
|
/* Stili per icone specifiche */
|
|
.menu-icon.fa-building {
|
|
@apply text-blue-600 dark:text-blue-400;
|
|
}
|
|
|
|
.menu-icon.fa-home {
|
|
@apply text-green-600 dark:text-green-400;
|
|
}
|
|
|
|
.menu-icon.fa-users {
|
|
@apply text-purple-600 dark:text-purple-400;
|
|
}
|
|
|
|
.menu-icon.fa-receipt {
|
|
@apply text-orange-600 dark:text-orange-400;
|
|
}
|
|
|
|
.menu-icon.fa-chart-pie {
|
|
@apply text-red-600 dark:text-red-400;
|
|
}
|
|
|
|
.menu-icon.fa-credit-card {
|
|
@apply text-indigo-600 dark:text-indigo-400;
|
|
}
|
|
|
|
.menu-icon.fa-calendar-check {
|
|
@apply text-teal-600 dark:text-teal-400;
|
|
}
|
|
|
|
.menu-icon.fa-file-invoice-dollar {
|
|
@apply text-yellow-600 dark:text-yellow-400;
|
|
}
|
|
|
|
.menu-icon.fa-cogs {
|
|
@apply text-gray-600 dark:text-gray-400;
|
|
}
|
|
|
|
/* Responsive per menu su mobile */
|
|
@media (max-width: 768px) {
|
|
.sidebar-menu {
|
|
@apply text-sm;
|
|
}
|
|
|
|
.menu-item {
|
|
@apply px-3 py-2;
|
|
}
|
|
|
|
.submenu-item {
|
|
@apply px-3 py-1;
|
|
}
|
|
}
|