/** * Desktop sidebar collapse (Phase B — manual toggle). * * EVERYTHING here is gated to min-width:1025px so it can NEVER touch the * existing <=1024px off-canvas menu (the `.open` / `.menu-close` mechanism). * State lives on .teamed-sidebar-collapsed (set by sidebar-collapse.js * and pre-paint by the no-flash head script in functions.php). * * Desktop baseline this overrides (from custom.css): * .teammate-sidebar -> position:fixed; max-width:450px; padding-left:200px * .dashboard-wrapper -> left:450px; max-width:calc(100% - 650px) * A real collapse must narrow the rail AND shift the content wrapper together. */ /* The toggle button is a desktop-only affordance. */ .sidebar-collapse-toggle { display: none; } @media all and (min-width: 1025px) { /* ---- Toggle button: pinned to the rail's right edge, tracks its width ---- */ .sidebar-collapse-toggle { display: flex; align-items: center; justify-content: center; position: fixed; top: 70px; left: 426px; /* expanded rail edge; collapsed value below */ width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: #00A896; color: #fff; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); z-index: 1001; transition: left 0.2s ease; } .sidebar-collapse-toggle:hover { background: #00917f; } .sidebar-collapse-toggle i { font-size: 14px; line-height: 1; transition: transform 0.2s ease; } /* ---- Smooth the layout shift on the rail + content ---- */ .teammate-sidebar { transition: max-width 0.2s ease, padding-left 0.2s ease, width 0.2s ease; } .dashboard-wrapper { transition: left 0.2s ease, max-width 0.2s ease; } /* ===================== COLLAPSED STATE ===================== */ html.teamed-sidebar-collapsed .teammate-sidebar { max-width: 84px; width: 84px; padding-left: 0; /* Let hover tooltips escape the narrow rail (icon-only menu is short enough that we don't need the scroll container here). */ overflow: visible; } html.teamed-sidebar-collapsed .teammate-sidebar .left-nav-header-wrap { overflow: visible; padding: 28px 0 40px 0; align-items: center; } /* Content reclaims the freed space. */ html.teamed-sidebar-collapsed .dashboard-wrapper { left: 84px; max-width: calc(100% - 134px); } /* Toggle rides in to the collapsed edge + flips the chevron. */ html.teamed-sidebar-collapsed .sidebar-collapse-toggle { left: 60px; } html.teamed-sidebar-collapsed .sidebar-collapse-toggle i { transform: rotate(180deg); } /* Phase A: while a drawer is forcing the collapse, hide the manual toggle — expanding mid-drawer would fight the drawer for room. It returns on close. */ html.teamed-sidebar-forced .sidebar-collapse-toggle { display: none; } /* ---- Logo: hide the wordmark; the rail keeps its top rhythm ---- */ html.teamed-sidebar-collapsed .teammate-sidebar .left-nav-header__top { margin-bottom: 32px; text-align: center; } html.teamed-sidebar-collapsed .teammate-sidebar .left-nav-header__top img { display: none; } /* ---- Menu items: center the icon, drop the inline label ---- */ html.teamed-sidebar-collapsed .teammate-sidebar .menu-list li.menu-item { position: relative; text-align: center; } html.teamed-sidebar-collapsed .teammate-sidebar .menu-list li.menu-item .menu-link { display: flex; align-items: center; justify-content: center; gap: 0; padding: 12px 0; } html.teamed-sidebar-collapsed .teammate-sidebar .menu-list li.menu-item .menu-link i { margin: 0 !important; } /* ---- Hidden labels become hover tooltips (reuses the existing ) ---- */ html.teamed-sidebar-collapsed .teammate-sidebar .menu-list li.menu-item .menu-link span, html.teamed-sidebar-collapsed .teammate-sidebar .menu-list li.menu-item.has-sub > span { position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%); margin: 0; padding: 6px 10px; background: #1A2B2A; color: #fff !important; font-size: 13px !important; line-height: 1.2 !important; white-space: nowrap; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); opacity: 0; pointer-events: none; transition: opacity 0.12s ease; z-index: 1002; } html.teamed-sidebar-collapsed .teammate-sidebar .menu-list li.menu-item .menu-link:hover span, html.teamed-sidebar-collapsed .teammate-sidebar .menu-list li.menu-item.has-sub:hover > span { opacity: 1; } /* ---- "My Account" (has-sub): center the cog, hide chevron + submenu ---- */ html.teamed-sidebar-collapsed .teammate-sidebar .menu-list li.menu-item.has-sub { display: flex; align-items: center; justify-content: center; padding: 12px 0; } html.teamed-sidebar-collapsed .teammate-sidebar .menu-list li.menu-item.has-sub i.fal.fa-chevron-right { display: none; } html.teamed-sidebar-collapsed .teammate-sidebar .menu-list li.menu-item.has-sub .sub-menu-list { display: none !important; } /* ---- Quick links are text-only (no icons): no place on an icon rail ---- */ html.teamed-sidebar-collapsed .teammate-sidebar .menu-list .menu-item.quick-links { display: none; } /* ---- Log out: collapse the wide bordered pill into an icon square ---- */ html.teamed-sidebar-collapsed .teammate-sidebar .menu-list .logout-item { margin: 28px 0 0 0; text-align: center; } html.teamed-sidebar-collapsed .teammate-sidebar .menu-list .logout-item a.menu-link { width: 44px; min-width: 44px; padding: 10px 0; justify-content: center; } html.teamed-sidebar-collapsed .teammate-sidebar .menu-list .logout-item a.menu-link i { margin: 0 !important; } }