diff options
Diffstat (limited to 'src/routes/+layout.svelte')
| -rw-r--r-- | src/routes/+layout.svelte | 81 |
1 files changed, 78 insertions, 3 deletions
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 135fa6bf..b77ae58f 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -23,6 +23,8 @@ export let data; + let dropdownOpen = false; + addMessages('en', english as unknown as LocaleDictionary); addMessages('ja', japanese as unknown as LocaleDictionary); init({ fallbackLocale: 'en', initialLocale: $settings.displayLanguage }); @@ -71,6 +73,12 @@ }); }); + const handleClickOutside = (event: any) => { + if (!event.target.closest('.dropdown')) { + dropdownOpen = false; + } + }; + $: { if ((data.url === '/' || data.url === '/completed') && !$subsPlease) fetch(root(`/api/subsplease?tz=${Intl.DateTimeFormat().resolvedOptions().timeZone}`)) @@ -79,6 +87,8 @@ } </script> +<svelte:window on:click={handleClickOutside} /> + <HeadTitle /> <div id="container"> @@ -90,8 +100,24 @@ > {$locale().navigation.completed} </a> - <a href={root('/schedule')} class="header-item">{$locale().navigation.subtitleSchedule}</a> - <a href={root('/updates')} class="header-item">{$locale().navigation.newReleases}</a> + <div class="dropdown" id="dropdown"> + <span + class="header-item dropdown-toggle" + id="dropdown-toggle" + on:click|preventDefault={() => (dropdownOpen = !dropdownOpen)} + on:keydown={() => {}} + role="button" + tabindex="0" + > + {$locale().navigation.schedule} + </span> + + <div class={`dropdown-content card card-small ${dropdownOpen ? 'dropdown-open' : ''}`}> + <a href={root('/schedule')} class="header-item">{$locale().navigation.subtitleSchedule}</a + > + <a href={root('/updates')} class="header-item">{$locale().navigation.newReleases}</a> + </div> + </div> <a href={root('/tools')} class="header-item">{$locale().navigation.tools}</a> <a href={root('/settings')} class="header-item">{$locale().navigation.settings}</a> @@ -156,7 +182,7 @@ </Notifications> </div> -<style> +<style lang="scss"> #header { font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; @@ -236,4 +262,53 @@ border-radius: 8px; box-shadow: 0 1.5px 9px var(--base01), 0 0 0 4px var(--base0E), 0 4px 30px var(--base01); } + + .dropdown { + position: relative; + display: inline-block; + } + + .dropdown-content { + display: block; + position: absolute; + min-width: max-content; + padding: 0.5em 0; + opacity: 0; + transform: translateY(-20px); + visibility: hidden; + $delay: 0.5s; + transition: opacity $delay ease, transform $delay ease, visibility 0s linear $delay; + left: 50%; + transform: translateX(-50%); + } + + .dropdown-open { + opacity: 1; + transform: translateY(0); + visibility: visible; + transition-delay: 0s, 0s, 0s; + left: 50%; + transform: translateX(-50%); + } + + .dropdown:hover .dropdown-content { + opacity: 1; + transform: translateY(0); + visibility: visible; + transition-delay: 0s, 0s, 0s; + left: 50%; + transform: translateX(-50%); + } + + .dropdown-content a { + padding: 0.5em 0.75em; + text-decoration: none; + display: block; + } + + .dropdown-content a:hover { + border-radius: 8px; + backdrop-filter: blur(160px); + background-color: var(--base01); + } </style> |