Qihan/MyBlog-Next
1
0
Fork 0
mirror of https://github.com/ChenQihan666/MyBlog-Next.git synced 2026-08-14 11:29:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add new search link in header

Browse Source
This commit is contained in:
Sat Naing
2022-09-14 22:11:56 +06:30
parent c4f358489b
commit 4632f52655
1 changed files with 13 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Header.astro
+13 -3
View File
@@ -1,8 +1,9 @@
--- ---
import Hr from "./Hr.astro"; import Hr from "./Hr.astro";
import LinkButton from "./LinkButton.astro";
export interface Props { export interface Props {
activeNav?: "posts" | "tags" | "about"; activeNav?: "posts" | "tags" | "about" | "search";
} }
const { activeNav } = Astro.props; const { activeNav } = Astro.props;
@@ -38,13 +39,19 @@ const { activeNav } = Astro.props;
</li> </li>
</ul> </ul>
<div class="button-wrapper"> <div class="button-wrapper">
<button class="focus-outline"> <LinkButton
href="/search"
className={`focus-outline p-1 ${
activeNav === "search" ? "active" : ""
}`}
>
<svg xmlns="http://www.w3.org/2000/svg" <svg xmlns="http://www.w3.org/2000/svg"
><path ><path
d="M19.023 16.977a35.13 35.13 0 0 1-1.367-1.384c-.372-.378-.596-.653-.596-.653l-2.8-1.337A6.962 6.962 0 0 0 16 9c0-3.859-3.14-7-7-7S2 5.141 2 9s3.14 7 7 7c1.763 0 3.37-.66 4.603-1.739l1.337 2.8s.275.224.653.596c.387.363.896.854 1.384 1.367l1.358 1.392.604.646 2.121-2.121-.646-.604c-.379-.372-.885-.866-1.391-1.36zM9 14c-2.757 0-5-2.243-5-5s2.243-5 5-5 5 2.243 5 5-2.243 5-5 5z" d="M19.023 16.977a35.13 35.13 0 0 1-1.367-1.384c-.372-.378-.596-.653-.596-.653l-2.8-1.337A6.962 6.962 0 0 0 16 9c0-3.859-3.14-7-7-7S2 5.141 2 9s3.14 7 7 7c1.763 0 3.37-.66 4.603-1.739l1.337 2.8s.275.224.653.596c.387.363.896.854 1.384 1.367l1.358 1.392.604.646 2.121-2.121-.646-.604c-.379-.372-.885-.866-1.391-1.36zM9 14c-2.757 0-5-2.243-5-5s2.243-5 5-5 5 2.243 5 5-2.243 5-5 5z"
></path> ></path>
</svg> </svg>
</button> </LinkButton>
<button id="theme-btn" class="focus-outline"> <button id="theme-btn" class="focus-outline">
<svg xmlns="http://www.w3.org/2000/svg" id="moon-svg" <svg xmlns="http://www.w3.org/2000/svg" id="moon-svg"
><path ><path
@@ -104,6 +111,9 @@ const { activeNav } = Astro.props;
.button-wrapper { .button-wrapper {
@apply flex my-2 sm:my-0 space-x-4; @apply flex my-2 sm:my-0 space-x-4;
} }
.button-wrapper a.active svg {
@apply fill-skin-accent;
}
nav button { nav button {
@apply p-1; @apply p-1;
} }