Forker/fuwari
1
0
Fork 0
mirror of https://github.com/saicaca/fuwari.git synced 2026-01-11 14:52:52 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: post styles, next/prev post btn, display-settings, etc.

Browse Source 
(cherry picked from commit b7ddd92729d52a8c43d72010b743f7e3477f1001)
This commit is contained in:
saicaca
2023-10-02 01:52:08 +08:00
parent 8ed0aa071f
commit 26408b0b7e
19 changed files with 258 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/Navbar.astro
View File

@@ -1,25 +1,32 @@
---
import Button from "./control/Button.astro";
import { Icon } from 'astro-icon/components';
import DisplaySetting from "./widget/DisplaySetting.astro";
const className = Astro.props.class;
---
<div class:list={[
className,
"card-base max-w-[var(--page-width)] h-[72px] rounded-t-none mx-auto flex items-center justify-between px-4"]}>
<a href="/"><Button height="52px" class="px-5 font-bold" light>
<a href="/"><Button height="52px" class="px-5 font-bold rounded-lg" light>
<div class="flex flex-row text-[var(--primary)] items-center text-md">
<Icon name="material-symbols:home-outline-rounded" size={28} class="mb-1 mr-2" />
<div class="top-2"></div>Vivia Preview
</div>
</Button></a>
<div>
<a href="/"><Button light class="font-bold px-5">Home</Button></a>
<a href="/archive"><Button light class="font-bold px-5">Archive</Button></a>
<a href="/about"><Button light class="font-bold px-5">About</Button></a>
<a href="/"><Button light class="font-bold px-5 rounded-lg">Home</Button></a>
<a href="/archive"><Button light class="font-bold px-5 rounded-lg">Archive</Button></a>
<a href="/about"><Button light class="font-bold px-5 rounded-lg">About</Button></a>
</div>
<div>
<Button id="scheme-switch" iconName="material-symbols:wb-sunny-outline-rounded" iconSize={20} isIcon light></Button>
<div class="flex">
<div>
<Button class="rounded-lg" id="display-settings-switch" iconName="material-symbols:palette-outline" iconSize={20} isIcon light></Button>
</div>
<div>
<Button class="rounded-lg" id="scheme-switch" iconName="material-symbols:wb-sunny-outline-rounded" iconSize={20} isIcon light></Button>
</div>
</div>
<DisplaySetting></DisplaySetting>
</div>
@@ -40,13 +47,15 @@ function switchTheme() {
function loadThemeSwitchScript() {
let switchBtn = document.getElementById("scheme-switch");
if (switchBtn === null) {
console.log("test")
}
switchBtn.addEventListener("click", function () {
console.log("test")
switchTheme()
});
let settingBtn = document.getElementById("display-settings-switch");
settingBtn.addEventListener("click", function () {
let settingPanel = document.getElementById("display-setting");
settingPanel.classList.toggle("closed");
});
}
loadThemeSwitchScript();