mirror of
https://github.com/rustdesk/doc.rustdesk.com.git
synced 2026-08-21 05:16:29 +00:00
227 lines
8.3 KiB
Plaintext
227 lines
8.3 KiB
Plaintext
---
|
|
import { Icon } from 'astro-icon/components';
|
|
import Logo from '~/components/Logo.astro';
|
|
import ToggleTheme from '~/components/common/ToggleTheme.astro';
|
|
import ToggleMenu from '~/components/common/ToggleMenu.astro';
|
|
import Button from '~/components/ui/Button.astro';
|
|
import { getLocalPath } from '@/i18n';
|
|
|
|
import { getHomePermalink } from '~/utils/permalinks';
|
|
import { trimSlash, getAsset } from '~/utils/permalinks';
|
|
import type { CallToAction } from '~/types';
|
|
import { getLocalePaths, LOCALES, DEFAULT_LOCALE } from '@/i18n';
|
|
|
|
interface Link {
|
|
text?: string;
|
|
href?: string;
|
|
ariaLabel?: string;
|
|
icon?: string;
|
|
}
|
|
|
|
interface MenuLink extends Link {
|
|
links?: Array<MenuLink>;
|
|
}
|
|
|
|
export interface Props {
|
|
id?: string;
|
|
links?: Array<MenuLink>;
|
|
actions?: Array<CallToAction>;
|
|
isSticky?: boolean;
|
|
isDark?: boolean;
|
|
isFullWidth?: boolean;
|
|
showToggleTheme?: boolean;
|
|
showRssFeed?: boolean;
|
|
position?: string;
|
|
showGithubStar?: boolean;
|
|
i18n?: boolean;
|
|
}
|
|
|
|
const {
|
|
id = 'header',
|
|
links = [],
|
|
actions = [],
|
|
isSticky = false,
|
|
isDark = false,
|
|
isFullWidth = false,
|
|
showToggleTheme = false,
|
|
showRssFeed = false,
|
|
showGithubStar = false,
|
|
position = 'center',
|
|
i18n = false,
|
|
} = Astro.props;
|
|
|
|
const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
|
|
---
|
|
|
|
<header
|
|
class:list={[
|
|
{ sticky: isSticky, relative: !isSticky, dark: isDark },
|
|
'top-0 z-40 flex-none mx-auto w-full border-b border-gray-50/0 transition-[opacity] ease-in-out',
|
|
]}
|
|
{...isSticky ? { 'data-aw-sticky-header': true } : {}}
|
|
{...id ? { id } : {}}
|
|
>
|
|
<div class="absolute inset-0"></div>
|
|
<div
|
|
class:list={[
|
|
'relative text-default py-3 px-3 md:px-6 mx-auto w-full',
|
|
{
|
|
'md:flex md:justify-between': position !== 'center',
|
|
},
|
|
{
|
|
'md:grid md:grid-cols-3 md:items-center': position === 'center',
|
|
},
|
|
{
|
|
'max-w-7xl': !isFullWidth,
|
|
},
|
|
]}
|
|
>
|
|
<div class:list={[{ 'mr-auto rtl:mr-0 rtl:ml-auto': position === 'right' }, 'flex justify-between']}>
|
|
<a class="flex items-center" href={getHomePermalink(getLocalPath(Astro.currentLocale || '', '/'))}>
|
|
<Logo />
|
|
</a>
|
|
<div class="flex items-center md:hidden">
|
|
<ToggleMenu />
|
|
</div>
|
|
</div>
|
|
<nav
|
|
class="items-center w-full md:w-auto hidden md:flex md:mx-5 text-default overflow-y-auto overflow-x-hidden md:overflow-y-visible md:overflow-x-auto md:justify-self-center"
|
|
aria-label="Main navigation"
|
|
>
|
|
<ul
|
|
class="flex flex-col md:flex-row md:self-center w-full md:w-auto text-xl md:text-[0.9375rem] tracking-[0.01rem] font-medium md:justify-center"
|
|
>
|
|
{
|
|
links.map(({ text, href, links }) => (
|
|
<li class={links?.length ? 'dropdown' : ''}>
|
|
{links?.length ? (
|
|
<>
|
|
<button type="button" class="hover:text-link dark:hover:text-white px-4 py-3 flex items-center">
|
|
{text}{' '}
|
|
<Icon name="tabler:chevron-down" class="w-3.5 h-3.5 ml-0.5 rtl:ml-0 rtl:mr-0.5 hidden md:inline" />
|
|
</button>
|
|
<ul class="dropdown-menu md:backdrop-blur-md dark:md:bg-dark rounded md:absolute pl-4 md:pl-0 md:hidden font-medium md:bg-white/90 md:min-w-[200px] drop-shadow-xl">
|
|
{links.map(({ text: text2, href: href2 }) => (
|
|
<li>
|
|
<a
|
|
class:list={[
|
|
'first:rounded-t last:rounded-b md:hover:bg-gray-100 hover:text-link dark:hover:text-white dark:hover:bg-gray-700 py-2 px-5 block whitespace-no-wrap',
|
|
{ 'aw-link-active': href2 === currentPath },
|
|
]}
|
|
href={href2}
|
|
>
|
|
{text2}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</>
|
|
) : (
|
|
<a
|
|
class:list={[
|
|
'hover:text-link dark:hover:text-white px-4 py-3 flex items-center',
|
|
{ 'aw-link-active': href === currentPath },
|
|
]}
|
|
href={href}
|
|
>
|
|
{text}
|
|
</a>
|
|
)}
|
|
</li>
|
|
))
|
|
}
|
|
</ul>
|
|
</nav>
|
|
<div
|
|
class:list={[
|
|
{ 'ml-auto rtl:ml-0 rtl:mr-auto': position === 'left' },
|
|
'hidden md:self-center md:flex items-center md:mb-0 fixed w-full md:w-auto md:static justify-end left-0 rtl:left-auto rtl:right-0 bottom-0 p-3 md:p-0 md:justify-self-end',
|
|
]}
|
|
>
|
|
<div class="items-center flex justify-between w-full md:w-auto">
|
|
<div class="flex">
|
|
{showToggleTheme && <ToggleTheme iconClass="w-6 h-6 md:w-5 md:h-5 md:inline-block" />}
|
|
{
|
|
i18n && (
|
|
<>
|
|
<button
|
|
id="languageSelect"
|
|
type="button"
|
|
class="text-muted dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
|
|
>
|
|
<Icon name="tabler:language" class="w-6 h-6 md:w-5 md:h-5 md:inline-block" />
|
|
</button>
|
|
<ul
|
|
id="languages"
|
|
class="md:mt-12 hidden bg-white dark:bg-dark dropdown-menu md:backdrop-blur-md dark:md:bg-dark rounded absolute pl-4 md:pl-0 font-medium md:bg-white/90 md:min-w-[200px] drop-shadow-xl"
|
|
>
|
|
{getLocalePaths(Astro.url).map(({ path, lang }) => {
|
|
let path2 = path.replace(/\/$/, '');
|
|
if (path2.indexOf('/' + DEFAULT_LOCALE) === 0) {
|
|
path2 = path2 + '?lang=en';
|
|
}
|
|
path2 = path2.replace('/' + DEFAULT_LOCALE, '');
|
|
if (!path2) {
|
|
path2 = '/';
|
|
} else if (path2[0] != '/') {
|
|
path2 = '/' + path2;
|
|
}
|
|
return (
|
|
<li>
|
|
<a
|
|
class:list={[
|
|
'first:rounded-t last:rounded-b md:hover:bg-gray-100 hover:text-link dark:hover:text-white dark:hover:bg-gray-700 py-2 px-5 block whitespace-no-wrap',
|
|
{ 'text-primary': lang === Astro.currentLocale },
|
|
]}
|
|
href={path2}
|
|
>
|
|
{LOCALES[lang].label}
|
|
</a>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</>
|
|
)
|
|
}
|
|
{
|
|
showRssFeed && (
|
|
<a
|
|
class="text-muted dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
|
|
aria-label="RSS Feed"
|
|
href={getAsset('/rss.xml')}
|
|
>
|
|
<Icon name="tabler:rss" class="w-5 h-5" />
|
|
</a>
|
|
)
|
|
}
|
|
{
|
|
showGithubStar && (
|
|
<a
|
|
target="_blank"
|
|
rel="noopener"
|
|
class="text-muted dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center ltr:ml-auto rtl:mr-auto"
|
|
title="If you like RustDesk, give us a star."
|
|
href="https://github.com/rustdesk/rustdesk"
|
|
>
|
|
<span class="w-[5.6rem] h-[1.25rem] bg-cover bg-[url(https://img.shields.io/github/stars/rustdesk/rustdesk.svg?style=social&label=Stars&maxAge=86400)]" />
|
|
</a>
|
|
)
|
|
}
|
|
</div>
|
|
{
|
|
actions?.length ? (
|
|
<span class="ml-4 rtl:ml-0 rtl:mr-4">
|
|
{actions.map((btnProps) => (
|
|
<Button {...btnProps} class="ml-2 py-2.5 px-5.5 md:px-6 font-semibold shadow-none text-sm w-auto" />
|
|
))}
|
|
</span>
|
|
) : (
|
|
''
|
|
)
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|