mirror of
https://github.com/pesde-pkg/pesde.git
synced 2025-05-04 02:23:51 +01:00
feat(website): add hamburger
This commit is contained in:
LukaDev
parent
5fb0a03297
commit
a092b73b63
9 changed files with 122 additions and 47 deletions
Binary file not shown.
|
|
@ -39,6 +39,7 @@
|
|||
"dependencies": {
|
||||
"@fontsource-variable/nunito-sans": "^5.0.14",
|
||||
"@shikijs/rehype": "^1.13.0",
|
||||
"bits-ui": "^0.21.13",
|
||||
"date-fns": "^3.6.0",
|
||||
"gunzip-maybe": "^1.4.2",
|
||||
"lucide-svelte": "^0.427.0",
|
||||
|
|
|
|||
11
website/src/lib/components/Github.svelte
Normal file
11
website/src/lib/components/Github.svelte
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<script lang="ts">
|
||||
const props = $props()
|
||||
</script>
|
||||
|
||||
<svg {...props} role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>GitHub</title>
|
||||
<path
|
||||
d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
</script>
|
||||
|
||||
<Header />
|
||||
<main class="mt-16 min-h-screen">
|
||||
<main class="min-h-screen">
|
||||
<slot></slot>
|
||||
</main>
|
||||
<Footer />
|
||||
|
|
|
|||
52
website/src/routes/Hamburger.svelte
Normal file
52
website/src/routes/Hamburger.svelte
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<script lang="ts">
|
||||
import Logo from "$lib/components/Logo.svelte"
|
||||
import Github from "$lib/components/Github.svelte"
|
||||
import Search from "./Search.svelte"
|
||||
import { Dialog } from "bits-ui"
|
||||
import { Menu, X } from "lucide-svelte"
|
||||
import { fade, fly } from "svelte/transition"
|
||||
</script>
|
||||
|
||||
<Dialog.Root>
|
||||
<Dialog.Trigger>
|
||||
<span class="sr-only">open menu</span>
|
||||
<Menu aria-hidden="true" />
|
||||
</Dialog.Trigger>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Content class="fixed inset-0 top-0 z-50 flex flex-col">
|
||||
<Dialog.Title class="sr-only">Menu</Dialog.Title>
|
||||
<div transition:fade={{ duration: 200 }} class="bg-background">
|
||||
<div class="relative z-50 flex h-14 flex-shrink-0 items-center justify-between px-4">
|
||||
<Logo class="h-7 text-primary" />
|
||||
<Dialog.Close>
|
||||
<span class="sr-only">close menu</span>
|
||||
<X aria-hidden="true" />
|
||||
</Dialog.Close>
|
||||
</div>
|
||||
<div class="px-4 py-1">
|
||||
<Search />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-grow flex-col overflow-hidden bg-background"
|
||||
transition:fade={{ duration: 200 }}
|
||||
>
|
||||
<nav class="flex h-full flex-col px-4 pt-2" transition:fly={{ y: "-2%", duration: 200 }}>
|
||||
<div class="flex flex-grow flex-col border-y py-3">
|
||||
{#snippet item(href: string, text: string)}
|
||||
<a {href} class="flex h-10 items-center rounded px-3 hover:bg-card/50">{text}</a>
|
||||
{/snippet}
|
||||
|
||||
{@render item("/docs", "Documentation")}
|
||||
{@render item("/policies", "Policies")}
|
||||
</div>
|
||||
<div class="flex items-center py-5">
|
||||
<a href="https://github.com/daimond113/pesde" target="_blank" rel="noreferrer noopener">
|
||||
<Github class="size-6" />
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</Dialog.Content>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
|
|
@ -1,42 +1,35 @@
|
|||
<script>
|
||||
import Logo from "$lib/components/Logo.svelte"
|
||||
import { Search } from "lucide-svelte"
|
||||
import Github from "$lib/components/Github.svelte"
|
||||
import Hamburger from "./Hamburger.svelte"
|
||||
import Search from "./Search.svelte"
|
||||
</script>
|
||||
|
||||
<header class="fixed inset-x-0 top-0 z-50 bg-background/80 backdrop-blur">
|
||||
<div class="mx-auto flex h-16 max-w-screen-lg items-center justify-between px-4">
|
||||
<a href="/">
|
||||
<Logo class="h-9 text-primary" />
|
||||
</a>
|
||||
<div class="hidden w-full max-w-80 md:flex">
|
||||
<form action="/search" class="w-full">
|
||||
<label
|
||||
class="relative flex h-9 w-full items-center overflow-hidden rounded border border-input-border bg-input-bg px-2 outline-none ring-0 ring-primary-bg/20 transition focus-within:border-primary focus-within:ring-4"
|
||||
>
|
||||
<Search class="size-5" aria-label="search" />
|
||||
<input
|
||||
name="q"
|
||||
placeholder="search packages..."
|
||||
class="absolute inset-0 bg-transparent pl-9 pr-2 text-heading placeholder:text-placeholder"
|
||||
/>
|
||||
</label>
|
||||
</form>
|
||||
</div>
|
||||
<div class="hidden items-center space-x-6 md:flex [&_a:hover]:text-heading [&_a]:transition">
|
||||
<nav class="flex items-center space-x-6 font-medium">
|
||||
<a href="/docs">Docs</a>
|
||||
<a href="/policies">Policies</a>
|
||||
</nav>
|
||||
|
||||
<a href="https://github.com/daimond113/pesde" target="_blank" rel="noreferrer noopener">
|
||||
<svg class="size-6" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>GitHub</title>
|
||||
<path
|
||||
d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
<header class="pt-14 sm:pt-16">
|
||||
<div class="fixed inset-x-0 top-0 z-50 bg-background/80 backdrop-blur">
|
||||
<div class="mx-auto flex h-14 max-w-screen-lg items-center justify-between px-4 sm:h-16">
|
||||
<a href="/">
|
||||
<Logo class="h-7 text-primary md:h-9" />
|
||||
</a>
|
||||
<div class="hidden w-full max-w-80 sm:flex">
|
||||
<Search />
|
||||
</div>
|
||||
<div class="hidden items-center space-x-6 md:flex [&_a:hover]:text-heading [&_a]:transition">
|
||||
<nav class="flex items-center space-x-6 font-medium">
|
||||
<a href="/docs">Docs</a>
|
||||
<a href="/policies">Policies</a>
|
||||
</nav>
|
||||
|
||||
<a href="https://github.com/daimond113/pesde" target="_blank" rel="noreferrer noopener">
|
||||
<Github class="size-6" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex items-center md:hidden">
|
||||
<Hamburger />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-1 sm:hidden">
|
||||
<Search />
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
18
website/src/routes/Search.svelte
Normal file
18
website/src/routes/Search.svelte
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<script lang="ts">
|
||||
import { Search } from "lucide-svelte"
|
||||
import { searchQuery } from "./search-state.svelte"
|
||||
</script>
|
||||
|
||||
<form action="/search" class="w-full">
|
||||
<label
|
||||
class="relative flex h-9 w-full items-center overflow-hidden rounded border border-input-border bg-input-bg px-2 outline-none ring-0 ring-primary-bg/20 transition focus-within:border-primary focus-within:ring-4"
|
||||
>
|
||||
<Search class="size-5" aria-label="search" />
|
||||
<input
|
||||
name="q"
|
||||
placeholder="search packages..."
|
||||
class="absolute inset-0 bg-transparent pl-9 pr-2 text-heading placeholder:text-placeholder"
|
||||
bind:value={searchQuery.value}
|
||||
/>
|
||||
</label>
|
||||
</form>
|
||||
|
|
@ -7,6 +7,7 @@
|
|||
import type { ComponentType } from "svelte"
|
||||
import Command from "./Command.svelte"
|
||||
import TargetSelector from "./TargetSelector.svelte"
|
||||
import Github from "$lib/components/Github.svelte"
|
||||
|
||||
let { children, data } = $props()
|
||||
|
||||
|
|
@ -97,18 +98,7 @@
|
|||
rel="noreferrer noopener"
|
||||
>
|
||||
{#if isGithub}
|
||||
<svg
|
||||
class="size-5 text-primary"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>GitHub</title>
|
||||
<path
|
||||
d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
<Github class="size-5 text-primary" />
|
||||
<span>
|
||||
{githubRepo}
|
||||
</span>
|
||||
|
|
|
|||
10
website/src/routes/search-state.svelte.ts
Normal file
10
website/src/routes/search-state.svelte.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
let _searchQuery = $state("")
|
||||
|
||||
export const searchQuery = {
|
||||
get value() {
|
||||
return _searchQuery
|
||||
},
|
||||
set value(value: string) {
|
||||
_searchQuery = value
|
||||
},
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue