98 lines
3.9 KiB
JavaScript
98 lines
3.9 KiB
JavaScript
export function mountAppBar({ onManageAccess } = {}) {
|
||
const header = document.querySelector('#site-header');
|
||
if (!header) throw new Error('Global app bar mount point is missing.');
|
||
|
||
header.innerHTML = `
|
||
<a class="brand" href="/" aria-label="Our Recipe Atlas 홈">
|
||
<span class="brand-mark brand-mark-small" aria-hidden="true">ORA</span>
|
||
<span>Our Recipe Atlas</span>
|
||
</a>
|
||
<div class="profile">
|
||
<img id="profile-image" class="avatar" alt="" hidden>
|
||
<span id="profile-name"></span>
|
||
<button id="access-menu-button" class="menu-button" type="button"
|
||
aria-label="메뉴 열기" aria-controls="access-drawer"
|
||
aria-expanded="false">
|
||
<span></span><span></span><span></span>
|
||
</button>
|
||
</div>`;
|
||
|
||
header.insertAdjacentHTML('afterend', `
|
||
<button id="drawer-backdrop" class="drawer-backdrop" type="button"
|
||
aria-label="메뉴 닫기" hidden></button>
|
||
<aside id="access-drawer" class="access-drawer" role="dialog" aria-modal="true"
|
||
aria-labelledby="drawer-title" aria-hidden="true" hidden>
|
||
<div class="drawer-heading">
|
||
<div>
|
||
<p class="section-number">MENU</p>
|
||
<h2 id="drawer-title">메뉴</h2>
|
||
</div>
|
||
<button id="close-access-drawer" class="drawer-close" type="button"
|
||
aria-label="메뉴 닫기">×</button>
|
||
</div>
|
||
<div class="drawer-account">
|
||
<strong id="drawer-user-name"></strong>
|
||
<span id="drawer-user-email"></span>
|
||
</div>
|
||
<div class="drawer-actions">
|
||
<button id="open-access-overlay" class="drawer-action" type="button" hidden>
|
||
<span>로그인 허용 계정 관리</span><small>관리자</small>
|
||
</button>
|
||
<button id="drawer-logout" class="drawer-action danger" type="button" data-logout>
|
||
로그아웃
|
||
</button>
|
||
</div>
|
||
</aside>`);
|
||
|
||
const elements = {
|
||
menuButton: document.querySelector('#access-menu-button'),
|
||
profileImage: document.querySelector('#profile-image'),
|
||
profileName: document.querySelector('#profile-name'),
|
||
drawer: document.querySelector('#access-drawer'),
|
||
closeButton: document.querySelector('#close-access-drawer'),
|
||
backdrop: document.querySelector('#drawer-backdrop'),
|
||
manageAccessButton: document.querySelector('#open-access-overlay'),
|
||
drawerUserName: document.querySelector('#drawer-user-name'),
|
||
drawerUserEmail: document.querySelector('#drawer-user-email'),
|
||
};
|
||
|
||
function setOpen(open) {
|
||
elements.menuButton.setAttribute('aria-expanded', String(open));
|
||
elements.drawer.setAttribute('aria-hidden', String(!open));
|
||
elements.drawer.hidden = !open;
|
||
elements.backdrop.hidden = !open;
|
||
document.body.classList.toggle('drawer-open', open);
|
||
if (open) elements.closeButton.focus();
|
||
else elements.menuButton.focus();
|
||
}
|
||
|
||
elements.menuButton.addEventListener('click', () => setOpen(true));
|
||
elements.closeButton.addEventListener('click', () => setOpen(false));
|
||
elements.backdrop.addEventListener('click', () => setOpen(false));
|
||
elements.manageAccessButton.addEventListener('click', () => {
|
||
setOpen(false);
|
||
if (onManageAccess) onManageAccess();
|
||
else window.location.assign('/?manage-access=1');
|
||
});
|
||
document.addEventListener('keydown', (event) => {
|
||
if (event.key === 'Escape' && !elements.drawer.hidden) setOpen(false);
|
||
});
|
||
|
||
return {
|
||
focusMenuButton() {
|
||
elements.menuButton.focus();
|
||
},
|
||
setUser(user) {
|
||
elements.profileName.textContent = user.name || user.email;
|
||
if (user.picture) {
|
||
elements.profileImage.src = user.picture;
|
||
elements.profileImage.alt = `${user.name || user.email} 프로필`;
|
||
elements.profileImage.hidden = false;
|
||
}
|
||
elements.drawerUserName.textContent = user.name || user.email;
|
||
elements.drawerUserEmail.textContent = user.email;
|
||
elements.manageAccessButton.hidden = !user.canManageAccess;
|
||
},
|
||
};
|
||
}
|