mikkel/astro-personal-website
1
0
Fork 0
mirror of https://github.com/mikkelsvartveit/astro-personal-website.git synced 2025-12-22 11:12:38 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Make navbar not fixed

Browse source
This commit is contained in:
Mikkel Svartveit 2024-09-18 15:30:10 +02:00
parent 51b6432f79
commit dbbf4d32d2
4 changed files with 3 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/components/Navbar.svelte
View file

@ -1,13 +1,9 @@
<script lang="ts"> <script lang="ts">
import { slide, fade } from "svelte/transition"; import { slide, fade } from "svelte/transition";
export let sticky = true;
export let currentPath: string; export let currentPath: string;
$: currentPathTrimmed = currentPath.replace(/\/+$/, ""); $: currentPathTrimmed = currentPath.replace(/\/+$/, "");
let scrollPosition = 0;
$: isScrolled = scrollPosition > 0;
const navbarContent = [ const navbarContent = [
{ name: "📝 Articles", href: "/articles" }, { name: "📝 Articles", href: "/articles" },
{ name: "👨‍💻 Projects", href: "/programming" }, { name: "👨‍💻 Projects", href: "/programming" },
@ -17,12 +13,7 @@
let collapsed = true; let collapsed = true;
</script> </script>
<svelte:window bind:scrollY={scrollPosition} /> <header>
<header
class={sticky ? "sticky top-0 z-10 bg-gray-50 transition-shadow ease-in" : ""}
class:shadow={sticky && isScrolled}
>
<nav <nav
class="mx-auto flex h-16 max-w-5xl flex-wrap items-center justify-between px-6" class="mx-auto flex h-16 max-w-5xl flex-wrap items-center justify-between px-6"
> >

7
src/layouts/BaseLayout.astro
View file

@ -1,12 +1,6 @@
--- ---
import Navbar from "@components/Navbar.svelte"; import Navbar from "@components/Navbar.svelte";
import HeadContent from "@components/HeadContent.astro"; import HeadContent from "@components/HeadContent.astro";
interface Props {
noStickyNavbar?: boolean;
}
const { noStickyNavbar } = Astro.props;
--- ---
<html lang="en"> <html lang="en">
@ -19,7 +13,6 @@ const { noStickyNavbar } = Astro.props;
<body class="overflow-y-scroll bg-gray-50"> <body class="overflow-y-scroll bg-gray-50">
<Navbar <Navbar
client:load client:load
sticky={!noStickyNavbar}
currentPath={Astro.url.pathname} currentPath={Astro.url.pathname}
/> />

2
src/pages/index.astro
View file

@ -18,7 +18,7 @@ const latestArticleImage = latestArticle.data.image;
<BaseLayout> <BaseLayout>
<div <div
class="mx-auto flex max-w-5xl flex-col-reverse items-stretch px-4 pb-6 pt-8 sm:px-6 md:flex-row" class="mx-auto flex max-w-5xl flex-col-reverse items-stretch px-4 pb-6 pt-12 sm:px-6 md:flex-row"
> >
<section class="mb-10 mt-4 w-full md:w-3/5"> <section class="mb-10 mt-4 w-full md:w-3/5">
<h1 <h1

2
src/pages/photography/index.astro
View file

@ -22,7 +22,7 @@ export const getFileNameFromPath = (path: string) => {
}; };
--- ---
<BaseLayout noStickyNavbar> <BaseLayout>
<HeadContent slot="head" title="Photography" /> <HeadContent slot="head" title="Photography" />
<ContainerLayout> <ContainerLayout>