import { LitElement, html, css } from 'lit'; import { unsafeHTML } from 'lit/directives/unsafe-html.js'; 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 extends LitElement { static properties = { data: { type: Object }, pageTree: { type: Array }, height: { type: String }, logoImage: { type: Object }, openedMenuLogoImage: { type: Object }, currentPath: { type: String }, menuOpened: { type: Boolean }, isHomePage: { 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: 80px; padding: 0 15px; 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, 250px); } .header-title-menu-closed { width: max(10vw, 75px); } .header-title-large { position: absolute; top: 200px; left: 10vw; width: 35vw; } .header-title-normal { position: static; width: max(14vw, 200px); } .nav-links { display: flex; justify-content: center; align-items: center; width: 100%; gap: 0; padding: 0 48px; } .nav-links .q-separator { background: white; width: 1px; height: 1rem; margin: auto; } .nav-links .q-btn { font-size: 0.9rem; color: white; padding: 8px 16px; cursor: pointer; background: none; border: none; border-radius: 28px; transition: background-color 0.2s; position: relative; text-decoration: none; display: inline-block; } .nav-links .q-btn:hover { background-color: rgba(255, 255, 255, 0.1); } .nav-links .q-btn:focus-visible { outline: 2px solid white; outline-offset: 2px; } .nav-links .q-btn:active::before { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.3); border-radius: inherit; pointer-events: none; } .menu-top-link { font-size: 0.9rem; color: white; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); } .q-space { flex: 1; } .q-gutter-sm { gap: 8px; } .menu-btn { background: none; border: none; padding: 8px; cursor: pointer; border-radius: 50%; font-size: 24px; display: flex; align-items: center; justify-content: center; color: white; } .menu-btn.black { color: black; } .menu-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .skip-link { position: absolute; top: -40px; left: 0; background: var(--q-primary, #1976d2); color: white; padding: 8px; text-decoration: none; z-index: 100; } .skip-link:focus { top: 0; } .menu-dropdown { position: absolute; width: 100%; background: white; z-index: 99; padding-bottom: 48px; border-left: 10px solid var(--q-primary); display: flex; } .menu-content { display: flex; width: 100%; } .menu-items-container { display: flex; width: 66.666%; flex-shrink: 0; padding-top: 20px; order: 1; } .menu-items { flex: 1; width: 100%; border-right: 1px solid lightgray; } .q-list { list-style: none; padding: 0; margin: 0; } .q-item { min-height: 40px; margin-left: 12px; padding: 0; } .q-item .q-btn { width: 100%; text-align: left; padding: 5px; border: none; background: none; cursor: pointer; transition: background-color 0.2s; position: relative; } .q-item .q-btn.bg-primary { background-color: var(--q-primary); color: white; } .q-item .q-btn.text-dark { color: #333; } .q-item .q-btn:hover { background-color: rgba(0, 0, 0, 0.05); } .q-item .q-btn.bg-primary:hover { background-color: var(--q-primary); } .q-item .q-btn:focus-visible { outline: 2px solid var(--q-primary, #1976d2); outline-offset: -2px; } .menu-sub-link { text-decoration: none; color: inherit; display: block; width: 100%; text-align: left; font-size: 0.95rem; } .back-btn { padding: 12px 16px; margin: 0; background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 8px; } .back-btn:focus-visible { outline: 2px solid var(--q-primary, #1976d2); outline-offset: 2px; } a:focus-visible { outline: 2px solid var(--q-primary, #1976d2); outline-offset: 2px; } .extra-info-container { width: 33.333%; padding: 20px; order: 2; } /* Extra info styles */ .footer { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; background-color: #fff; font-family: Arial, sans-serif; color: #333; } .social-icons { display: flex; justify-content: center; gap: 20px; margin-bottom: 15px; } .social-icon img { width: 25px; height: 25px; } .footer-links { display: flex; flex-direction: column; align-items: center; } .footer-links a { text-decoration: none; color: #333; font-size: 16px; margin: 5px 0; } .footer-links a:hover { color: #CE1212; } /* Responsive styles */ @media (max-width: 1080px) { .header-title-large { top: 110px; left: 10vw; width: 50vw; } } @media (max-width: 1439px) { .menu-content { flex-direction: column; } .menu-items-container { width: 100%; max-width: 100%; } .extra-info-container { padding: 20px; width: 100%; } } @media (max-width: 970px) { .nav-links { display: none; } .header-title-large { position: absolute; top: 110px; left: 20vw; width: 60vw; } .menu-items:not(:last-child) { display: none; } } @media (min-width: 970px) { .back-btn { display: none; } } `; constructor() { super(); this.data = data; this.pageTree = pageTree; this.height = '80px'; this.logoImage = { src: 'https://rapi.owncoding.com/api/file/3fc38g9b/am7hjy.png', alt: 'Logo', }; this.openedMenuLogoImage = { src: 'https://rapi.owncoding.com/api/file/3fc38g9b/m46rjz.png', alt: 'Logo', }; this.currentPath = currentPageRoute.path; this.menuOpened = false; this.isHomePage = this.currentPath === resolveToHref({ path: '/' }); this.menuHierarchy = []; this.selectedMenuItems = []; // Initialize menu hierarchy const pageMenu = this.getPageMenu(); this.menuHierarchy.push(pageMenu); // Find and select current menu items const currentMenuItems = this.findCurrentMenuItems(); for (let i = 0; i < currentMenuItems.length; i++) { this.selectMenuItem(currentMenuItems[i], i, false); } } connectedCallback() { super.connectedCallback(); this._handleClickOutside = this._handleClickOutside.bind(this); this._handleKeyDown = this._handleKeyDown.bind(this); document.addEventListener('click', this._handleClickOutside); this.addEventListener('keydown', this._handleKeyDown); } disconnectedCallback() { super.disconnectedCallback(); document.removeEventListener('click', this._handleClickOutside); this.removeEventListener('keydown', this._handleKeyDown); } _handleClickOutside(e) { // Check if click is outside the component (including shadow DOM) const path = e.composedPath(); if (!path.includes(this) && this.menuOpened) { this.menuOpened = false; } } _handleKeyDown(e) { // Escape key closes menu if (e.key === 'Escape' && this.menuOpened) { e.preventDefault(); this.menuOpened = false; // Return focus to menu button const menuBtn = this.shadowRoot.querySelector('.menu-btn'); if (menuBtn) menuBtn.focus(); } // Alt+M to toggle menu (shortcut key) if (e.altKey && e.key === 'm') { e.preventDefault(); this.toggleMenu(e); } } getPageMenu() { const menuItems = this.pageTree?.[0]?.children || []; return filterMenuItems(menuItems); } findCurrentMenuItems() { const currentMenuItems = []; const pageMenu = this.getPageMenu(); const findItems = (menu) => { for (const item of menu) { currentMenuItems.push(item); const isCurrent = item.href === this.currentPath || findItems(item.children || []); if (isCurrent) { return true; } else { currentMenuItems.pop(); } } return false; }; findItems(pageMenu); return currentMenuItems; } toggleMenu(e) { if (e) { e.stopPropagation(); } this.menuOpened = !this.menuOpened; } selectTopMenuItem(item, e) { if (e) { e.stopPropagation(); e.preventDefault(); } // Toggle menu open if closed, keep open if already open if (!this.menuOpened) { this.menuOpened = true; } // Reset and select the clicked item this.menuHierarchy = [this.getPageMenu()]; this.selectedMenuItems = [item]; // Add children hierarchy if exists if (item.children?.length) { this.menuHierarchy.push(item.children); } } selectMenuItem(item, idx, shouldNavigate = true, e = null) { if (e) { e.stopPropagation(); } if (item.href && shouldNavigate) { this.menuOpened = false; // Navigation will happen via the link's href } this.menuHierarchy = this.menuHierarchy.slice(0, idx + 1); this.selectedMenuItems = this.selectedMenuItems.slice(0, idx); 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) { // Compare by href and name instead of object reference for better reliability const selectedItem = this.selectedMenuItems[levelIdx]; const isSelected = selectedItem && selectedItem.href === item.href && selectedItem.name === item.name; const handleKeyDown = (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); e.stopPropagation(); if (item.children?.length) { // Item has children - expand submenu and focus first child this.selectMenuItem(item, levelIdx, false, e); // Focus first item in next level after render this.updateComplete.then(() => { const nextLevelButtons = this.shadowRoot.querySelectorAll('.menu-items .q-btn'); const nextLevelStart = this.menuHierarchy.slice(0, levelIdx + 1).reduce((acc, menu) => acc + menu.length, 0); const firstChildButton = Array.from(nextLevelButtons)[nextLevelStart]; if (firstChildButton) { firstChildButton.focus(); } }); } else if (item.href) { // Item has link - trigger navigation const link = e.currentTarget.querySelector('.menu-sub-link'); if (link) link.click(); } else { // Item with no children or link this.selectMenuItem(item, levelIdx, false, e); } } }; return html`

`; } renderMenuLevel(menu, levelIdx) { const isLastLevel = levelIdx === this.menuHierarchy.length - 1; const shouldShow = window.innerWidth >= 970 || isLastLevel; if (!shouldShow) return ''; return html` `; } renderTopNavLinks() { if (window.innerWidth <= 576 || !this.isHomePage || this.menuOpened) return ''; const pageMenu = this.getPageMenu(); const handleTopNavKeyDown = (item, e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); e.stopPropagation(); this.selectTopMenuItem(item, e); // Focus first item in menu dropdown after it opens if (item.children?.length) { this.updateComplete.then(() => { const firstMenuButton = this.shadowRoot.querySelector('.menu-items .q-btn'); if (firstMenuButton) { firstMenuButton.focus(); } }); } } }; return html` `; } render() { const toolbarClass = this.menuOpened ? 'q-toolbar bg-white top-index' : `q-toolbar top-index ${this.isHomePage ? 'gradient-dark' : 'bg-dark'}`; const logoTitleClass = this.menuOpened ? 'header-title-menu-opened' : `header-title-menu-closed ${this.isHomePage ? 'header-title-large' : 'header-title-normal'}`; const logoImage = this.menuOpened ? this.openedMenuLogoImage : this.logoImage; return html` `; } }

張愷致