<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <!-- Introductory tw-callout --> <div class="tw-callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>SIDEBAR & TOPBAR:</strong> Application shell navigation patterns<br> <strong>PATTERNS:</strong> Sidebar | Topbar | Drawer | Submenu </p> <p class="tw:mb-0 tw:text-sm"> These patterns form the core application shell used across all pages. The tw-sidebar provides icon-based primary navigation with expandable drawer panels, while the tw-topbar provides search, context switching, and user controls. </p> </div> <!-- Live Demo Section --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Live Demo</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Interactive:</strong> Click tw-sidebar icons to open drawer panels. Click drawer items with chevrons to expand submenus. Click outside or press Escape to close. </p> </div> <!-- Application Shell Demo --> <div data-controller="sidebar"> <!-- Sidebar --> <aside class="tw-sidebar"> <!-- Logo --> <div class="tw-sidebar-logo"> <a href="#" class="tw-sidebar-logo-link"> <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M37.47 38L29.43 17.99H26.34L18.27 38H21.12L22.89 33.53H32.85L34.62 38H37.47ZM32.13 31.34H23.64L27.87 20.54L32.13 31.34Z" fill="white"/> <path d="M39 18V14H37V18H33V20H37V24H39V20H43V18H39Z" fill="#EC634B"/> </svg> </a> </div> <!-- Navigation --> <nav class="tw-sidebar-nav" role="navigation" aria-label="Main navigation"> <!-- Parents & Enquiries --> <button type="button" class="tw-sidebar-item" data-sidebar-target="item" data-action="click->sidebar#toggleDrawer" data-drawer="parents" data-label="Parents & Enquiries" aria-expanded="false"> <svg class="tw-sidebar-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M18 12C19.9875 12 21.6 10.3875 21.6 8.39998C21.6 6.41248 19.9875 4.79998 18 4.79998C16.0125 4.79998 14.4 6.41248 14.4 8.39998C14.4 10.3875 16.0125 12 18 12ZM18 5.99998C19.3238 5.99998 20.4 7.07623 20.4 8.39998C20.4 9.72373 19.3238 10.8 18 10.8C16.6763 10.8 15.6 9.72373 15.6 8.39998C15.6 7.07623 16.6763 5.99998 18 5.99998ZM7.2 12C9.52125 12 11.4 10.1212 11.4 7.79998C11.4 5.47873 9.52125 3.59998 7.2 3.59998C4.87875 3.59998 3 5.47873 3 7.79998C3 10.1212 4.87875 12 7.2 12ZM7.2 4.79998C8.85375 4.79998 10.2 6.14623 10.2 7.79998C10.2 9.45373 8.85375 10.8 7.2 10.8C5.54625 10.8 4.2 9.45373 4.2 7.79998C4.2 6.14623 5.54625 4.79998 7.2 4.79998ZM10.2038 12.75C8.95125 12.75 8.64 13.2 7.2 13.2C5.76 13.2 5.44875 12.75 4.19625 12.75C2.835 12.75 1.51125 13.3575 0.735 14.5087C0.27 15.1987 0 16.0275 0 16.92V18.6C0 19.5937 0.80625 20.4 1.8 20.4H12.6C13.5938 20.4 14.4 19.5937 14.4 18.6V16.92C14.4 16.0275 14.13 15.1987 13.665 14.5087C12.8888 13.3575 11.565 12.75 10.2038 12.75V12.75ZM13.2 18.6C13.2 18.93 12.93 19.2 12.6 19.2H1.8C1.47 19.2 1.2 18.93 1.2 18.6V16.92C1.2 16.2975 1.38375 15.6937 1.72875 15.18C2.24625 14.4112 3.16875 13.95 4.1925 13.95C5.22 13.95 5.5875 14.4 7.2 14.4C8.8125 14.4 9.18 13.95 10.2038 13.95C11.2275 13.95 12.15 14.4112 12.6675 15.18C13.0125 15.6937 13.1963 16.2975 13.1963 16.92V18.6H13.2ZM23.3888 14.2912C22.74 13.3312 21.6375 12.825 20.505 12.825C19.4625 12.825 19.2 13.2 18 13.2C16.8 13.2 16.5375 12.825 15.495 12.825C15 12.825 14.5163 12.9375 14.0663 13.1287C14.6363 13.7062 14.76 14.0137 14.8238 14.1262C15.0375 14.0662 15.2588 14.0287 15.495 14.0287C16.3125 14.0287 16.62 14.4037 18 14.4037C19.38 14.4037 19.6875 14.0287 20.505 14.0287C21.2925 14.0287 21.9975 14.3775 22.395 14.9662C22.6613 15.36 22.8037 15.825 22.8037 16.305V17.7C22.8037 17.865 22.6687 18 22.5037 18H15.6C15.6 18.6637 15.6113 18.8437 15.54 19.2H22.5C23.3288 19.2 24 18.5287 24 17.7V16.3012C24 15.555 23.775 14.865 23.3888 14.2912V14.2912Z" fill="currentColor" stroke="none"/> </svg> <span class="tw:sr-only">Parents & Enquiries</span> <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">New</span> </button> <!-- Communications & Events --> <a href="#" class="tw-sidebar-item" data-label="Communications & Events"> <svg class="tw-sidebar-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M19.1999 2.40002H4.7999C3.47615 2.40002 2.3999 3.47627 2.3999 4.80002V15.6C2.3999 16.9238 3.47615 18 4.7999 18H8.3999V21.15C8.3999 21.4163 8.6174 21.6 8.8499 21.6C8.9399 21.6 9.03365 21.5738 9.11615 21.51L13.7999 18H19.1999C20.5237 18 21.5999 16.9238 21.5999 15.6V4.80002C21.5999 3.47627 20.5237 2.40002 19.1999 2.40002ZM20.3999 15.6C20.3999 16.26 19.8599 16.8 19.1999 16.8H13.3987L13.0799 17.04L9.5999 19.65V16.8H4.7999C4.1399 16.8 3.5999 16.26 3.5999 15.6V4.80002C3.5999 4.14002 4.1399 3.60002 4.7999 3.60002H19.1999C19.8599 3.60002 20.3999 4.14002 20.3999 4.80002V15.6ZM12.8999 11.4H7.4999C7.3349 11.4 7.1999 11.535 7.1999 11.7V12.3C7.1999 12.465 7.3349 12.6 7.4999 12.6H12.8999C13.0649 12.6 13.1999 12.465 13.1999 12.3V11.7C13.1999 11.535 13.0649 11.4 12.8999 11.4ZM16.4999 7.80002H7.4999C7.3349 7.80002 7.1999 7.93502 7.1999 8.10002V8.70002C7.1999 8.86502 7.3349 9.00002 7.4999 9.00002H16.4999C16.6649 9.00002 16.7999 8.86502 16.7999 8.70002V8.10002C16.7999 7.93502 16.6649 7.80002 16.4999 7.80002Z" fill="currentColor" stroke="none"/> </svg> <span class="tw:sr-only">Communications & Events</span> </a> <!-- Registered Students --> <a href="#" class="tw-sidebar-item" data-label="Registered Students"> <svg class="tw-sidebar-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20.4 10.8C22.0575 10.8 23.4 9.45748 23.4 7.79998C23.4 6.14248 22.0575 4.79998 20.4 4.79998C18.7425 4.79998 17.4 6.14248 17.4 7.79998C17.4 9.45748 18.7425 10.8 20.4 10.8ZM20.4 5.99998C21.3938 5.99998 22.2 6.80623 22.2 7.79998C22.2 8.79373 21.3938 9.59998 20.4 9.59998C19.4063 9.59998 18.6 8.79373 18.6 7.79998C18.6 6.80623 19.4063 5.99998 20.4 5.99998ZM12 12C14.3213 12 16.2 10.1212 16.2 7.79998C16.2 5.47873 14.3213 3.59998 12 3.59998C9.67875 3.59998 7.8 5.47873 7.8 7.79998C7.8 10.1212 9.67875 12 12 12ZM12 4.79998C13.6538 4.79998 15 6.14623 15 7.79998C15 9.45373 13.6538 10.8 12 10.8C10.3463 10.8 9 9.45373 9 7.79998C9 6.14623 10.3463 4.79998 12 4.79998ZM21.15 12H19.65C19.08 12 18.5513 12.18 18.1088 12.4837C18.4613 12.7237 18.78 13.005 19.0613 13.3237C19.245 13.245 19.4438 13.2 19.65 13.2H21.15C22.0575 13.2 22.8 14.0062 22.8 15C22.8 15.33 23.07 15.6 23.4 15.6C23.73 15.6 24 15.33 24 15C24 13.3462 22.7213 12 21.15 12V12ZM3.6 10.8C5.2575 10.8 6.6 9.45748 6.6 7.79998C6.6 6.14248 5.2575 4.79998 3.6 4.79998C1.9425 4.79998 0.6 6.14248 0.6 7.79998C0.6 9.45748 1.9425 10.8 3.6 10.8ZM3.6 5.99998C4.59375 5.99998 5.4 6.80623 5.4 7.79998C5.4 8.79373 4.59375 9.59998 3.6 9.59998C2.60625 9.59998 1.8 8.79373 1.8 7.79998C1.8 6.80623 2.60625 5.99998 3.6 5.99998ZM15.0038 12.75C13.7513 12.75 13.44 13.2 12 13.2C10.56 13.2 10.2488 12.75 8.99625 12.75C7.635 12.75 6.31125 13.3575 5.535 14.5087C5.07 15.1987 4.8 16.0275 4.8 16.92V18.6C4.8 19.5937 5.60625 20.4 6.6 20.4H17.4C18.3938 20.4 19.2 19.5937 19.2 18.6V16.92C19.2 16.0275 18.93 15.1987 18.465 14.5087C17.6888 13.3575 16.365 12.75 15.0038 12.75V12.75ZM18 18.6C18 18.93 17.73 19.2 17.4 19.2H6.6C6.27 19.2 6 18.93 6 18.6V16.92C6 16.2975 6.18375 15.6937 6.52875 15.18C7.04625 14.4112 7.96875 13.95 8.9925 13.95C10.02 13.95 10.3875 14.4 12 14.4C13.6125 14.4 13.98 13.95 15.0038 13.95C16.0275 13.95 16.95 14.4112 17.4675 15.18C17.8125 15.6937 17.9963 16.2975 17.9963 16.92V18.6H18ZM5.89125 12.4837C5.445 12.18 4.91625 12 4.35 12H2.85C1.27875 12 0 13.3462 0 15C0 15.33 0.27 15.6 0.6 15.6C0.93 15.6 1.2 15.33 1.2 15C1.2 14.0062 1.9425 13.2 2.85 13.2H4.35C4.55625 13.2 4.755 13.245 4.93875 13.3237C5.22 13.005 5.5425 12.7237 5.89125 12.4837V12.4837Z" fill="currentColor" stroke="none"/> </svg> <span class="tw:sr-only">Registered Students</span> </a> <!-- Marketing (active) --> <button type="button" class="tw-sidebar-item" data-sidebar-target="item" data-action="click->sidebar#toggleDrawer" data-drawer="marketing" data-label="Marketing" aria-expanded="false"> <svg class="tw-sidebar-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M14.7461 2.38281C13.875 2.13281 12.9531 2 12 2C6.47656 2 2 6.47656 2 12C2 17.5234 6.47656 22 12 22C17.5234 22 22 17.5234 22 12C22 11.0469 21.8672 10.125 21.6172 9.25391L20.7266 10.2461C20.6836 10.293 20.6445 10.3359 20.5977 10.3789C20.6953 10.9062 20.7461 11.4453 20.7461 12C20.7461 16.832 16.8281 20.75 11.9961 20.75C7.16406 20.75 3.25 16.832 3.25 12C3.25 7.16797 7.16797 3.25 12 3.25C12.5547 3.25 13.0977 3.30078 13.6211 3.39844C13.6641 3.35547 13.707 3.3125 13.7539 3.26953L14.7461 2.38281ZM12.7266 5.79297C12.4883 5.76562 12.2461 5.75 12 5.75C8.54687 5.75 5.75 8.54687 5.75 12C5.75 15.4531 8.54687 18.25 12 18.25C15.4531 18.25 18.25 15.4531 18.25 12C18.25 11.7539 18.2344 11.5117 18.207 11.2734C18.1016 11.2656 17.9961 11.2539 17.8906 11.2383L16.9141 11.0742C16.9687 11.375 17 11.6836 17 12C17 14.7617 14.7617 17 12 17C9.23828 17 7 14.7617 7 12C7 9.23828 9.23828 7 12 7C12.3164 7 12.625 7.03125 12.9258 7.08594L12.7617 6.10937C12.7422 6.00391 12.7305 5.89844 12.7266 5.79297ZM15.3398 9.54687L18.0898 10.0039C18.7266 10.1094 19.3711 9.88281 19.8008 9.39844L21.5156 7.46875C21.9727 6.95703 21.7422 6.14453 21.0859 5.94922L18.7539 5.25L18.0508 2.91406C17.8555 2.25781 17.043 2.02734 16.5312 2.48437L14.6016 4.19922C14.1211 4.62891 13.8906 5.27344 13.9961 5.91016L14.4531 8.66016L11.5547 11.5586C11.3125 11.8008 11.3125 12.1992 11.5547 12.4414C11.7969 12.6836 12.1953 12.6836 12.4375 12.4414L15.3359 9.54297L15.3398 9.54687ZM16.4258 8.46094L18.4297 6.45703L20.2578 7.00391L18.8672 8.56641C18.7227 8.72656 18.5078 8.80469 18.2969 8.76953L16.4258 8.45703V8.46094ZM17.543 5.57422L15.5391 7.57813L15.2266 5.70703C15.1914 5.49609 15.2656 5.28125 15.4297 5.13672L16.9922 3.74609L17.5391 5.57422H17.543Z" fill="currentColor" stroke="none"/> </svg> <span class="tw:sr-only">Marketing</span> <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">128</span> </button> <!-- Enrolments --> <a href="#" class="tw-sidebar-item" data-label="Enrolments"> <svg class="tw-sidebar-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M18.6713 6.07124L15.525 2.92499C15.1875 2.58749 14.73 2.39624 14.2538 2.39624H6.60005C5.6063 2.39999 4.80005 3.20624 4.80005 4.19999V19.8C4.80005 20.7937 5.6063 21.6 6.60005 21.6H17.4C18.3938 21.6 19.2 20.7937 19.2 19.8V7.34624C19.2 6.86999 19.0088 6.40874 18.6713 6.07124ZM17.8238 6.92249C17.9025 7.00124 17.955 7.09499 17.9813 7.19999H14.4V3.61874C14.505 3.64499 14.5988 3.69749 14.6775 3.77624L17.8238 6.92249ZM17.4 20.4H6.60005C6.27005 20.4 6.00005 20.13 6.00005 19.8V4.19999C6.00005 3.86999 6.27005 3.59999 6.60005 3.59999H13.2V7.49999C13.2 7.99874 13.6013 8.39999 14.1 8.39999H18V19.8C18 20.13 17.73 20.4 17.4 20.4ZM15.6 11.25V11.55C15.6 11.7975 15.3975 12 15.15 12H8.85005C8.60255 12 8.40005 11.7975 8.40005 11.55V11.25C8.40005 11.0025 8.60255 10.8 8.85005 10.8H15.15C15.3975 10.8 15.6 11.0025 15.6 11.25ZM15.6 13.65V13.95C15.6 14.1975 15.3975 14.4 15.15 14.4H8.85005C8.60255 14.4 8.40005 14.1975 8.40005 13.95V13.65C8.40005 13.4025 8.60255 13.2 8.85005 13.2H15.15C15.3975 13.2 15.6 13.4025 15.6 13.65ZM15.6 16.05V16.35C15.6 16.5975 15.3975 16.8 15.15 16.8H8.85005C8.60255 16.8 8.40005 16.5975 8.40005 16.35V16.05C8.40005 15.8025 8.60255 15.6 8.85005 15.6H15.15C15.3975 15.6 15.6 15.8025 15.6 16.05Z" fill="currentColor" stroke="none"/> </svg> <span class="tw:sr-only">Enrolments</span> <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">6</span> </a> </nav> <!-- Bottom Section --> <div class="tw-sidebar-bottom"> <button type="button" class="tw-sidebar-item" data-sidebar-target="item" data-action="click->sidebar#toggleDrawer" data-drawer="settings" data-label="Settings" aria-expanded="false"> <svg class="tw-sidebar-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_sidebar_settings)"> <path d="M20.1975 9.76501L20.1037 9.61876C19.95 9.63001 19.8 9.63001 19.6462 9.61876L19.5525 9.76876C19.335 10.1138 18.9112 10.2713 18.5212 10.1475C18.0037 9.98626 17.6587 9.81751 17.235 9.46876C16.8975 9.19126 16.815 8.70751 17.0325 8.32876L17.1262 8.16751C17.04 8.04001 16.965 7.90876 16.8975 7.77001H16.5562C16.1212 7.77001 15.7537 7.46251 15.6712 7.03501C15.5737 6.52126 15.57 6.12751 15.675 5.59126C15.7537 5.16751 16.1287 4.86001 16.56 4.86001H16.8975C16.965 4.72126 17.04 4.59001 17.1262 4.46251L17.0287 4.29376C16.8112 3.91876 16.8937 3.44251 17.2237 3.15751C17.6212 2.81626 17.9625 2.62126 18.48 2.44501C18.885 2.30626 19.3312 2.47126 19.5487 2.84251L19.6462 3.00751C19.8 2.99626 19.95 2.99626 20.1037 3.00751L20.2012 2.84251C20.4187 2.47126 20.865 2.30626 21.2737 2.44876C21.7725 2.61751 22.11 2.80876 22.53 3.16501C22.86 3.44626 22.9387 3.92251 22.7212 4.29751L22.6237 4.46251C22.71 4.59001 22.785 4.72126 22.8525 4.86001H23.0437C23.4787 4.86001 23.8462 5.16751 23.9287 5.59501C24.0262 6.10876 24.03 6.50251 23.925 7.03876C23.8462 7.46251 23.4712 7.77001 23.04 7.77001H22.8525C22.785 7.90876 22.71 8.04001 22.6237 8.16751L22.7175 8.32876C22.9387 8.71126 22.8487 9.19501 22.5112 9.47251C22.11 9.80251 21.765 9.97501 21.2362 10.1438C20.8425 10.2675 20.415 10.1138 20.1975 9.76501ZM20.655 8.47126L21.0525 9.15751C21.3037 9.05251 21.5362 8.91751 21.7537 8.75251L21.3562 8.06626L21.5962 7.78501C21.7762 7.57126 21.9187 7.33126 22.0087 7.06876L22.1325 6.72001H22.9237C22.9575 6.45376 22.9575 6.18001 22.9237 5.91376H22.1325L22.0087 5.56501C21.915 5.30251 21.7762 5.06251 21.5962 4.84876L21.3562 4.56751L21.75 3.87751C21.5362 3.71251 21.3 3.57751 21.0487 3.47251L20.6512 4.15876L20.2875 4.09126C20.0137 4.03876 19.7325 4.03876 19.4587 4.09126L19.095 4.15876L18.6975 3.47251C18.45 3.57376 18.2137 3.71251 18 3.87751L18.3975 4.56376L18.1575 4.84501C17.9775 5.05876 17.835 5.29876 17.745 5.56126L17.6212 5.91001H16.83C16.7962 6.17626 16.7962 6.45001 16.83 6.71626H17.6212L17.745 7.06501C17.8387 7.32751 17.9775 7.56751 18.1575 7.78126L18.3975 8.06251L18 8.75251C18.2137 8.91751 18.45 9.05251 18.7012 9.15751L19.0987 8.47126L19.4625 8.53876C19.7362 8.59126 20.0175 8.59126 20.2912 8.53876L20.655 8.47126ZM5.44875 19.44V18.255C4.965 18.0488 4.5075 17.7825 4.08375 17.4638L3.0525 18.06C2.685 18.27 2.22375 18.1988 1.93875 17.8875C1.03125 16.9013 0.494998 16.0313 0.0412476 14.5838C-0.0862524 14.1825 0.0824976 13.7475 0.446248 13.5338L1.47 12.9375C1.40625 12.4125 1.40625 11.8838 1.47 11.3588L0.446248 10.7663C0.0824976 10.5563 -0.0862524 10.1175 0.0412476 9.71626C0.494998 8.27626 1.02375 7.40626 1.93875 6.41251C2.22375 6.10126 2.68875 6.03001 3.0525 6.24001L4.08 6.83626C4.50375 6.51751 4.96125 6.25501 5.445 6.04501V4.86001C5.445 4.43626 5.7375 4.07251 6.15 3.98251C7.45125 3.69001 8.475 3.65626 9.96375 3.98251C10.3762 4.07251 10.6725 4.44001 10.6725 4.86001V6.04501C11.1562 6.25126 11.6137 6.51751 12.0375 6.83251L13.065 6.24001C13.4325 6.03001 13.8975 6.10126 14.1825 6.41251C15.1912 7.52251 15.7387 8.50876 16.1362 9.73126C16.2637 10.125 16.1062 10.5525 15.7537 10.77L14.8162 11.3625C14.88 11.8875 14.88 12.4163 14.8162 12.9413L15.87 13.5975C16.1925 13.8 16.3575 14.1825 16.275 14.5538C16.0162 15.7275 15.0375 16.9763 14.1787 17.8988C13.8937 18.2063 13.4325 18.2738 13.0687 18.0638L12.0375 17.4675C11.6137 17.7863 11.1562 18.0488 10.6725 18.2588V19.4438C10.6725 19.8638 10.38 20.2313 9.9675 20.3213C8.56125 20.6325 7.53375 20.6288 6.14625 20.3213C5.74125 20.2275 5.44875 19.86 5.44875 19.44ZM6.64875 19.2075C7.57875 19.395 8.5425 19.395 9.4725 19.2075V17.4188L9.87375 17.2763C10.5037 17.055 11.085 16.7175 11.595 16.2825L11.9175 16.005L13.47 16.9013C14.1 16.185 14.745 15.3525 15.0487 14.4563L13.4962 13.56L13.575 13.1438C13.695 12.4838 13.695 11.8125 13.575 11.1525L13.4962 10.7363L15.0487 9.84001C14.745 8.94376 14.1 8.10751 13.47 7.39501L11.9175 8.29126L11.595 8.01376C11.085 7.57501 10.5075 7.24126 9.87375 7.02001L9.4725 6.87751V5.09251C8.5425 4.90501 7.57875 4.90501 6.64875 5.09251V6.88126L6.2475 7.02376C5.6175 7.24501 5.03625 7.58251 4.52625 8.01751L4.20375 8.29501L2.65125 7.39876C2.02336 8.11254 1.54288 8.94349 1.2375 9.84376L2.79 10.74L2.71125 11.1563C2.59125 11.8163 2.59125 12.4875 2.71125 13.1475L2.79 13.5638L1.2375 14.46C1.54125 15.3563 2.02125 16.1925 2.65125 16.905L4.20375 16.0088L4.52625 16.2863C5.03625 16.725 5.61375 17.0588 6.2475 17.28L6.64875 17.4225V19.2075ZM8.08875 15.2588C6.375 15.2588 4.98 13.8638 4.98 12.15C4.98 10.4363 6.375 9.04126 8.08875 9.04126C9.8025 9.04126 11.1975 10.4363 11.1975 12.15C11.1975 13.8638 9.8025 15.2588 8.08875 15.2588ZM8.08875 10.2413C7.03875 10.2413 6.18 11.0963 6.18 12.15C6.18 13.2038 7.035 14.0588 8.08875 14.0588C9.13875 14.0588 9.9975 13.2038 9.9975 12.15C9.9975 11.0963 9.1425 10.2413 8.08875 10.2413ZM20.1975 21.18L20.1037 21.0338C19.95 21.045 19.8 21.045 19.6462 21.0338L19.5525 21.1838C19.335 21.5288 18.9112 21.6863 18.5212 21.5625C18.0037 21.4013 17.6587 21.2325 17.235 20.8838C16.8975 20.6063 16.815 20.1225 17.0325 19.7438L17.1262 19.5825C17.04 19.455 16.965 19.3238 16.8975 19.185H16.5562C16.1212 19.185 15.7537 18.8775 15.6712 18.45C15.5737 17.9363 15.57 17.5425 15.675 17.0063C15.7537 16.5825 16.1287 16.275 16.56 16.275H16.8975C16.965 16.1363 17.04 16.005 17.1262 15.8775L17.0287 15.7088C16.8112 15.3338 16.8937 14.8575 17.2237 14.5725C17.6212 14.2313 17.9625 14.0363 18.48 13.86C18.885 13.7213 19.3312 13.8863 19.5487 14.2575L19.6462 14.4225C19.8 14.4113 19.95 14.4113 20.1037 14.4225L20.2012 14.2575C20.4187 13.8863 20.865 13.7213 21.2737 13.8638C21.7725 14.0325 22.11 14.2238 22.53 14.58C22.86 14.8613 22.9387 15.3375 22.7212 15.7125L22.6237 15.8775C22.71 16.005 22.785 16.1363 22.8525 16.275H23.0437C23.4787 16.275 23.8462 16.5825 23.9287 17.01C24.0262 17.5238 24.03 17.9175 23.925 18.4538C23.8462 18.8775 23.4712 19.185 23.04 19.185H22.8525C22.785 19.3238 22.71 19.455 22.6237 19.5825L22.7175 19.7438C22.9387 20.1263 22.8487 20.61 22.5112 20.8875C22.11 21.2175 21.765 21.39 21.2362 21.5588C20.8425 21.6788 20.415 21.525 20.1975 21.18ZM20.655 19.8825L21.0525 20.5688C21.3037 20.4638 21.5362 20.3288 21.7537 20.1638L21.3562 19.4775L21.5962 19.1963C21.7762 18.9825 21.9187 18.7425 22.0087 18.48L22.1325 18.1313H22.9237C22.9575 17.865 22.9575 17.5913 22.9237 17.325H22.1325L22.0087 16.9763C21.915 16.7138 21.7762 16.4738 21.5962 16.26L21.3562 15.9788L21.7537 15.2925C21.54 15.1275 21.3037 14.9925 21.0525 14.8875L20.655 15.5738L20.2912 15.5063C20.0175 15.4538 19.7362 15.4538 19.4625 15.5063L19.0987 15.5738L18.7012 14.8875C18.45 14.9925 18.2175 15.1275 18 15.2925L18.3975 15.9788L18.1575 16.26C17.9775 16.4738 17.835 16.7138 17.745 16.9763L17.6212 17.325H16.83C16.7962 17.5913 16.7962 17.865 16.83 18.1313H17.6212L17.745 18.48C17.8387 18.7425 17.9775 18.9825 18.1575 19.1963L18.3975 19.4775L18 20.1638C18.2137 20.3288 18.45 20.4638 18.7012 20.5688L19.0987 19.8825L19.4625 19.95C19.7362 20.0025 20.0175 20.0025 20.2912 19.95L20.655 19.8825ZM21 17.7C21 17.0363 20.4637 16.5 19.8 16.5C19.1362 16.5 18.6 17.0363 18.6 17.7C18.6 18.3638 19.1362 18.9 19.8 18.9C20.4637 18.9 21 18.3638 21 17.7ZM21 6.28876C21 5.62501 20.4637 5.08876 19.8 5.08876C19.1362 5.08876 18.6 5.62501 18.6 6.28876C18.6 6.95251 19.1362 7.48876 19.8 7.48876C20.4637 7.48876 21 6.94876 21 6.28876Z" fill="currentColor" stroke="none"/> </g> <defs> <clipPath id="clip0_sidebar_settings"> <rect width="24" height="24" fill="currentColor" stroke="none"/> </clipPath> </defs> </svg> <span class="tw:sr-only">Settings</span> </button> </div> </aside> <!-- Parents & Enquiries Drawer --> <div class="tw-sidebar-drawer" data-sidebar-target="drawer" data-drawer-id="parents" aria-label="Parents & Enquiries navigation"> <div class="tw-sidebar-drawer-header">PARENTS & ENQUIRIES</div> <nav class="tw-drawer-nav"> <a href="#" class="tw-drawer-item tw-disabled"> <span class="tw-drawer-item-text">Parents</span> </a> <a href="#" class="tw-drawer-item tw-active"> <span class="tw-drawer-item-text">Enquiries</span> </a> </nav> </div> <!-- Marketing & Events Drawer --> <div class="tw-sidebar-drawer" data-sidebar-target="drawer" data-drawer-id="marketing" aria-label="Marketing & Events navigation"> <div class="tw-sidebar-drawer-header">MARKETING & EVENTS</div> <nav class="tw-drawer-nav"> <button type="button" class="tw-drawer-item" data-action="click->sidebar#toggleSubmenu" aria-expanded="false"> <span class="tw-drawer-item-text">Marketing Campaigns</span> <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"> <path d="M6 4l4 4-4 4"></path> </svg> </button> <div class="tw-drawer-submenu" data-sidebar-target="submenu"> <a href="#" class="tw-drawer-subitem">Campaigns</a> <a href="#" class="tw-drawer-subitem">Reports</a> </div> <a href="#" class="tw-drawer-item"> <span class="tw-drawer-item-text">Workflows</span> </a> <button type="button" class="tw-drawer-item" data-action="click->sidebar#toggleSubmenu" aria-expanded="false"> <span class="tw-drawer-item-text">Emails</span> <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"> <path d="M6 4l4 4-4 4"></path> </svg> </button> <div class="tw-drawer-submenu" data-sidebar-target="submenu"> <a href="#" class="tw-drawer-subitem">Manual Emails</a> <a href="#" class="tw-drawer-subitem">Automated Emails</a> <a href="#" class="tw-drawer-subitem">Email Templates</a> </div> <a href="#" class="tw-drawer-item tw-disabled"> <span class="tw-drawer-item-text">Notifications</span> </a> <a href="#" class="tw-drawer-item tw-disabled"> <span class="tw-drawer-item-text">SMS</span> </a> <a href="#" class="tw-drawer-item"> <span class="tw-drawer-item-text">Meeting</span> </a> <button type="button" class="tw-drawer-item" data-action="click->sidebar#toggleSubmenu" aria-expanded="false"> <span class="tw-drawer-item-text">Events</span> <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"> <path d="M6 4l4 4-4 4"></path> </svg> </button> <div class="tw-drawer-submenu" data-sidebar-target="submenu"> <a href="#" class="tw-drawer-subitem">Calendar</a> <a href="#" class="tw-drawer-subitem">Guests</a> <a href="#" class="tw-drawer-subitem">Waitlists</a> <a href="#" class="tw-drawer-subitem">Forms</a> </div> <button type="button" class="tw-drawer-item" data-action="click->sidebar#toggleSubmenu" aria-expanded="false"> <span class="tw-drawer-item-text">Taster Day</span> <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"> <path d="M6 4l4 4-4 4"></path> </svg> </button> <div class="tw-drawer-submenu" data-sidebar-target="submenu"> <a href="#" class="tw-drawer-subitem">Configurations</a> <a href="#" class="tw-drawer-subitem">Submissions & Timetables</a> </div> </nav> </div> <!-- Settings Drawer --> <div class="tw-sidebar-drawer" data-sidebar-target="drawer" data-drawer-id="settings" aria-label="Settings navigation"> <div class="tw-sidebar-drawer-header">SETTINGS</div> <nav class="tw-drawer-nav"> <a href="#" class="tw-drawer-item"> <span class="tw-drawer-item-text">Application Form</span> </a> <button type="button" class="tw-drawer-item" data-action="click->sidebar#toggleSubmenu" aria-expanded="false"> <span class="tw-drawer-item-text">Subject Options</span> <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"> <path d="M6 4l4 4-4 4"></path> </svg> </button> <div class="tw-drawer-submenu" data-sidebar-target="submenu"></div> <button type="button" class="tw-drawer-item" data-action="click->sidebar#toggleSubmenu" aria-expanded="false"> <span class="tw-drawer-item-text">Form Settings</span> <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"> <path d="M6 4l4 4-4 4"></path> </svg> </button> <div class="tw-drawer-submenu" data-sidebar-target="submenu"></div> <button type="button" class="tw-drawer-item" data-action="click->sidebar#toggleSubmenu" aria-expanded="false"> <span class="tw-drawer-item-text">School Settings</span> <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"> <path d="M6 4l4 4-4 4"></path> </svg> </button> <div class="tw-drawer-submenu" data-sidebar-target="submenu"></div> <a href="#" class="tw-drawer-item"> <span class="tw-drawer-item-text">Enrolment Settings</span> </a> <a href="#" class="tw-drawer-item"> <span class="tw-drawer-item-text">Enrolment Navigator</span> </a> <button type="button" class="tw-drawer-item" data-action="click->sidebar#toggleSubmenu" aria-expanded="false"> <span class="tw-drawer-item-text">Properties</span> <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"> <path d="M6 4l4 4-4 4"></path> </svg> </button> <div class="tw-drawer-submenu" data-sidebar-target="submenu"></div> <button type="button" class="tw-drawer-item" data-action="click->sidebar#toggleSubmenu" aria-expanded="false"> <span class="tw-drawer-item-text">Security</span> <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"> <path d="M6 4l4 4-4 4"></path> </svg> </button> <div class="tw-drawer-submenu" data-sidebar-target="submenu"></div> </nav> </div> <!-- Topbar --> <header class="tw-topbar" role="banner"> <div class="tw-topbar-left"> <!-- Context Dropdown --> <div class="tw-dropdown tw-dropdown-borderless" data-controller="dropdown" data-dropdown-auto-highlight-value="true"> <button class="tw-dropdown-trigger tw-topbar-dropdown-trigger" type="button" aria-haspopup="listbox" aria-expanded="false" data-dropdown-target="trigger" data-action="click->dropdown#toggle keydown->dropdown#keydown"> <span class="tw-dropdown-label tw-dropdown-primary" data-dropdown-target="label">2024/2025 - Year 7 Main Entry</span> <svg class="tw-dropdown-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="m2 5 6 6 6-6"/> </svg> </button> <div class="tw-dropdown-menu tw-dropdown-menu-wide tw-dropdown-menu-scrollable" role="listbox" data-dropdown-target="menu" tabindex="-1"> <button class="tw-dropdown-item tw-active" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2024-y7-main"> <span class="tw-dropdown-item-text">2024/2025 - Year 7 Main Entry</span> <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" /> </svg> </button> <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2024-y7-late"> <span class="tw-dropdown-item-text">2024/2025 - Year 7 Late Entry</span> <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" /> </svg> </button> <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2024-y8"> <span class="tw-dropdown-item-text">2024/2025 - Year 8 Admissions</span> <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" /> </svg> </button> <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2024-y9"> <span class="tw-dropdown-item-text">2024/2025 - Year 9 In-Year</span> <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" /> </svg> </button> <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2025-y7-main"> <span class="tw-dropdown-item-text">2025/2026 - Year 7 Main Entry</span> <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" /> </svg> </button> <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2025-y7-late"> <span class="tw-dropdown-item-text">2025/2026 - Year 7 Late Entry</span> <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" /> </svg> </button> <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2025-y8"> <span class="tw-dropdown-item-text">2025/2026 - Year 8 Admissions</span> <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" /> </svg> </button> <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2025-y9"> <span class="tw-dropdown-item-text">2025/2026 - Year 9 In-Year</span> <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" /> </svg> </button> <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2026-y7-main"> <span class="tw-dropdown-item-text">2026/2027 - Year 7 Main Entry</span> <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" /> </svg> </button> <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2026-y8"> <span class="tw-dropdown-item-text">2026/2027 - Year 8 Admissions</span> <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" /> </svg> </button> <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2023-y12"> <span class="tw-dropdown-item-text">2023/2024 - Year 12 Sixth Form</span> <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" /> </svg> </button> <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2024-y12"> <span class="tw-dropdown-item-text">2024/2025 - Year 12 Sixth Form</span> <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" /> </svg> </button> </div> </div> <!-- Search --> <div class="tw-topbar-search"> <div class="tw-input-group tw-has-icon-start"> <i class="fa-regular fa-magnifying-glass tw-input-group-icon tw-input-group-icon-start"></i> <input type="search" class="tw-form-control" placeholder="Search..."> </div> </div> </div> <div class="tw-topbar-right"> <!-- Special Action Button --> <!-- <button type="button" class="tw-btn tw-btn-outline-warning tw-btn-heavy"> Power Up 🚀 </button> --> <button type="button" class="tw-btn tw-btn-outline-success tw-btn-multiline" data-controller="tooltip" data-tooltip-content-value="Referral Program" data-tooltip-placement-value="bottom"> <i class="fa-solid fa-gift tw-icon-16"></i> Refer<br> & Save </button> <button type="button" class="tw-btn tw-btn-outline-primary tw-btn-multiline" data-controller="tooltip" data-tooltip-content-value="Discuss Ideas & Submit Feature Requests" data-tooltip-placement-value="bottom"> <i class="fa-solid fa-users tw-icon-16"></i> Applicaa<br> Community </button> <button type="button" class="tw-btn tw-btn-outline-primary tw-btn-multiline" data-controller="tooltip" data-tooltip-content-value="Support & Feature Requests" data-tooltip-placement-value="bottom"> <i class="fa-solid fa-comment-question tw-icon-16"></i> Support<br> & Requests </button> <div class="tw-topbar-action-icons"> <!-- Icon Buttons --> <!-- <button type="button" class="tw-btn tw-btn-tertiary tw-btn-icon" aria-label="Help Center" data-controller="tooltip" data-tooltip-content-value="Help Center" data-tooltip-placement-value="bottom"> <i class="fa-solid fa-comment-question tw-icon-16"></i> </button> --> <!-- <button type="button" class="tw-btn tw-btn-tertiary tw-btn-icon" aria-label="Ideas Hub" data-controller="tooltip" data-tooltip-content-value="Ideas Hub" data-tooltip-placement-value="bottom"> <i class="fa-solid fa-lightbulb tw-icon-16"></i> </button> --> <!-- <button type="button" class="tw-btn tw-btn-tertiary tw-btn-icon" aria-label="Notes" data-controller="tooltip" data-tooltip-content-value="Notes" data-tooltip-placement-value="bottom"> <i class="fa-solid fa-note-sticky tw-icon-16"></i> </button> --> <button type="button" class="tw-btn tw-btn-tertiary tw-btn-icon topbar-notification-btn" aria-label="Notifications" data-controller="tooltip" data-tooltip-content-value="Notification" data-tooltip-placement-value="bottom"> <i class="fa-solid fa-bell tw-icon-16"></i> </button> </div> <div class="tw-topbar-divider"></div> <!-- User Avatar Dropdown --> <div class="tw-dropdown tw-dropdown-icon tw-dropdown-borderless" data-controller="dropdown"> <button type="button" class="tw-dropdown-trigger tw-topbar-avatar" aria-label="User menu" aria-haspopup="true" aria-expanded="false" data-dropdown-target="trigger" data-action="click->dropdown#toggle keydown->dropdown#keydown"> <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=72&h=72&fit=crop&crop=face" alt=""> <i class="fa-solid fa-user"></i> </button> <div class="tw-dropdown-menu tw-dropdown-menu-end" role="menu" data-dropdown-target="menu" tabindex="-1"> <div class="tw-dropdown-header">John Smith</div> <div class="tw-dropdown-divider"></div> <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select"> <i class="fa-regular fa-circle-sterling tw-dropdown-item-icon"></i> <span class="tw-dropdown-item-text">Referrals & billing</span> </button> <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select"> <i class="fa-regular fa-lock tw-dropdown-item-icon"></i> <span class="tw-dropdown-item-text">Password & security</span> </button> <div class="tw-dropdown-divider"></div> <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select"> <i class="fa-regular fa-layer-group tw-dropdown-item-icon"></i> <span class="tw-dropdown-item-text">Multiple form</span> </button> <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select"> <i class="fa-regular fa-envelope tw-dropdown-item-icon"></i> <span class="tw-dropdown-item-text">Email preferences</span> </button> <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select"> <i class="fa-regular fa-right-from-bracket tw-dropdown-item-icon"></i> <span class="tw-dropdown-item-text">Logout</span> </button> </div> </div> </div> </header> <!-- Content Area Placeholder --> <div class="tw:bg-background tw:relative tw:mt-2 tw:p-0 tw:pt-[0.0001px] tw:overflow-hidden"> <div class="tw-sidebar-topbar-content-offset"> <div class="tw:absolute tw:top-0 tw:left-0 tw:w-full tw:h-16 tw:border-dotted tw:border tw:border-red-500"></div> <div class="tw:absolute tw:top-0 tw:left-0 tw:w-16 tw:h-full tw:border-dotted tw:border tw:border-red-500"></div> <div class="tw:bg-white tw:p-6 tw:w-full"> <h1 class="tw-h3 tw:mb-2">Page Content Area</h1> <p class="text-muted">This area demonstrates the content offset when both tw-sidebar and tw-topbar are present.</p> </div> </div> </div> </div> <!-- Code reference --> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;div data-controller="sidebar"&gt;</code><br> <code>&nbsp;&nbsp;&lt;aside class="tw-sidebar"&gt;...&lt;/aside&gt;</code><br> <code>&nbsp;&nbsp;&lt;header class="tw-topbar"&gt;...&lt;/header&gt;</code><br> <code>&nbsp;&nbsp;&lt;div class="tw-sidebar-topbar-content-offset"&gt;...&lt;/div&gt;</code><br> <code>&lt;/div&gt;</code><br> </div> </div> <!-- Sidebar Items Section --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Sidebar Item States</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>States:</strong> Default, Hover, Active. Items tw-show tooltips on hover via <code>data-label</code> attribute. </p> </div> <div class="tw:flex tw:gap-2 tw:p-4 tw:rounded-lg" class="tw:bg-primary-500"> <div class="tw-sidebar-item" data-label="Default Item" class="tw:w-12 tw:h-12"> <i class="fa-regular fa-star tw-sidebar-icon"></i> </div> <div class="tw-sidebar-item tw-active" data-label="Active Item" class="tw:w-12 tw:h-12"> <i class="fa-regular fa-star tw-sidebar-icon"></i> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;button class="tw-sidebar-item" data-label="Tooltip Text"&gt;...&lt;/button&gt;</code><br> <code>&lt;button class="tw-sidebar-item tw-active" data-label="Tooltip Text"&gt;...&lt;/button&gt;</code> </div> </div> <!-- Drawer Item States Section --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Drawer Item States</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>States:</strong> Default, Active, Expanded, Disabled. Items with chevrons are expandable. </p> </div> <div class="tw:bg-white tw:border tw:rounded-lg" class="tw:w-[240px]"> <nav class="tw-drawer-nav"> <a href="#" class="tw-drawer-item"> <span class="tw-drawer-item-text">Default Item</span> </a> <a href="#" class="tw-drawer-item tw-active"> <span class="tw-drawer-item-text">Active Item</span> </a> <button type="button" class="tw-drawer-item tw-expanded"> <span class="tw-drawer-item-text">Expanded Item</span> <svg class="tw-drawer-chevron" viewBox="0 0 24 24"> <polyline points="9 18 15 12 9 6"/> </svg> </button> <div class="tw-drawer-submenu tw-show"> <a href="#" class="tw-drawer-subitem">Submenu Item</a> <a href="#" class="tw-drawer-subitem tw-active">Active Subitem</a> </div> <a href="#" class="tw-drawer-item tw-disabled"> <span class="tw-drawer-item-text">Disabled Item</span> </a> <button type="button" class="tw-drawer-item tw-disabled"> <span class="tw-drawer-item-text">Disabled Expandable</span> <svg class="tw-drawer-chevron" viewBox="0 0 24 24"> <polyline points="9 18 15 12 9 6"/> </svg> </button> </nav> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;a class="tw-drawer-item"&gt;...&lt;/a&gt;</code><br> <code>&lt;a class="tw-drawer-item tw-active"&gt;...&lt;/a&gt;</code><br> <code>&lt;button class="tw-drawer-item tw-expanded"&gt;...&lt;/button&gt;</code><br> <code>&lt;a class="tw-drawer-item tw-disabled"&gt;...&lt;/a&gt;</code> </div> </div> <!-- Topbar Elements Section --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Topbar Elements</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Elements:</strong> Context dropdown, Search input, Power button, Icon buttons, Avatar. </p> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;button class="tw-topbar-dropdown"&gt;...&lt;/button&gt;</code><br> <code>&lt;div class="tw-topbar-search"&gt;&lt;input class="tw-topbar-search-input"&gt;&lt;/div&gt;</code><br> <code>&lt;button class="tw-topbar-icon"&gt;...&lt;/button&gt;</code><br> <code>&lt;button class="tw-topbar-icon tw-topbar-icon-badge"&gt;...&lt;/button&gt;</code><br> <code>&lt;button class="tw-topbar-avatar"&gt;&lt;img&gt;&lt;/button&gt;</code> </div> </div> <!-- Content Offset Helpers Section --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Content Offset Helpers</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Usage:</strong> Apply these classes to main content containers to offset for fixed navigation. </p> </div> <div class="tw:space-y-3"> <div class="tw:p-3 tw:bg-neutral-100 tw:rounded"> <code>.sidebar-content-offset</code> — <span class="text-muted">margin-left: 56px (sidebar only)</span> </div> <div class="tw:p-3 tw:bg-neutral-100 tw:rounded"> <code>.sidebar-topbar-content-offset</code> — <span class="text-muted">margin-left: 56px; margin-top: 56px (both)</span> </div> </div> </div> <!-- Accessibility Section --> <div class="tw:border-t tw:pt-6 tw:mb-10"> <h2 class="tw-h4 tw:mb-4">Accessibility Features</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Built-in:</strong> ARIA attributes, keyboard navigation, focus management. </p> </div> <ul class="tw:space-y-2 tw:text-sm"> <li><strong>role="navigation"</strong> — Applied to nav containers</li> <li><strong>aria-label</strong> — Descriptive labels for navigation regions</li> <li><strong>aria-expanded</strong> — Indicates drawer/submenu open state</li> <li><strong>aria-haspopup</strong> — Indicates tw-dropdown behavior</li> <li><strong>sr-only</strong> — Screen reader text for icon-only buttons</li> <li><strong>Escape key</strong> — Closes open drawers</li> <li><strong>Click outside</strong> — Closes open drawers</li> </ul> </div> </div>