<div class="dynamic-page-banner {icon ? 'dynamic-page-with-icon' : ''}" role="navigation" aria-label="Page header" > {#if icon} <SvgIcon className="dynamic-page-banner-svg" href={icon} /> {/if} <h1 class="dynamic-page-title" aria-label={ariaTitle}>{title}</h1> <button type="button" class="dynamic-page-go-back" aria-label="Go back" on:click|preventDefault="onGoBack()">Back</button> </div> <Shortcut key="Backspace" on:pressed="onGoBack()"/> <style> .dynamic-page-banner { display: grid; align-items: center; margin: 20px 20px 20px; grid-template-columns: 1fr min-content; grid-column-gap: 10px; } .dynamic-page-banner.dynamic-page-with-icon { grid-template-columns: min-content 1fr min-content; } :global(.dynamic-page-banner-svg) { width: 24px; height: 24px; fill: var(--body-text-color); } .dynamic-page-title { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dynamic-page-go-back { font-size: 1.3em; color: var(--anchor-text); border: 0; padding: 0; background: none; justify-self: flex-end; } .dynamic-page-go-back:hover { text-decoration: underline; } .dynamic-page-go-back::before { content: '←'; margin-right: 5px; } @media (max-width: 767px) { .dynamic-page-banner { margin: 20px 10px 20px; } .dynamic-page-title { font-size: 1.3em; } .dynamic-page-go-back { font-size: 1.3em; } } </style> <script> import Shortcut from './shortcut/Shortcut.html' import SvgIcon from './SvgIcon.html' export default { data: () => ({ icon: void 0, ariaTitle: '' }), components: { Shortcut, SvgIcon }, methods: { onGoBack () { window.history.back() } } } </script>