783 lines
18 KiB
CSS
783 lines
18 KiB
CSS
.menu {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
position: relative;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 250px;
|
|
min-width: 250px;
|
|
max-width: 250px;
|
|
overflow: visible; /* Allow nested submenus to expand */
|
|
/* Ensure menu expands to fit content - critical for proper sidebar expansion */
|
|
/* Don't set height - let it be determined by content */
|
|
flex-shrink: 0; /* Prevent menu from shrinking */
|
|
flex-grow: 0; /* Don't grow beyond content */
|
|
}
|
|
|
|
.menu.minimized {
|
|
position: relative !important;
|
|
}
|
|
|
|
.menu li {
|
|
display: flex;
|
|
width: 250px !important;
|
|
min-width: 250px;
|
|
max-width: 250px;
|
|
height: 44px;
|
|
padding: 0 3px 0 27px;
|
|
margin: 0;
|
|
align-items: center;
|
|
color: var(--color-text);
|
|
list-style: none;
|
|
position: relative;
|
|
gap: 8px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.menu li:hover, .menu li.active {
|
|
background: var(--color-secondary);
|
|
color: white;
|
|
border-top-right-radius: 25px;
|
|
border-bottom-right-radius: 25px;
|
|
}
|
|
|
|
.menu li:hover a , .menu li.active a {
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|
|
|
|
|
|
.menuTextLink {
|
|
flex: 1;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0;
|
|
margin: 0;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
min-width: 0;
|
|
gap: 5px;
|
|
font-family: var(--font-family);
|
|
font-size: 0.9rem;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: normal;
|
|
}
|
|
|
|
.menuTextButton {
|
|
flex: 1;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 8px 0 0;
|
|
margin: 0;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
min-width: 0;
|
|
gap: 5px;
|
|
font-family: var(--font-family);
|
|
font-size: 0.9rem;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: normal;
|
|
width: 100%;
|
|
}
|
|
|
|
.menu li:hover .menuTextButton {
|
|
color: white;
|
|
}
|
|
|
|
.arrowButton {
|
|
background: none;
|
|
border: none;
|
|
padding: 4px;
|
|
margin-right: 8px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 4px;
|
|
transition: background-color 0.2s ease;
|
|
flex-shrink: 0;
|
|
width: 24px;
|
|
height: 24px;
|
|
color:var(--color-text);
|
|
}
|
|
|
|
.menu li:hover .arrowButton {
|
|
color: white;
|
|
}
|
|
|
|
|
|
|
|
|
|
.arrowButton:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.icon {
|
|
display: flex;
|
|
width: 25px;
|
|
height: 25px;
|
|
padding: 2.292px 2.3px 2.508px 2.292px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
}
|
|
|
|
/* Ensure icon is visible when minimized */
|
|
.menu.minimized li .icon.iconMinimized {
|
|
display: flex !important;
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
position: absolute !important;
|
|
z-index: 99999 !important;
|
|
}
|
|
|
|
.hassubmenu {
|
|
width: 20px;
|
|
height: 20px;
|
|
opacity: 1;
|
|
transition: opacity 0.3s ease-in-out;
|
|
}
|
|
|
|
.rotated {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.menuText {
|
|
opacity: 1;
|
|
transition: opacity 0.3s ease-in-out;
|
|
}
|
|
|
|
.minimizedOverlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
pointer-events: auto;
|
|
background: transparent;
|
|
}
|
|
|
|
.minimizedSubmenuToggle {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
padding: 0;
|
|
margin: 0;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* Minimized Menu Styles */
|
|
.menu.minimized li {
|
|
width: 46px;
|
|
padding: 0;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative !important;
|
|
overflow: visible !important;
|
|
clip-path: none !important;
|
|
clip: none !important;
|
|
contain: none !important;
|
|
isolation: auto !important;
|
|
/* Don't create stacking context that interferes */
|
|
transform: none !important;
|
|
}
|
|
.menu.minimized li a{
|
|
opacity: 0;
|
|
}
|
|
|
|
/* Ensure icons are never hidden when minimized */
|
|
.menu.minimized li .iconMinimized,
|
|
.menu.minimized li [data-debug="icon-minimized"] {
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
display: flex !important;
|
|
position: absolute !important;
|
|
z-index: 99999 !important;
|
|
}
|
|
|
|
.iconMinimizedWrapper {
|
|
position: absolute !important;
|
|
top: 50% !important;
|
|
left: 50% !important;
|
|
transform: translate(-50%, -50%) !important;
|
|
font-size: 25px !important;
|
|
line-height: 25px !important;
|
|
width: 25px !important;
|
|
height: 25px !important;
|
|
min-width: 25px !important;
|
|
min-height: 25px !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
pointer-events: none !important;
|
|
overflow: visible !important;
|
|
visibility: visible !important;
|
|
opacity: 1 !important;
|
|
flex-shrink: 0 !important;
|
|
margin: 0 !important;
|
|
z-index: 2 !important;
|
|
}
|
|
|
|
.iconMinimized {
|
|
margin: 0 !important;
|
|
display: flex !important;
|
|
justify-content: center !important;
|
|
align-items: center !important;
|
|
width: 25px !important;
|
|
height: 25px !important;
|
|
padding: 2.292px 2.3px 2.508px 2.292px !important;
|
|
color: var(--color-text) !important;
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
font-size: 25px !important;
|
|
}
|
|
|
|
.iconMinimized svg {
|
|
width: 25px !important;
|
|
height: 25px !important;
|
|
min-width: 25px !important;
|
|
min-height: 25px !important;
|
|
max-width: 25px !important;
|
|
max-height: 25px !important;
|
|
display: block !important;
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
}
|
|
|
|
.iconMinimized svg path {
|
|
fill: inherit !important;
|
|
stroke: inherit !important;
|
|
}
|
|
|
|
.menu.minimized li.active .iconMinimized svg,
|
|
.menu.minimized li:hover .iconMinimized svg {
|
|
color: white !important;
|
|
fill: white !important;
|
|
stroke: white !important;
|
|
}
|
|
|
|
.menu.minimized li.active .iconMinimized svg path,
|
|
.menu.minimized li:hover .iconMinimized svg path {
|
|
fill: white !important;
|
|
stroke: white !important;
|
|
}
|
|
|
|
/* Ensure submenu can expand below minimized items */
|
|
.menu.minimized {
|
|
width: 100%;
|
|
align-items: center;
|
|
overflow: visible !important;
|
|
min-height: auto !important;
|
|
height: auto !important;
|
|
}
|
|
|
|
|
|
|
|
|
|
.menu.minimized li:hover,
|
|
.menu.minimized li.active {
|
|
border-radius: 15px;
|
|
color: var(--color-bg);
|
|
}
|
|
|
|
.menu.minimized li.active .iconMinimized,
|
|
.menu.minimized li:hover .iconMinimized {
|
|
color: white !important;
|
|
}
|
|
|
|
.menu.minimized li.active .iconMinimized svg,
|
|
.menu.minimized li:hover .iconMinimized svg {
|
|
color: white !important;
|
|
fill: white !important;
|
|
}
|
|
|
|
.menu.minimized li.active .iconMinimized svg path,
|
|
.menu.minimized li:hover .iconMinimized svg path {
|
|
fill: white !important;
|
|
stroke: white !important;
|
|
}
|
|
|
|
/* Disabled item styles */
|
|
.menu.disabled,
|
|
.menu li.disabledItem {
|
|
opacity: 0.4;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.menu li.disabledItem:hover {
|
|
background: transparent;
|
|
color: var(--color-text);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.disabledLink {
|
|
color: var(--color-text) !important;
|
|
opacity: 0.6 !important;
|
|
cursor: not-allowed !important;
|
|
pointer-events: none !important;
|
|
}
|
|
|
|
.disabledText {
|
|
color: var(--color-text) !important;
|
|
opacity: 0.6 !important;
|
|
}
|
|
|
|
.disabledIcon {
|
|
opacity: 0.6 !important;
|
|
color: var(--color-text) !important;
|
|
}
|
|
|
|
.disabledArrow {
|
|
opacity: 0.6 !important;
|
|
color: var(--color-text) !important;
|
|
}
|
|
|
|
/* Ensure disabled items don't show hover effects */
|
|
.menu li.disabledItem:hover .disabledLink,
|
|
.menu li.disabledItem:hover .disabledText,
|
|
.menu li.disabledItem:hover .disabledIcon,
|
|
.menu li.disabledItem:hover .disabledArrow {
|
|
color: var(--color-text) !important;
|
|
opacity: 0.6 !important;
|
|
}
|
|
|
|
/* ============================================
|
|
Submenu Styles (merged from SidebarSubmenu.module.css)
|
|
============================================ */
|
|
|
|
.submenu {
|
|
position: relative;
|
|
border: none;
|
|
border-top-right-radius: 25px;
|
|
border-bottom-right-radius: 25px;
|
|
margin: 0;
|
|
overflow: visible; /* Allow nested submenus to expand beyond this container */
|
|
width: 250px !important;
|
|
min-width: 250px !important;
|
|
max-width: 250px !important;
|
|
box-sizing: border-box;
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
display: block; /* Ensure it's part of the document flow */
|
|
/* Ensure submenu expands parent container */
|
|
height: auto;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* Motion div inside submenu - allow nested submenus to expand */
|
|
.submenu > div[style*="overflow"] {
|
|
overflow: visible !important; /* Override inline overflow:hidden for nested submenus */
|
|
}
|
|
|
|
/* For nested submenus specifically, ensure they can expand */
|
|
.submenuList li .menu .submenu {
|
|
overflow: visible !important;
|
|
}
|
|
|
|
.submenuList li .menu .submenu > div {
|
|
overflow: visible !important;
|
|
}
|
|
|
|
.submenuLineContainer {
|
|
display: flex; /* Flex column - same as .sidebar for consistent behavior */
|
|
flex-direction: column; /* Stack items vertically */
|
|
align-items: flex-start; /* Match .sidebar alignment */
|
|
padding: 0;
|
|
margin: 0;
|
|
overflow: visible; /* Allow nested submenus to expand */
|
|
width: 100%; /* Full width */
|
|
}
|
|
|
|
.submenuList {
|
|
margin: 0;
|
|
flex-grow: 1;
|
|
list-style: none;
|
|
padding: 0;
|
|
overflow: visible; /* Allow nested submenus to expand beyond container */
|
|
}
|
|
|
|
.submenuList li {
|
|
width: 100%;
|
|
color: #181818;
|
|
margin: 0;
|
|
position: relative;
|
|
overflow: visible; /* Allow nested submenus to expand */
|
|
display: block; /* Block display allows nested submenus to extend properly */
|
|
}
|
|
|
|
.submenuList li a {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0 3px 0 27px; /* Base padding, indentation is added via inline styles on parent div */
|
|
background: none;
|
|
border: none;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
font-family: var(--font-family);
|
|
font-size: 0.9rem;
|
|
color: #181818;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
text-decoration: none;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.submenuList li a:hover {
|
|
background-color: var(--color-hover, rgba(0, 0, 0, 0.05));
|
|
}
|
|
|
|
.textContainer {
|
|
position: relative;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.submenuIcon {
|
|
width: 16px;
|
|
height: 16px;
|
|
color: #181818;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Horizontal layout for minimized sidebar submenus */
|
|
.submenu.minimized {
|
|
width: 100% !important;
|
|
margin: 0;
|
|
padding: 4px 0;
|
|
position: relative;
|
|
border-radius: 0;
|
|
overflow: hidden !important;
|
|
display: flex !important;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
z-index: 10 !important;
|
|
}
|
|
|
|
.submenuHorizontalContainer {
|
|
display: flex !important;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
box-sizing: border-box;
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
}
|
|
|
|
.submenuHorizontalList {
|
|
display: flex !important;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
flex-wrap: wrap;
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
}
|
|
|
|
.submenuHorizontalItem {
|
|
display: flex !important;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: auto;
|
|
height: auto;
|
|
list-style: none;
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
position: relative; /* Allow nested submenus to position correctly */
|
|
}
|
|
|
|
/* Nested SidebarItem in horizontal list - ensure it renders correctly when minimized */
|
|
.submenuHorizontalItem .menu.minimized {
|
|
width: 40px !important;
|
|
min-width: 40px !important;
|
|
max-width: 40px !important;
|
|
height: 40px !important;
|
|
display: inline-flex !important;
|
|
flex-direction: row !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.submenuHorizontalItem .menu.minimized li {
|
|
width: 40px !important;
|
|
min-width: 40px !important;
|
|
max-width: 40px !important;
|
|
height: 40px !important;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
}
|
|
|
|
/* Nested horizontal submenu should appear below the parent item */
|
|
.submenuHorizontalItem .submenuHorizontalContainer {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
margin-top: 4px;
|
|
z-index: 100;
|
|
background: var(--color-bg);
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
padding: 4px;
|
|
transform-origin: top left;
|
|
will-change: transform, opacity;
|
|
}
|
|
|
|
/* Smooth transitions for horizontal submenu items */
|
|
.submenuHorizontalItem {
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.submenuHorizontalLink {
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.submenuHorizontalLink {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 12px;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s ease;
|
|
text-decoration: none;
|
|
color: #181818 !important;
|
|
padding: 0;
|
|
margin: 0;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
overflow: visible;
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
}
|
|
|
|
.submenuHorizontalLink:hover {
|
|
background-color: var(--color-secondary);
|
|
color: white;
|
|
}
|
|
|
|
.submenuHorizontalLink:hover .submenuHorizontalIcon {
|
|
color: white !important;
|
|
}
|
|
|
|
.submenuHorizontalLink:hover .submenuHorizontalIcon svg {
|
|
color: white !important;
|
|
}
|
|
|
|
.submenuHorizontalLink:hover .submenuHorizontalIcon svg path {
|
|
fill: currentColor !important;
|
|
stroke: currentColor !important;
|
|
}
|
|
|
|
.submenuHorizontalIcon {
|
|
display: block !important;
|
|
width: 16px !important;
|
|
height: 16px !important;
|
|
padding: 0;
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
color: #181818 !important;
|
|
margin: 0;
|
|
box-sizing: border-box;
|
|
position: relative !important;
|
|
top: auto !important;
|
|
left: auto !important;
|
|
transform: none !important;
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
}
|
|
|
|
.submenuHorizontalIcon svg {
|
|
width: 16px !important;
|
|
height: 16px !important;
|
|
min-width: 16px !important;
|
|
min-height: 16px !important;
|
|
max-width: 16px !important;
|
|
max-height: 16px !important;
|
|
display: block !important;
|
|
margin: 0;
|
|
padding: 0;
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
color: #181818 !important;
|
|
}
|
|
|
|
.submenuHorizontalIcon svg path {
|
|
color: inherit !important;
|
|
fill: currentColor !important;
|
|
stroke: currentColor !important;
|
|
}
|
|
|
|
/* Ensure submenu content is visible when sidebar is minimized */
|
|
.menu.minimized .submenu.minimized,
|
|
.menu.minimized .submenu.minimized * {
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
color: #181818 !important;
|
|
}
|
|
|
|
.menu.minimized .submenuHorizontalLink,
|
|
.menu.minimized .submenuHorizontalLink * {
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
color: #181818 !important;
|
|
}
|
|
|
|
/* Active state for submenu items */
|
|
.submenuList li.active {
|
|
background-color: var(--color-secondary);
|
|
border-radius: 0 25px 25px 0;
|
|
}
|
|
|
|
.submenuList li.active a,
|
|
.submenuList li.active a span,
|
|
.submenuList li a.activeLink {
|
|
color: white !important;
|
|
}
|
|
|
|
.submenuList li.active .submenuIcon {
|
|
color: white !important;
|
|
}
|
|
|
|
/* Active state for horizontal (minimized) submenu items */
|
|
.submenuHorizontalItem.active .submenuHorizontalLink,
|
|
.submenuHorizontalLink.activeLink {
|
|
background-color: var(--color-secondary);
|
|
color: white !important;
|
|
}
|
|
|
|
.submenuHorizontalItem.active .submenuHorizontalIcon,
|
|
.submenuHorizontalLink.activeLink .submenuHorizontalIcon {
|
|
color: white !important;
|
|
}
|
|
|
|
.submenuHorizontalItem.active .submenuHorizontalIcon svg,
|
|
.submenuHorizontalLink.activeLink .submenuHorizontalIcon svg {
|
|
color: white !important;
|
|
}
|
|
|
|
.submenuHorizontalItem.active .submenuHorizontalIcon svg path,
|
|
.submenuHorizontalLink.activeLink .submenuHorizontalIcon svg path {
|
|
fill: white !important;
|
|
stroke: white !important;
|
|
}
|
|
|
|
/* Nested submenu toggle button (for navigation nodes without links) */
|
|
.nestedToggleButton {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0 3px 0 27px;
|
|
background: none;
|
|
border: none;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
font-family: var(--font-family);
|
|
font-size: 0.9rem;
|
|
color: #181818;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.nestedToggleButton:hover {
|
|
background-color: var(--color-hover, rgba(0, 0, 0, 0.05));
|
|
}
|
|
|
|
.nestedToggleButton:focus {
|
|
outline: none;
|
|
}
|
|
|
|
/* Nested arrow icon */
|
|
.nestedArrow {
|
|
transition: transform 0.2s ease;
|
|
flex-shrink: 0;
|
|
color: #181818;
|
|
}
|
|
|
|
.nestedArrow.rotated {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
/* Active state for nested toggle button */
|
|
.submenuList li.active .nestedToggleButton {
|
|
color: white !important;
|
|
}
|
|
|
|
.submenuList li.active .nestedArrow {
|
|
color: white !important;
|
|
}
|
|
|
|
/* Nested SidebarItem within submenu - ensure full width and allow submenu to extend */
|
|
.submenuList li .menu {
|
|
width: 100% !important;
|
|
min-width: 100% !important;
|
|
max-width: 100% !important;
|
|
overflow: visible !important; /* Allow nested submenus to extend */
|
|
}
|
|
|
|
.submenuList li .menu li {
|
|
width: 100% !important;
|
|
min-width: 100% !important;
|
|
max-width: 100% !important;
|
|
height: 44px; /* Set height only on the actual item li, not the wrapper */
|
|
display: flex !important; /* Ensure the item content displays correctly */
|
|
align-items: center !important;
|
|
}
|
|
|
|
/* Ensure nested submenus can expand and are visible */
|
|
.submenuList li .menu .submenu {
|
|
position: relative;
|
|
overflow: visible !important;
|
|
z-index: 10; /* Ensure nested submenu appears above other content */
|
|
}
|
|
|
|
/* Allow the sidebar container to expand when nested items are open */
|
|
.sidebar {
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|