import { LitElement, html, css } from 'lit'; import { data, pageTree, currentPageRoute } from '@/context'; import { resolveToHref } from '@/utils'; function filterMenuItems(items) { return items .filter(item => !item.config?.disabled_on_menu) .map(item => ({ ...item, children: item.children ? filterMenuItems(item.children) : [], })); } export default class MainHeader extends LitElement { static properties = { data: { type: Object }, pageTree: { type: Array }, currentPath: { type: String }, menuOpened: { type: Boolean }, isHome: { type: Boolean }, menuHierarchy: { type: Array }, selectedMenuItems: { type: Array }, }; static styles = css` :host { display: block; width: 100%; } .header { width: 100%; } .q-toolbar { display: flex; align-items: center; justify-content: space-between; height: 5rem; padding: 0 0.9375rem; position: relative; z-index: 1; } .bg-white { background-color: white; } .bg-dark { background-color: #1d1d1d; } .gradient-dark { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0) 100%); } .top-index { z-index: 1; } .items-center { display: flex; align-items: center; text-decoration: none; } .header-title-menu-opened { position: static; width: max(20vw, 15.625rem); } .header-title-menu-closed { width: max(10vw, 4.6875rem); } .header-title-large { position: absolute; top: 12.5rem; left: 10vw; width: 35vw; } .header-title-normal { position: static; width: max(14vw, 12.5rem); } .logo-wrap { margin: 0; padding: 0; display: inline-block; line-height: 0; vertical-align: middle; } .logo-img { width: 100%; height: 100%; object-fit: contain; display: block; } .nav-links { display: flex; justify-content: center; align-items: center; width: 100%; padding: 0 3rem; } .q-separator { background: white; width: 0.0625rem; height: 1rem; margin: auto; } .q-btn { font-size: 0.9rem; padding: 0.5rem 1rem; cursor: pointer; background: none; border: none; border-radius: 1.75rem; transition: background-color 0.2s; position: relative; text-decoration: none; display: inline-block; } .menu-top-link { color: white; text-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.9); } .q-btn:hover { background-color: rgba(255, 255, 255, 0.1); } a:focus-visible, button:focus-visible { outline: 0.1875rem solid #FFD700; outline-offset: 0.1875rem; border-radius: 0.25rem; } .q-space { flex: 1; } .q-gutter-sm { display: flex; gap: 0.5rem; } .menu-btn { background: none; border: none; padding: 0.75rem; cursor: pointer; border-radius: 50%; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; color: white; min-width: 3rem; min-height: 3rem; } .menu-btn.black { color: black; } .skip-link { position: absolute; top: -3rem; left: 0; background: #8b0000; color: white; padding: 0.625rem 0.875rem; text-decoration: none; z-index: 1000; border-radius: 0 0 0.25rem 0; } .skip-link:focus { top: 0; } .menu-dropdown { position: absolute; width: 100%; background: white; z-index: 99; padding-bottom: 3rem; border-left: 0.625rem solid var(--q-primary, #8b0000); display: flex; box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.2); } .menu-content { display: flex; width: 100%; } .menu-items-container { display: flex; width: 66.666%; flex-shrink: 0; padding-top: 1.25rem; order: 1; } .menu-items { flex: 1; width: 100%; border-right: 0.0625rem solid lightgray; } .q-list { list-style: none; padding: 0; margin: 0; } .q-item { min-height: 2.75rem; padding: 0 0.75rem; } .q-item .q-btn { width: 100%; text-align: left; padding: 0.625rem 0.75rem; color: #333; border-radius: 0.25rem; } .q-item .q-btn.bg-primary { background-color: var(--q-primary, #8b0000); color: white; } .q-item .q-btn:hover { background-color: rgba(0, 0, 0, 0.06); } .q-item .q-btn.bg-primary:hover { background-color: var(--q-primary, #8b0000); } .menu-sub-link { text-decoration: none; color: inherit; display: block; width: 100%; text-align: left; font-size: 0.95rem; } .back-btn { padding: 0.75rem 1rem; margin: 0; background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; min-height: 3rem; } .extra-info-container { width: 33.333%; padding: 1.25rem; order: 2; } .menu-extra { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.25rem; background-color: #fff; color: #333; } .social-icons { display: flex; justify-content: center; gap: 1.25rem; margin-bottom: 0.9375rem; } .social-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 3rem; min-height: 3rem; } .social-icon img { width: 1.5625rem; height: 1.5625rem; display: block; } .footer-links { display: flex; flex-direction: column; align-items: center; } .footer-links a { color: #333; font-size: 1rem; margin: 0.3125rem 0; } .footer-links a:hover { color: #CE1212; } .visually-hidden { position: absolute; width: 0.0625rem; height: 0.0625rem; padding: 0; margin: -0.0625rem; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (max-width: 67.5rem) { .header-title-large { top: 6.875rem; left: 10vw; width: 50vw; } } @media (max-width: 89.9375rem) { .menu-content { flex-direction: column; } .menu-items-container, .extra-info-container { width: 100%; max-width: 100%; } } @media (max-width: 60.625rem) { .nav-links { display: none; } .header-title-large { position: absolute; top: 6.875rem; left: 20vw; width: 60vw; } .menu-items:not(:last-child) { display: none; } } @media (min-width: 60.625rem) { .back-btn { display: none; } } `; constructor() { super(); this.data = data; this.pageTree = pageTree; this.currentPath = typeof window !== 'undefined' ? (currentPageRoute.path || window.location.pathname) : '/'; const homePath = resolveToHref({ path: '/' }); this.isHome = this.currentPath === homePath || this.currentPath === `${homePath}/`; this.menuOpened = false; this.menuHierarchy = [this.getPageMenu()]; this.selectedMenuItems = []; this.logoImage = { src: 'https://rapi.owncoding.com/api/file/3fc38g9b/am7hjy.png', alt: 'School of Law, Soochow University', }; this.openedMenuLogoImage = { src: 'https://rapi.owncoding.com/api/file/3fc38g9b/m46rjz.png', alt: 'School of Law, Soochow University', }; } connectedCallback() { super.connectedCallback(); if (typeof window !== 'undefined') { this._handleClickOutside = this._handleClickOutside.bind(this); this._handleKeyDown = this._handleKeyDown.bind(this); document.addEventListener('click', this._handleClickOutside); this.addEventListener('keydown', this._handleKeyDown); this._unwatch = currentPageRoute.watch(() => { const nextPath = currentPageRoute.path; const homePath = resolveToHref({ path: '/' }); if (this.currentPath !== nextPath) { this.currentPath = nextPath; this.isHome = nextPath === homePath || nextPath === `${homePath}/`; this.closeMenu(); } }); setTimeout(() => this.ensureSkipTarget(), 200); } } disconnectedCallback() { super.disconnectedCallback(); if (typeof window !== 'undefined') { document.removeEventListener('click', this._handleClickOutside); this.removeEventListener('keydown', this._handleKeyDown); if (this._unwatch) this._unwatch(); } } getPageMenu() { const menuItems = this.pageTree?.[0]?.children || []; return filterMenuItems(menuItems); } ensureSkipTarget() { if (typeof document === 'undefined') return null; const existing = document.getElementById('main-content'); if (existing) { if (!existing.hasAttribute('tabindex')) existing.setAttribute('tabindex', '-1'); return existing; } const target = document.querySelector('main') || document.querySelector('.q-page-container'); if (target) { target.id = 'main-content'; if (!target.hasAttribute('tabindex')) target.setAttribute('tabindex', '-1'); } return target; } handleSkipLinkClick(e) { const target = this.ensureSkipTarget(); if (!target) return; e.preventDefault(); target.focus({ preventScroll: true }); target.scrollIntoView({ block: 'start' }); } _handleClickOutside(e) { const path = e.composedPath(); if (!path.includes(this) && this.menuOpened) { this.closeMenu(false); } } _getFocusableMenuItems() { const menu = this.shadowRoot?.querySelector('#navigation-menu'); if (!menu) return []; return Array.from( menu.querySelectorAll('a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])') ).filter(el => el.offsetParent !== null); } _handleKeyDown(e) { if (!this.menuOpened) return; if (e.key === 'Escape') { e.preventDefault(); this.closeMenu(true); return; } if (e.key !== 'Tab') return; const focusables = this._getFocusableMenuItems(); if (!focusables.length) return; const first = focusables[0]; const last = focusables[focusables.length - 1]; if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); } else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); } } openMenu() { this.menuOpened = true; this.updateComplete.then(() => { const firstItem = this.shadowRoot.querySelector('#navigation-menu a, #navigation-menu button'); if (firstItem) firstItem.focus(); }); } closeMenu(restoreFocus = true) { this.menuOpened = false; if (restoreFocus) { this.updateComplete.then(() => { this.shadowRoot.querySelector('.menu-btn')?.focus(); }); } } toggleMenu(e) { if (e) e.stopPropagation(); if (this.menuOpened) { this.closeMenu(true); } else { this.openMenu(); } } selectTopMenuItem(item, e) { if (item.href && !item.children?.length) { this.closeMenu(false); return; } if (e) { e.stopPropagation(); e.preventDefault(); } this.menuHierarchy = [this.getPageMenu()]; this.selectedMenuItems = [item]; if (item.children?.length) { this.menuHierarchy.push(item.children); this.openMenu(); } } selectMenuItem(item, levelIdx, shouldNavigate = true, e = null) { if (e) e.stopPropagation(); if (item.href && shouldNavigate) { this.closeMenu(false); return; } this.menuHierarchy = this.menuHierarchy.slice(0, levelIdx + 1); this.selectedMenuItems = this.selectedMenuItems.slice(0, levelIdx); this.selectedMenuItems.push(item); if (item.children?.length) { this.menuHierarchy.push(item.children); } } goBackToParent(e) { if (e) e.stopPropagation(); this.selectedMenuItems = this.selectedMenuItems.slice(0, -1); this.menuHierarchy = this.menuHierarchy.slice(0, -1); } renderMenuItem(item, idx, levelIdx) { const selectedItem = this.selectedMenuItems[levelIdx]; const isSelected = selectedItem && selectedItem.href === item.href && selectedItem.name === item.name; const hasChildren = Boolean(item.children?.length); const itemClasses = `q-btn ${isSelected ? 'bg-primary' : ''} menu-sub-link`; if (item.href && !hasChildren) { return html`

${item.name} ${item.target === '_blank' ? html`` : ''}

`; } return html`

`; } renderMenuLevel(menu, levelIdx) { const isLastLevel = levelIdx === this.menuHierarchy.length - 1; const winWidth = typeof window !== 'undefined' ? window.innerWidth : 1200; const shouldShow = winWidth >= 970 || isLastLevel; if (!shouldShow) return ''; return html` `; } renderTopNavLinks() { const winWidth = typeof window !== 'undefined' ? window.innerWidth : 1200; if (winWidth <= 576 || !this.isHome || this.menuOpened) return ''; const pageMenu = this.getPageMenu(); return html`

${pageMenu.map((item, idx) => html` ${idx > 0 ? html`` : ''} ${item.children?.length ? html` ` : item.href ? html` ` : html` `} `)}

`; } renderExtraInfo() { return html` `; } render() { const toolbarClass = this.menuOpened ? 'q-toolbar bg-white top-index' : `q-toolbar top-index ${this.isHome ? 'gradient-dark' : 'bg-dark'}`; const logoTitleClass = this.menuOpened ? 'header-title-menu-opened' : `header-title-menu-closed ${this.isHome ? 'header-title-large' : 'header-title-normal'}`; const logoImage = this.menuOpened ? this.openedMenuLogoImage : this.logoImage; return html`

${this.renderTopNavLinks()}

${this.menuOpened ? html` ` : ''}

`; } }

MEI-YING PONG

Education

Expertise