og annað efni haldi sinni venjulegu spássíu. .menu-panel er skúffa sem rennur inn frá vinstri brún skjásins (position: fixed + transform, ekki lengur lítill listi sem opnast niður frá hamborgaratakkanum) - sjá nav.js fyrir .open/.classList rökfræðina sem stýrir bæði henni og .menu-overlay. */ .main-nav { position: relative; margin: -50px -50px 1.5rem -50px; padding: 0.75rem 50px; background: var(--theme-primary); display: flex; align-items: center; } .main-nav-title { margin-left: 0.75rem; color: var(--theme-header-text); font-size: 1.1rem; font-weight: 600; } .hamburger { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 32px; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 4px; cursor: pointer; } .hamburger span { display: block; height: 2px; background: #fff; margin: 0 6px; } /* Yfirlag sem hylur restina af síðunni þegar skúffan er opin. Smellur á yfirlagið telst "fyrir utan" skúffuna í document-click-hlusataranum í nav.js, svo það lokar henni sjálfkrafa án sérstaks click-hlustara hér. */ .menu-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 1000; } .menu-overlay.open { opacity: 1; pointer-events: auto; } .menu-panel { position: fixed; top: 0; left: 0; height: 100vh; width: 280px; max-width: 85vw; background: var(--theme-primary-dark); box-shadow: 2px 0 16px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; padding-top: 70px; overflow-y: auto; transform: translateX(-100%); transition: transform 0.25s ease; z-index: 1001; } .menu-panel.open { transform: translateX(0); } .menu-panel a, .menu-panel button.logout-link, .menu-panel button.nav-group-toggle { display: block; box-sizing: border-box; width: 100%; padding: 0.9rem 1.25rem; text-align: left; background: none; border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.15); text-decoration: none; color: var(--theme-drawer-text); cursor: pointer; font-size: 0.95rem; font-family: inherit; } .menu-panel a:hover, .menu-panel button.logout-link:hover, .menu-panel button.nav-group-toggle:hover { background: rgba(255, 255, 255, 0.08); } .menu-panel a:last-of-type { border-bottom: none; } .menu-panel button.logout-link { color: #ffcdd2; border-bottom: none; } /* "Kennari" hópur með undirliðum (Stundatafla, Fög) - sami stíll og venjulegur valmyndarliður, með ör sem snýst þegar opið/lokað. Undirliðirnir eru inndregnir og með örlítið dekkri bakgrunn til að sýna að þeir tilheyri "Kennari" fremur en að vera sjálfstæðir liðir í valmyndinni. Erfir grunn- útlitið (padding/border/letur) úr sameiginlegu reglunni hér fyrir ofan - skiptir bara úr display:block í flex svo örin lendi lengst til hægri. */ .menu-panel button.nav-group-toggle { display: flex; align-items: center; justify-content: space-between; } .nav-group-toggle::after { content: '▸'; font-size: 0.8rem; color: rgba(255, 255, 255, 0.7); transition: transform 0.15s ease; } .nav-group-toggle[aria-expanded="true"]::after { transform: rotate(90deg); } .nav-submenu[hidden] { display: none; } .nav-submenu a { padding-left: 2.5rem; background: rgba(0, 0, 0, 0.15); }