mirror of
https://github.com/youwen5/site.git
synced 2024-11-24 17:33:51 -08:00
feat: finish mobile drawer menu
This commit is contained in:
parent
34aff92c42
commit
376d7c3c97
GPG key ID:
865658ED1FE61EC3
8 changed files with 2881 additions and 37 deletions
BIN
bun.lockb
BIN
bun.lockb
Binary file not shown.
2771
pnpm-lock.yaml
Normal file
2771
pnpm-lock.yaml
Normal file
File diff suppressed because it is too large
Load diff
4
src/lib/assets/grid.svg
Normal file
4
src/lib/assets/grid.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'>
|
||||
<rect x='50%' width='0.3' height='100%' fill='rgb(203 213 225)'></rect>
|
||||
<rect y='50%' width='100%' height='0.3' fill='rgb(203 213 225)'></rect>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 222 B |
|
|
@ -1,46 +1,93 @@
|
|||
<script>
|
||||
<script lang="ts">
|
||||
import Name from '$lib/assets/Name.svelte';
|
||||
import { HamburgerMenu } from 'svelte-radix';
|
||||
import { Drawer } from 'vaul-svelte';
|
||||
import { toggleMode } from 'mode-watcher';
|
||||
import Separator from '../ui/separator/separator.svelte';
|
||||
import Button from '../ui/button/button.svelte';
|
||||
import { Sun, Moon, Home, Person, File, Backpack } from 'svelte-radix';
|
||||
|
||||
let open: boolean = false;
|
||||
|
||||
const close = () => {
|
||||
open = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<Drawer.Root shouldScaleBackground direction="top">
|
||||
<Drawer.Trigger class="md:hidden">
|
||||
<Drawer.Root shouldScaleBackground direction="top" bind:open>
|
||||
<Drawer.Trigger asChild let:builder>
|
||||
<Button variant="outline" size="icon" builders={[builder]} class="px-2 md:hidden">
|
||||
<HamburgerMenu class="icon border-1 border-primary" />
|
||||
</Button>
|
||||
</Drawer.Trigger>
|
||||
<Drawer.Portal>
|
||||
<Drawer.Overlay class="fixed inset-0 bg-black/40" />
|
||||
<Drawer.Content
|
||||
class="fixed top-0 left-0 right-0 mb-24 flex flex-col rounded-b-2xl z-50 bg-accent"
|
||||
class="fixed top-0 left-0 right-0 mb-24 flex flex-col rounded-b-2xl z-50 bg-accent dark:bg-zinc-900"
|
||||
>
|
||||
<div class="flex-1 rounded-b-2xl bg-accent p-4 shadow-xl dark:shadow-none">
|
||||
<div class="flex-1 rounded-b-2xl bg-accent dark:bg-zinc-900 p-4 shadow-xl dark:shadow-none">
|
||||
<div class="mx-auto max-w-md">
|
||||
<Drawer.Title class="mb-4 font-medium">
|
||||
<Drawer.Title class="font-medium">
|
||||
<span class="px-2 flex justify-center">
|
||||
<Name href="/" width="80vw" height="auto" />
|
||||
</span>
|
||||
<Separator class="h-1 rounded-3xl mt-1" />
|
||||
<Separator class="h-1 rounded-3xl mt-1 dark:bg-zinc-500" />
|
||||
</Drawer.Title>
|
||||
<p class="mb-2 text-zinc-600"></p>
|
||||
<p class="mb-8 text-zinc-600">
|
||||
It uses
|
||||
<a
|
||||
href="https://www.bits-ui.com/docs/components/dialog"
|
||||
class="underline"
|
||||
target="_blank"
|
||||
<div class="grid grid-cols-1 my-10 gap-2">
|
||||
<Drawer.Close asChild let:builder>
|
||||
<Button
|
||||
variant="link"
|
||||
href="/"
|
||||
builders={[builder]}
|
||||
class="pl-2 text-4xl tracking-tight font-serif dark:text-zinc-200 w-min"
|
||||
><Home class="mr-2" />Home</Button
|
||||
>
|
||||
Bits' Dialog primitive
|
||||
</a>
|
||||
under the hood and is inspired by
|
||||
<a
|
||||
href="https://twitter.com/devongovett/status/1674470185783402496"
|
||||
class="underline"
|
||||
target="_blank"
|
||||
</Drawer.Close>
|
||||
<Separator class="dark:bg-zinc-500" />
|
||||
<Drawer.Close asChild let:builder>
|
||||
<Button
|
||||
variant="link"
|
||||
href="/about"
|
||||
builders={[builder]}
|
||||
class="pl-2 text-4xl tracking-tight font-serif dark:text-zinc-200 w-min"
|
||||
><Person class="mr-2" />About Me</Button
|
||||
>
|
||||
this tweet.
|
||||
</a>
|
||||
</p>
|
||||
</Drawer.Close>
|
||||
<Separator class="dark:bg-zinc-500" />
|
||||
<Drawer.Close asChild let:builder>
|
||||
<Button
|
||||
variant="link"
|
||||
href="/portfolio"
|
||||
builders={[builder]}
|
||||
class="pl-2 text-4xl tracking-tight font-serif dark:text-zinc-200 w-min"
|
||||
><Backpack class="mr-2" />Portfolio</Button
|
||||
>
|
||||
</Drawer.Close>
|
||||
<Separator class="dark:bg-zinc-500" />
|
||||
<Drawer.Close asChild let:builder>
|
||||
<Button
|
||||
href="/blog"
|
||||
variant="link"
|
||||
builders={[builder]}
|
||||
class="pl-2 text-4xl tracking-tight font-serif dark:text-zinc-200 w-min"
|
||||
><File class="mr-2" />Blog</Button
|
||||
>
|
||||
</Drawer.Close>
|
||||
<Separator class="h-1 rounded-3xl mt-1 dark:bg-zinc-500 my-2" />
|
||||
<Drawer.Close asChild let:builder>
|
||||
<Button
|
||||
variant="outline"
|
||||
class="bg-accent dark:border-zinc-500"
|
||||
size="lg"
|
||||
on:click={toggleMode}
|
||||
builders={[builder]}
|
||||
>
|
||||
<Sun class="mr-4 dark:hidden" />
|
||||
<Moon class="mr-4 hidden dark:block" />
|
||||
Toggle Theme
|
||||
</Button>
|
||||
</Drawer.Close>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-auto mb-8 h-1.5 w-12 flex-shrink-0 rounded-full bg-zinc-300" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
<nav class="h-20 bg-background bg-opacity-50 backdrop-blur-md fixed w-full z-40 font-display">
|
||||
<nav class="h-24 bg-background bg-opacity-50 backdrop-blur-md fixed w-full z-40 font-display">
|
||||
<div class="container mx-auto flex justify-between items-center h-full gap-6 overflow-x-auto">
|
||||
<Drawer />
|
||||
{#if current === 'blog'}
|
||||
|
|
|
|||
|
|
@ -27,21 +27,37 @@
|
|||
</script>
|
||||
|
||||
<div class="flex gap-2 mt-2 flex-wrap" class:justify-center={center}>
|
||||
<Button variant="ghost" size="icon" href="https://github.com/couscousdude">
|
||||
<Button
|
||||
class="hover:scale-110 transition-transform"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
href="https://github.com/couscousdude"
|
||||
>
|
||||
<GithubLogo />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" href="https://www.instagram.com/uncle_uwon/"
|
||||
><InstagramLogo /></Button
|
||||
<Button
|
||||
class="hover:scale-110 transition-transform"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
href="https://www.instagram.com/uncle_uwon/"><InstagramLogo /></Button
|
||||
>
|
||||
<Button variant="ghost" size="icon" href="https://twitter.com/couscousdude"
|
||||
><TwitterLogo /></Button
|
||||
<Button
|
||||
class="hover:scale-110 transition-transform"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
href="https://twitter.com/couscousdude"><TwitterLogo /></Button
|
||||
>
|
||||
<Button
|
||||
class="hover:scale-110 transition-transform"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
href="https://www.linkedin.com/in/youwen-wu-306221288/>"
|
||||
>
|
||||
<Button variant="ghost" size="icon" href="https://www.linkedin.com/in/youwen-wu-306221288/>">
|
||||
<LinkedinLogo />
|
||||
</Button>
|
||||
<Popover.Root>
|
||||
<Popover.Trigger>
|
||||
<Button variant="ghost" size="icon">
|
||||
<Button class="hover:scale-110 transition-transform" variant="ghost" size="icon">
|
||||
<DiscordLogo />
|
||||
</Button>
|
||||
</Popover.Trigger>
|
||||
|
|
@ -55,7 +71,7 @@
|
|||
</Popover.Root>
|
||||
<Popover.Root>
|
||||
<Popover.Trigger>
|
||||
<Button variant="ghost" size="icon">
|
||||
<Button class="hover:scale-110 transition-transform" variant="ghost" size="icon">
|
||||
<EnvelopeClosed />
|
||||
</Button>
|
||||
</Popover.Trigger>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<ModeWatcher />
|
||||
|
||||
<Navbar />
|
||||
<div class="pt-20">
|
||||
<div class="pt-24">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,4 +2,10 @@
|
|||
import UnderConstruction from '$lib/components/UnderConstruction.svelte';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Youwen Wu | Portfolio</title>
|
||||
<meta name="description" content="My personal website and blog." />
|
||||
<meta name="author" content="Youwen Wu" />
|
||||
</svelte:head>
|
||||
|
||||
<UnderConstruction />
|
||||
|
|
|
|||
Loading…
Reference in a new issue