mirrors/termscp
1
0
Fork 0
mirror of https://github.com/veeso/termscp.git synced 2026-07-18 13:54:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(site): responsive mobile nav, css-driven theme icons, localizePath helper

Browse Source
This commit is contained in:
Christian Visintin
2026-06-07 21:50:21 +02:00
parent d670aed079
commit a25b17a4e5
5 changed files with 47 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
site/src/components/Nav.astro
View File

@@ -1,5 +1,5 @@
---
import { defaultLocale, useTranslations, type Locale } from "../i18n/ui";
import { localizePath, useTranslations, type Locale } from "../i18n/ui";
import ThemeToggle from "./ThemeToggle.astro";
import LangPicker from "./LangPicker.astro";
@@ -9,7 +9,7 @@ interface Props {
}
const { locale, path } = Astro.props;
const t = useTranslations(locale);
const p = (sub: string) => (locale === defaultLocale ? sub : `/${locale}${sub}`);
const p = (sub: string) => localizePath(locale, sub);
---
<header class="sticky top-0 z-50 border-b border-line bg-mantle/90 backdrop-blur">
<nav class="mx-auto flex max-w-5xl items-center justify-between px-4 py-3">
@@ -17,12 +17,26 @@ const p = (sub: string) => (locale === defaultLocale ? sub : `/${locale}${sub}`)
<img src="/assets/images/termscp.webp" alt="termscp" class="h-7 w-7" />
<span class="font-bold">termscp</span>
</a>
<div class="flex items-center gap-5 text-sm">
<!-- Desktop -->
<div class="hidden items-center gap-5 text-sm sm:flex">
<a href={p("/install")} class="text-overlay hover:text-text">{t("nav.install")}</a>
<a href={p("/user-manual")} class="text-overlay hover:text-text">{t("nav.manual")}</a>
<a href="https://github.com/veeso/termscp" class="text-overlay hover:text-text">{t("nav.github")}</a>
<LangPicker locale={locale} path={path} />
<ThemeToggle />
</div>
<!-- Mobile -->
<details class="relative sm:hidden">
<summary class="cursor-pointer list-none rounded p-2 text-text hover:bg-mantle" aria-label="Menu">☰</summary>
<div class="absolute right-0 mt-2 flex w-48 flex-col gap-3 rounded-lg border border-line bg-mantle p-4 text-sm shadow-xl">
<a href={p("/install")} class="text-overlay hover:text-text">{t("nav.install")}</a>
<a href={p("/user-manual")} class="text-overlay hover:text-text">{t("nav.manual")}</a>
<a href="https://github.com/veeso/termscp" class="text-overlay hover:text-text">{t("nav.github")}</a>
<LangPicker locale={locale} path={path} />
<ThemeToggle />
</div>
</details>
</nav>
</header>