diff options
Diffstat (limited to 'docs/src/components/Header')
| -rw-r--r-- | docs/src/components/Header/Header.astro | 7 | ||||
| -rw-r--r-- | docs/src/components/Header/LanguageSelect.tsx | 20 |
2 files changed, 10 insertions, 17 deletions
diff --git a/docs/src/components/Header/Header.astro b/docs/src/components/Header/Header.astro index 6ee66e24e..8471e4ebf 100644 --- a/docs/src/components/Header/Header.astro +++ b/docs/src/components/Header/Header.astro @@ -1,8 +1,11 @@ --- import SkipToContent from './SkipToContent.astro'; import SidebarToggle from './SidebarToggle.tsx'; +import LanguageSelect from './LanguageSelect.jsx'; import Search from "./Search.jsx"; -// import LanguageSelect from './LanguageSelect.jsx'; +import { getLanguageFromURL } from '../../util.ts'; +const {currentPage} = Astro.props; +const lang = currentPage && getLanguageFromURL(currentPage); --- <style> header { @@ -149,7 +152,7 @@ import Search from "./Search.jsx"; </a> </div> <div style="flex-grow: 1;"></div> - <!-- Add back when ready: <LanguageSelect client:idle /> --> + {lang && <LanguageSelect lang={lang} client:idle />} <div class="search-item"><Search client:idle /></div> </nav> </header>
\ No newline at end of file diff --git a/docs/src/components/Header/LanguageSelect.tsx b/docs/src/components/Header/LanguageSelect.tsx index 4eb80c2ad..8cdedb8ae 100644 --- a/docs/src/components/Header/LanguageSelect.tsx +++ b/docs/src/components/Header/LanguageSelect.tsx @@ -2,16 +2,7 @@ import type { FunctionalComponent } from 'preact'; import { h } from 'preact'; import './LanguageSelect.css'; -const SelectLanguage: FunctionalComponent<{}> = ({}) => { - let defaultValue = undefined; - if (!import.meta.env.SSR) { - const oldPathname = window.location.pathname; - const oldPathnameParts = oldPathname.split('/'); - if (/[a-z]{2}/.test(oldPathnameParts[1])) { - defaultValue = oldPathnameParts[1]; - } - } - +const LanguageSelect: FunctionalComponent<{lang: string}> = ({lang}) => { return ( <div class="language-select-wrapper"> <svg @@ -23,19 +14,18 @@ const SelectLanguage: FunctionalComponent<{}> = ({}) => { height="1.2em" width="1.2em" > - {' '} <path fill="currentColor" d="M61,24.6h7.9l18.7,51.6h-7.7l-5.4-15.5H54.3l-5.6,15.5h-7.2L61,24.6z M72.6,55l-8-22.8L56.3,55H72.6z" - />{' '} + /> <path fill="currentColor" d="M53.6,60.6c-10-4-16-9-22-14c0,0,1.3,1.3,0,0c-6,5-20,13-20,13l-4-6c8-5,10-6,19-13c-2.1-1.9-12-13-13-19h8 c4,9,10,14,10,14c10-8,10-19,10-19h8c0,0-1,13-12,24l0,0c5,5,10,9,19,13L53.6,60.6z M1.6,16.6h56v-8h-23v-7h-9v7h-24V16.6z" - />{' '} + /> </svg> <select class="language-select" - value={defaultValue} + value={lang} onChange={(e) => { const newLang = e.target.value; if (newLang === 'en') { @@ -70,4 +60,4 @@ const SelectLanguage: FunctionalComponent<{}> = ({}) => { ); }; -export default SelectLanguage; +export default LanguageSelect; |