diff options
Diffstat (limited to 'src/routes/+layout.svelte')
| -rw-r--r-- | src/routes/+layout.svelte | 89 |
1 files changed, 9 insertions, 80 deletions
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index a29529d7..7fb24a50 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -20,11 +20,10 @@ import locale from '$stores/locale'; import Skeleton from '$lib/Loading/Skeleton.svelte'; import subsPlease from '$stores/subsPlease'; + import Dropdown from '$lib/Dropdown.svelte'; 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 }); @@ -73,12 +72,6 @@ }); }); - 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}`)) @@ -87,8 +80,6 @@ } </script> -<svelte:window on:click={handleClickOutside} /> - <HeadTitle /> <div id="container"> @@ -100,27 +91,14 @@ > {$locale().navigation.completed} </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> - <a href={root('/birthdays')} class="header-item"> - {$locale().tools.tool.characterBirthdays.short} - </a> - </div> - </div> + <Dropdown + items={[ + { name: $locale().navigation.subtitleSchedule, url: root('/schedule') }, + { name: $locale().navigation.newReleases, url: root('/updates') }, + { name: $locale().tools.tool.characterBirthdays.short, url: root('/birthdays') } + ]} + title={$locale().navigation.schedule} + /> <a href={root('/tools')} class="header-item">{$locale().navigation.tools}</a> <a href={root('/settings')} class="header-item">{$locale().navigation.settings}</a> @@ -266,53 +244,4 @@ 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.25s; - 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> |