navigation toolbar component

Changed files
+34
public
src
components
pages
public/img/icons/backarrow.png

This is a binary file and will not be displayed.

public/img/icons/home.png

This is a binary file and will not be displayed.

+32
src/components/Toolbar.astro
···
··· 1 + --- 2 + const { backlink = "/home" } = Astro.props; 3 + --- 4 + 5 + <div id="toolbar" class="flex"> 6 + <a href={backlink}> 7 + <img class="center" src="/img/icons/backarrow.png" alt="return" /> 8 + </a> 9 + <a href="/home"> 10 + <img class="center" src="/img/icons/home.png" alt="home" /> 11 + </a> 12 + </div> 13 + 14 + <style> 15 + #toolbar { 16 + justify-content: space-between; 17 + position: sticky; 18 + top: 0; 19 + margin-bottom: 13px; 20 + } 21 + 22 + #toolbar a { 23 + color: var(--white); 24 + background-color: var(--black); 25 + border: 10px double; 26 + padding: 6px; 27 + } 28 + 29 + #toolbar img { 30 + display: block; 31 + } 32 + </style>
+2
src/pages/blog/[slug].astro
··· 1 --- 2 import { getCollection, render } from "astro:content"; 3 import Base from "../../components/Base.astro"; 4 import "../../styles/main.css"; 5 6 export async function getStaticPaths() { ··· 22 type: "article", 23 }} 24 > 25 <article class="bwcontainer"> 26 <header class="bwbox center"> 27 <h1>{post.data.title}</h1>
··· 1 --- 2 import { getCollection, render } from "astro:content"; 3 import Base from "../../components/Base.astro"; 4 + import Toolbar from "../../components/Toolbar.astro"; 5 import "../../styles/main.css"; 6 7 export async function getStaticPaths() { ··· 23 type: "article", 24 }} 25 > 26 + <Toolbar backlink="/blog" /> 27 <article class="bwcontainer"> 28 <header class="bwbox center"> 29 <h1>{post.data.title}</h1>