-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #508 from MuckRock/sveltekit-navigation
[SvelteKit] Global Nav
- Loading branch information
Showing
29 changed files
with
500 additions
and
46 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| <script lang="ts" context="module"> | ||
| export interface Breadcrumb { | ||
| title: string; | ||
| href?: string; | ||
| } | ||
| </script> | ||
|
|
||
| <script lang="ts"> | ||
| import { TriangleRight16 } from "svelte-octicons"; | ||
| import Logo from "../common/Logo.svelte"; | ||
| import Flex from "../common/Flex.svelte"; | ||
| export let trail: Breadcrumb[] = []; | ||
| </script> | ||
|
|
||
| <div class="breadcrumbs"> | ||
| <Flex gap={0.375} align="center"> | ||
| <slot name="root"> | ||
| <a href="/app" class="logo crumb"><Logo /></a> | ||
| </slot> | ||
| {#each trail as { href, title }} | ||
| <span class="divider"><TriangleRight16 fill="var(--gray-3)" /></span> | ||
| {#if href} | ||
| <a class="crumb" {href} {title}>{title}</a> | ||
| {:else} | ||
| <span {title} class="crumb">{title}</span> | ||
| {/if} | ||
| {/each} | ||
| </Flex> | ||
| </div> | ||
|
|
||
| <style> | ||
| .breadcrumbs { | ||
| flex: 1 0 0; | ||
| max-width: 100%; | ||
| } | ||
| .divider { | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
| .crumb { | ||
| flex: 0 1 auto; | ||
| font-size: var(--font-l); | ||
| text-decoration: none; | ||
| color: var(--gray-4); | ||
| padding: 0.25rem 0.5rem; | ||
| border-radius: 0.5rem; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| white-space: nowrap; | ||
| } | ||
| .crumb:last-child { | ||
| color: inherit; | ||
| flex: 0 0 auto; | ||
| } | ||
| a.crumb:hover { | ||
| background: var(--gray-1); | ||
| } | ||
| .logo { | ||
| flex: 0 0 auto; | ||
| height: 1.5rem; | ||
| width: auto; | ||
| box-sizing: content-box; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| <script lang="ts"> | ||
| import { _ } from "svelte-i18n"; | ||
| import Dropdown from "@/common/Dropdown2.svelte"; | ||
| import Menu from "@/common/Menu.svelte"; | ||
| import { | ||
| CommentDiscussion16, | ||
| Search16, | ||
| Code16, | ||
| Plug16, | ||
| Mail16, | ||
| Question24, | ||
| ChevronDown16, | ||
| } from "svelte-octicons"; | ||
| import SidebarItem from "../sidebar/SidebarItem.svelte"; | ||
| import Premium from "@/common/icons/Premium.svelte"; | ||
| </script> | ||
|
|
||
| <!-- Help Menu --> | ||
| <Dropdown id="help" position="right"> | ||
| <SidebarItem slot="title"> | ||
| <Question24 /> | ||
| <div class="dropdownArrow"><ChevronDown16 /></div> | ||
| </SidebarItem> | ||
| <Menu> | ||
| <SidebarItem href="/help/faq"> | ||
| <CommentDiscussion16 /> | ||
| {$_("authSection.help.faq")} | ||
| </SidebarItem> | ||
| <SidebarItem href="/help/search"> | ||
| <Search16 /> | ||
| {$_("authSection.help.searchDocs")} | ||
| </SidebarItem> | ||
| <SidebarItem href="/help/api"> | ||
| <Code16 /> | ||
| {$_("authSection.help.apiDocs")} | ||
| </SidebarItem> | ||
| <SidebarItem href="/help/add-ons"> | ||
| <Plug16 /> | ||
| {$_("authSection.help.addOns")} | ||
| </SidebarItem> | ||
| <SidebarItem href="/help/premium"> | ||
| <Premium /> | ||
| {$_("authSection.help.premium")} | ||
| </SidebarItem> | ||
| <SidebarItem href="mailto:[email protected]" target="_blank"> | ||
| <Mail16 /> | ||
| {$_("authSection.help.emailUs")} | ||
| </SidebarItem> | ||
| </Menu> | ||
| </Dropdown> | ||
|
|
||
| <style> | ||
| .dropdownArrow { | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| <script lang="ts"> | ||
| import { _, locale } from "svelte-i18n"; | ||
| import langs from "@/langs/langs.json"; | ||
| import Dropdown, { closeDropdown } from "@/common/Dropdown2.svelte"; | ||
| import Menu from "@/common/Menu.svelte"; | ||
| import SidebarItem from "$lib/components/sidebar/SidebarItem.svelte"; | ||
| import { Check16, ChevronDown16 } from "svelte-octicons"; | ||
| $: currentLang = langs.find(([_, code]) => code == $locale) ?? langs[0]; | ||
| function updateLanguage(code) { | ||
| $locale = code; | ||
| try { | ||
| localStorage.setItem("dc-locale", code); | ||
| } catch (e) {} | ||
| } | ||
| </script> | ||
|
|
||
| {#if langs.length > 1} | ||
| <!-- Language Menu --> | ||
| <Dropdown id="language" position="right"> | ||
| <SidebarItem slot="title"> | ||
| <span class="flag">{currentLang[2]}</span> | ||
| <!-- <span class="lang">{currentLang[0]}</span> --> | ||
| <div class="dropdownArrow"><ChevronDown16 /></div> | ||
| </SidebarItem> | ||
| <Menu> | ||
| {#each langs as [name, code, flag]} | ||
| <SidebarItem | ||
| on:click={() => { | ||
| updateLanguage(code); | ||
| closeDropdown("language"); | ||
| }} | ||
| hover | ||
| active={code === $locale} | ||
| > | ||
| <span class="flag">{flag}</span> | ||
| <span class="lang">{name}</span> | ||
| {#if code === $locale}<Check16 />{/if} | ||
| </SidebarItem> | ||
| {/each} | ||
| </Menu> | ||
| </Dropdown> | ||
| {/if} | ||
|
|
||
| <style> | ||
| .flag { | ||
| font-size: var(--font-l); | ||
| height: 1.5rem; | ||
| width: 1.5rem; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| } | ||
| .dropdownArrow { | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
| </style> |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.