/* _menu_partial.css - Modern Menu Styles */ :root { --_menu-primary-color: #3699FF; --_menu-secondary-color: #2A2A3C; --_menu-text-color: #f1c40f; /*#ffffff;*/ --_menu-text-muted: #ffffff; /*#9899ac;*/ --_menu-bg-color: #1e1e2d; /* Dark Sidebar */ --_menu-hover-bg: #1b1b28; --_menu-active-bg: #1e1e2d; --_menu-active-text: #3699FF; --_menu-font-family: 'Poppins', Helvetica, sans-serif; --_menu-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); --_menu-width-collapsed: 70px; --_menu-width-expanded: 260px; } /* ========================================= LAYOUT INTEGRATION - Desktop margins ========================================= */ .right_col, .top_nav, footer { margin-left: var(--_menu-width-collapsed) !important; transition: margin-left 0.3s; } /* ========================================= MOBILE LAYOUT OVERRIDES ========================================= */ @media (max-width: 768px) { /* Prevent horizontal scroll */ html, body { overflow-x: hidden !important; width: 100% !important; } /* Fix Bootstrap container max-width */ .container.body, .main_container { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin: 0 !important; overflow-x: hidden !important; } /* HIDE the original Gentelella left_col */ .left_col, .col-md-3.left_col { display: none !important; width: 0 !important; } /* Hide the menu layout container on mobile */ ._menu-layout-container { position: fixed !important; width: 0 !important; height: 0 !important; overflow: visible !important; z-index: 1040 !important; } /* Reset all content margins */ .right_col { margin-left: 0 !important; width: 100% !important; position: relative !important; /* z-index removed: setting z-index here creates a stacking context that traps Bootstrap modals inside .right_col (z-index 1), while .modal-backdrop (appended to ) has z-index 1040, causing backdrop to cover modals on mobile. The menu already has z-index 1045 which is sufficient for layering. */ } .top_nav, footer { margin-left: 0 !important; width: 100% !important; } } /* Override/Reset specific to the new container */ ._menu-container-custom { width: 100%; /* Parent layout (col-md-3) constrains this initially. We need to break out on hover */ position: relative; /* Ensure we can absolute position inside if needed, OR we use the wrapper */ } /* Base Wrapper for the partial */ ._menu-wrapper { width: var(--_menu-width-collapsed); background: var(--_menu-bg-color); font-family: var(--_menu-font-family); padding-top: 0; /* Remove top padding as header is inside */ height: 100vh; /* Full height */ position: fixed; /* Fix it to the left */ top: 0; left: 0; z-index: 1000; /* Below modals (1050) but above content */ box-shadow: 4px 0 24px 0 rgba(0, 0, 0, 0.2); /* Stronger shadow */ transition: var(--_menu-transition); overflow: hidden; /* Hide scrollbar initially */ margin-top: 0; /* Flex Transformation */ display: flex; flex-direction: column; justify-content: space-between; } /* Adjust top offset if existing layout has a top bar overlaying */ /* In Gentelella, sidebar is usually left full height. However, we are in 'col-md-3 left_col'. To truly float, we need 'position: fixed' which breaks out of col-md-3. This is good for the "expansion" effect. */ /* Header / Logo */ ._menu-header { padding: 15px 0; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.05); background: var(--_menu-bg-color); position: relative; } /* Close button - hidden by default, shown when menu is toggled open */ ._menu-close-btn { display: none; position: absolute; top: 10px; right: 10px; background: rgba(255, 255, 255, 0.1); border: none; color: #fff; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 14px; transition: all 0.3s; z-index: 10; } ._menu-close-btn:hover { background: rgba(255, 255, 255, 0.2); color: #f39c12; } /* Show close button when menu is toggled open */ body.menu-open ._menu-close-btn { display: flex; align-items: center; justify-content: center; } ._menu-logo-link { display: flex; align-items: center; justify-content: flex-start; padding-left: 15px !important; text-decoration: none !important; gap: 15px; } ._menu-logo-img { height: 35px; width: 35px; transition: all 0.3s; } ._menu-logo-text { display: flex; flex-direction: column; text-align: left; opacity: 0; width: 0; overflow: hidden; transition: all 0.3s; white-space: nowrap; } ._menu-brand { font-size: 1.2rem; font-weight: 700; color: #ffffff; } ._menu-year { font-size: 1.2rem; color: var(--_menu-text-muted); } /* New Container for Logo + Collapsed Year */ ._menu-logo-container { display: flex; flex-direction: column; align-items: center; justify-content: center; transition: all 0.3s; width: 35px; /* Fixed width to prevent logo shift */ } /* Collapsed Year Style */ ._menu-year-collapsed { font-size: 9px; /* Small font for collapsed state */ color: #ffffff; margin-top: 2px; white-space: nowrap; opacity: 1; transition: opacity 0.2s; text-align: center; width: auto; overflow: visible; } /* Hide collapsed year when menu is expanded (Hover or Open) */ body:not(.menu-closing) ._menu-wrapper:hover ._menu-year-collapsed, body.menu-open ._menu-year-collapsed { opacity: 0; width: 0; overflow: hidden; display: none; /* remove from flow */ } /* User Section */ ._menu-user-section { padding: 15px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); margin-bottom: 10px; background: var(--_menu-bg-color); } ._menu-user-link { display: flex; align-items: center; text-decoration: none !important; justify-content: flex-start; padding-left: 15px !important; /* Center 40px img in 70px width */ gap: 15px; } ._menu-user-img { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--_menu-primary-color); /* vivid border */ transition: var(--_menu-transition); } ._menu-user-info { display: flex; flex-direction: column; opacity: 0; width: 0; overflow: hidden; white-space: nowrap; transition: all 0.3s; } ._menu-user-name { font-size: 0.95rem; font-weight: 600; color: #ffffff; } ._menu-user-role { font-size: 0.8rem; color: var(--_menu-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 180px; /* Ensure it fits within the sidebar */ } /* Scroll Area */ ._menu-scroll-area { /* Dynamic Flex Height */ flex: 1; height: auto; overflow-y: auto; overflow-x: hidden; /* Optional: padding bottom if footer is not overlapping anymore, but in flex it stacks. */ } ._menu-scroll-area::-webkit-scrollbar { width: 4px; } ._menu-scroll-area::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 2px; } ._menu-scroll-area::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); } /* List Reset */ ._menu-list { list-style: none; padding: 0; margin: 0; width: 100%; } ._menu-list-item { position: relative; margin-bottom: 2px; width: 100%; } /* Menu Link / Item */ ._menu-link { display: flex; align-items: center; padding: 12px 15px !important; color: var(--_menu-text-muted); text-decoration: none !important; transition: var(--_menu-transition); cursor: pointer; white-space: nowrap; overflow: hidden; height: 45px; /* Fixed height for consistency */ } /* Icon Styling */ ._menu-icon { font-size: 1.4rem; min-width: 30px; /* Fixed width for alignment */ text-align: center; margin-right: 15px; /*color: #494b74;*/ color: var(--_menu-text-muted); transition: var(--_menu-transition); } /* Text Styling */ ._menu-text { font-size: 1.3rem; /* Adjusted for neatness */ font-weight: 500; opacity: 0; /* Hidden by default in collapsed state */ transition: opacity 0.2s ease-in-out; transform: translateX(10px); color: var(--_menu-text-muted); } /* Hover States & Active */ ._menu-link:hover { background-color: var(--_menu-hover-bg); /*color: #ffffff;*/ color: var(--_menu-text-color); } ._menu-link:hover ._menu-icon { color: var(--_menu-primary-color); } ._menu-link:hover ._menu-text { /*color: #ffffff;*/ color: var(--_menu-text-color); } ._menu-link.active, ._menu-link:active { background-color: #1b1b28; border-left: 3px solid var(--_menu-primary-color); } ._menu-link.active ._menu-icon { color: var(--_menu-primary-color); } ._menu-link.active ._menu-text { color: var(--_menu-text-color); /*color: #ffffff;*/ } /* Submenu container */ ._menu-submenu { list-style: none; padding: 5px 0; margin: 0; background: #151521; /* Darker for submenu */ display: none; overflow: hidden; } ._menu-submenu._menu-show { display: block; } /* Submenu Items */ ._menu-submenu-item { position: relative; } ._menu-submenu-link { display: flex; align-items: center; padding: 8px 10px 8px 60px; color: var(--_menu-text-muted); font-size: 1.2rem; text-decoration: none !important; transition: var(--_menu-transition); } ._menu-submenu-link:hover { /*color: #ffffff;*/ color: var(--_menu-text-color); background: rgba(255, 255, 255, 0.03); } ._menu-submenu-link::before { content: ''; position: absolute; left: 38px; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; background-color: var(--_menu-text-muted); border-radius: 50%; transition: background-color 0.3s; } ._menu-submenu-link:hover::before { background-color: var(--_menu-primary-color); } /* Expansion Logic (Hover over wrapper) */ ._menu-wrapper:hover { width: var(--_menu-width-expanded); box-shadow: 6px 0 30px 0 rgba(0, 0, 0, 0.3); } ._menu-wrapper:hover ._menu-text, ._menu-wrapper:hover ._menu-logo-text, ._menu-wrapper:hover ._menu-user-info { opacity: 1; transform: translateX(0); width: auto; overflow: visible; } /* Chevron */ ._menu-caret { margin-left: auto; font-size: 0.8rem; display: none; /* Hidden collapsed */ } ._menu-wrapper:hover ._menu-caret { display: block; } /* Footer Actions */ ._menu-footer { /* Flex Flow Layout - No Absolute needed */ position: relative; /* bottom: 0; removed */ /* left: 0; removed */ width: 100%; min-height: 50px; /* Ensure usage of min-height */ height: auto; background: #1b1b28; border-top: 1px solid rgba(255, 255, 255, 0.05); display: flex; justify-content: space-around; align-items: center; padding: 0 5px; } ._menu-footer-item { font-size: 1.2rem; color: var(--_menu-text-muted); transition: var(--_menu-transition); padding: 5px; } ._menu-footer-item:hover { color: var(--_menu-primary-color); transform: translateY(-2px); } /* Remove main wrapper scrollbar logic as we moved it to scroll-area */ ._menu-wrapper { overflow: hidden; /* Prevent double scrollbars */ } ._menu-wrapper::-webkit-scrollbar { width: 0; } /* ========================================= MENU EXPANSION - Hover and Toggle Open Both produce the same expanded appearance Note: :not(.menu-closing) prevents hover during close animation ========================================= */ body:not(.menu-closing) ._menu-wrapper:hover, body.menu-open ._menu-wrapper { width: var(--_menu-width-expanded) !important; } body:not(.menu-closing) ._menu-wrapper:hover ._menu-logo-text, body.menu-open ._menu-logo-text { opacity: 1; width: auto; } body:not(.menu-closing) ._menu-wrapper:hover ._menu-text, body.menu-open ._menu-text { opacity: 1; width: auto; } body:not(.menu-closing) ._menu-wrapper:hover ._menu-caret, body.menu-open ._menu-caret { display: block; } body:not(.menu-closing) ._menu-wrapper:hover ._menu-user-info, body.menu-open ._menu-user-info { opacity: 1; width: auto; } body:not(.menu-closing) ._menu-wrapper:hover ._menu-footer span, body.menu-open ._menu-footer span { display: inline; } body:not(.menu-closing) ._menu-wrapper:hover ._menu-footer-item, body.menu-open ._menu-footer-item { width: auto; padding: 10px 15px; } /* When closing, force collapsed state */ body.menu-closing ._menu-wrapper { width: var(--_menu-width-collapsed) !important; } /* ========================================= HAMBURGER TOGGLE BUTTON STYLES ========================================= */ #menu_toggle { display: flex; /* ALWAYS VISIBLE */ align-items: center; justify-content: center; background: none; border: none; font-size: 1.5rem; color: #5E6974; cursor: pointer; padding: 8px; margin-right: 10px; transition: color 0.3s; } #menu_toggle:hover { color: #3699FF; } /* ========================================= DESKTOP: Menu can expand via hover OR toggle ========================================= */ @media (min-width: 769px) { /* When mouse leaves AND menu is NOT toggled open, collapse submenus */ ._menu-wrapper:not(:hover):not(.menu-toggled) ._menu-nav-item.expanded ._menu-submenu { max-height: 0 !important; opacity: 0 !important; } } /* ========================================= MOBILE/TABLET: Menu toggle behavior ========================================= */ @media (max-width: 768px) { /* Show toggle button on mobile/tablet */ #menu_toggle { display: flex !important; align-items: center; justify-content: center; position: relative; z-index: 100; /* Below notification sidebar (9999) */ } /* Menu starts hidden (off-screen to the left) */ ._menu-wrapper { transform: translateX(-100%); z-index: 1045 !important; /* Below modals (1050) */ } /* When body has .menu-open class, show menu EXPANDED (like hover) */ body.menu-open ._menu-wrapper { transform: translateX(0); width: var(--_menu-width-expanded) !important; } /* Show all text elements when menu is open (like hover) */ body.menu-open ._menu-logo-text { opacity: 1; width: auto; } body.menu-open ._menu-text { opacity: 1; width: auto; } body.menu-open ._menu-caret { display: block; } body.menu-open ._menu-user-info { opacity: 1; width: auto; } body.menu-open ._menu-footer span { display: inline; } body.menu-open ._menu-footer-item { width: auto; padding: 10px 15px; } /* Overlay when menu is open */ body.menu-open::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 1040; } }