youwen5/site
1
0
Fork 0
mirror of https://github.com/youwen5/site.git synced 2024-11-24 17:33:51 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: hide navbar on blog posts to reduce clutter

Browse source
This commit is contained in:
Youwen Wu 2024-05-13 00:16:22 -07:00
parent 9440516e0a
commit 8bc54c76ae
Signed by: youwen5
GPG key ID: 865658ED1FE61EC3
2 changed files with 19 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/lib/components/Navbar/Navbar.svelte
View file

@ -9,12 +9,21 @@
import Button from '../ui/button/button.svelte' import Button from '../ui/button/button.svelte'
import { Moon, Sun } from 'svelte-radix' import { Moon, Sun } from 'svelte-radix'
let current: 'blog' | 'about' | 'home' | 'portfolio' | string let current: 'blogpost' | 'blog' | 'about' | 'home' | 'portfolio' | string
const updateCurrent = () => { const updateCurrent = () => {
const path = window.location.pathname const path = window.location.pathname
if (path === '/') { // if (path === '/') {
current = 'home' // current = 'home'
// } else {
// const segments = path.split('/')
// current = segments[1] || 'home'
// }
if (path === '/blog') {
current = 'blog'
} else if (path.startsWith('/blog')) {
current = 'blogpost'
} else { } else {
const segments = path.split('/') const segments = path.split('/')
current = segments[1] || 'home' current = segments[1] || 'home'
@ -24,10 +33,14 @@
onMount(() => navigating.subscribe(updateCurrent)) onMount(() => navigating.subscribe(updateCurrent))
</script> </script>
<nav class="h-16 lg:h-24 bg-background bg-opacity-50 backdrop-blur-lg fixed w-full z-40 font-serif"> <nav
class="h-16 lg:h-24 bg-background bg-opacity-50 backdrop-blur-lg md:fixed w-full z-40 font-serif"
class:fixed={current !== 'blogpost'}
class:absolute={current === 'blogpost'}
>
<div class="container mx-auto flex justify-between items-center h-full gap-6 overflow-x-auto"> <div class="container mx-auto flex justify-between items-center h-full gap-6 overflow-x-auto">
<Drawer /> <Drawer />
{#if current === 'blog'} {#if current === 'blog' || current === 'blogpost'}
<Coredump height="95%" href="/blog" /> <Coredump height="95%" href="/blog" />
{:else} {:else}
<Name height="95%" href="/" /> <Name height="95%" href="/" />

2
src/lib/components/Toc/TocHeader.svelte
View file

@ -23,7 +23,7 @@
} }
</script> </script>
<nav class="fixed top-16 left-0 w-full bg-background bg-opacity-50 backdrop-blur-lg z-30 lg:hidden"> <nav class="sticky top-0 left-0 w-full bg-background bg-opacity-50 backdrop-blur-lg z-30 lg:hidden">
<Accordion.Root class="px-8" bind:value> <Accordion.Root class="px-8" bind:value>
<Accordion.Item value="toc"> <Accordion.Item value="toc">
<Accordion.Trigger <Accordion.Trigger