/* Fixed sidebar behavior, enqueued at the theme's tablet breakpoint (761px). * Frame geometry (width, top position,
push) is theme-owned (B141). */ .ut-nav-sidebar { transform: none; } /* * Hide header-bar on desktop — sidebar er permanent synlig, så trigger * er ikke nødvendig. Trigger arver display: none automatisk via parent. * Erstatter tidligere `.ut-nav-trigger { display: none }` (v0.32.0, B052). */ .ut-nav-header-bar { display: none; } /* Desktop: show collapse chevron, hide close X */ .ut-nav-toggle .ut-nav-icon-close { display: none; } .ut-nav-toggle .ut-nav-icon-collapse { display: block; } /* ========================================================================== Collapsed state — desktop only, icon-only with tooltips. Driven by body class (set in before sidebar renders) to prevent FOUC when navigating between pages in collapsed mode. @since 0.8.0 @since 0.9.0 68px width, icon-only mode, tooltip on hover. @since 0.18.3 Selectors changed from .ut-nav-sidebar.is-collapsed to .ut-nav-sidebar-collapsed .ut-nav-sidebar for FOUC prevention. ========================================================================== */ .ut-nav-sidebar-collapsed .ut-nav-sidebar { width: 68px; } .ut-nav-sidebar-collapsed .ut-nav-sidebar-content { padding: 12px 6px; scrollbar-width: none; -ms-overflow-style: none; } .ut-nav-sidebar-collapsed .ut-nav-sidebar-content::-webkit-scrollbar { display: none; } /* Hide text elements with transition — works for ALL contexts */ .ut-nav-sidebar-collapsed .ut-nav-context-details, .ut-nav-sidebar-collapsed .ut-nav-label, .ut-nav-sidebar-collapsed .ut-nav-badge, .ut-nav-sidebar-collapsed .ut-nav-group-label { opacity: 0; width: 0; overflow: hidden; white-space: nowrap; } /* Collapsed toggle: icon-only circle, align with collapsed-sidebar width */ .ut-nav-sidebar-collapsed .ut-nav-toggle { align-self: center; justify-content: center; width: 44px; min-width: 44px; padding: 0; gap: 0; border-radius: 50%; } /* Flip chevron when collapsed (point right = expand) */ .ut-nav-sidebar-collapsed .ut-nav-toggle .ut-nav-icon-collapse { transform: rotate(180deg); } /* Show toggle tooltip on hover (mouse) or keyboard focus in collapsed state. :focus-visible (rather than :focus) ensures the tooltip only appears for keyboard users, so it does not linger after a mouse click. (5d-4 / B041 kontekst) */ .ut-nav-sidebar-collapsed .ut-nav-toggle:hover .ut-nav-tooltip, .ut-nav-sidebar-collapsed .ut-nav-toggle:focus-visible .ut-nav-tooltip { opacity: 1; } /* Collapsed header-back: show as icon-only, centered */ .ut-nav-sidebar-collapsed .ut-nav-header-back { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; } /* Show header-back tooltip on hover or keyboard focus in collapsed state. */ .ut-nav-sidebar-collapsed .ut-nav-header-back:hover .ut-nav-tooltip, .ut-nav-sidebar-collapsed .ut-nav-header-back:focus-visible .ut-nav-tooltip { opacity: 1; } /* Center menu items in collapsed */ .ut-nav-sidebar-collapsed .ut-nav-menu a { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; } /* Show tooltip on hover in collapsed state */ .ut-nav-sidebar-collapsed .ut-nav-menu-item:hover .ut-nav-tooltip { opacity: 1; } /* Also show tooltip via keyboard focus */ .ut-nav-sidebar-collapsed .ut-nav-menu-item:focus-within .ut-nav-tooltip { opacity: 1; } /* Header: center identity, shrink avatar */ .ut-nav-sidebar-collapsed .ut-nav-context-header { padding: 8px 0; border-bottom: 1px solid #f1f5f9; } .ut-nav-sidebar-collapsed .ut-nav-context-identity { justify-content: center; padding: 0; gap: 0; } .ut-nav-sidebar-collapsed .ut-nav-context-image { width: 36px; height: 36px; } .ut-nav-sidebar-collapsed .ut-nav-context-initials { width: 36px; height: 36px; font-size: 0.75rem; } /* Nav: tighter padding in collapsed, hide scrollbar */ .ut-nav-sidebar-collapsed .ut-nav-nav { padding: 8px 0; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge */ } .ut-nav-sidebar-collapsed .ut-nav-nav::-webkit-scrollbar { display: none; /* Chrome/Safari */ } /* Footer: center content, hide text */ .ut-nav-sidebar-collapsed .ut-nav-footer { padding: 8px 0 0; overflow: hidden; } .ut-nav-sidebar-collapsed .ut-nav-logout { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; } /* Collapsed C1 links: icon-only, centered */ .ut-nav-sidebar-collapsed .ut-nav-c1-link { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; } /* Show C1-link tooltip on hover or keyboard focus in collapsed state. */ .ut-nav-sidebar-collapsed .ut-nav-c1-link:hover .ut-nav-tooltip, .ut-nav-sidebar-collapsed .ut-nav-c1-link:focus-visible .ut-nav-tooltip { opacity: 1; } .ut-nav-sidebar-collapsed .ut-nav-back-link { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; } .ut-nav-sidebar-collapsed .ut-nav-back-link span { opacity: 0; width: 0; overflow: hidden; }