almost finished navbar
TODO: modify dropdown menus
This commit is contained in:
parent
d5026cfc05
commit
fd03b7b9cf
SSH Key Fingerprint:
SHA256:n9dMtOPzgsD+CCerUJslEnU2dzVanbaIv0XDQVRVjeg
@ -1,11 +1,10 @@
|
||||
---
|
||||
import { getRelativeLocaleUrl } from "astro:i18n";
|
||||
/* import ThemeSelector from "./ThemeSelector" */
|
||||
import { ThemeSelector } from "./ThemeSelector"
|
||||
import NavbarSkeleton from "./NavbarSkeleton.astro";
|
||||
import { LangSwitcher } from "./LangSwitcher";
|
||||
import { NavButton } from "./NavButton";
|
||||
|
||||
|
||||
function selected(path) {
|
||||
return (
|
||||
(Astro.url.pathname
|
||||
@ -14,7 +13,6 @@ function selected(path) {
|
||||
);
|
||||
}
|
||||
---
|
||||
|
||||
<NavbarSkeleton>
|
||||
<!-- Page Navigation -->
|
||||
<div class="flex gap-1">
|
||||
@ -32,10 +30,8 @@ function selected(path) {
|
||||
</div>
|
||||
|
||||
<!-- Options (language, light/dark mode) -->
|
||||
<div class="flex gap-4">
|
||||
<!-- <Icon icon="dark_mode" class={"h-8 w-8 hover:text-primary text-content"} /> -->
|
||||
<div class="flex gap-1">
|
||||
<LangSwitcher client:load client:only/>
|
||||
<!-- <ThemeSelector client:load></ThemeSelector> -->
|
||||
<ThemeSelector client:load client:only/>
|
||||
</div>
|
||||
</NavbarSkeleton>
|
||||
./NavButton
|
||||
</NavbarSkeleton>
|
||||
47
src/components/ThemeSelector.jsx
Normal file
47
src/components/ThemeSelector.jsx
Normal file
@ -0,0 +1,47 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
|
||||
import { icons } from "../lib/icons"
|
||||
import { Button } from "./ui/button"
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "./ui/dropdown-menu"
|
||||
|
||||
|
||||
// Please note that clang = lang, it's just for more confusion
|
||||
export function ThemeSelector() {
|
||||
function getTheme() {
|
||||
console.log(localStorage.getItem("data-theme"));
|
||||
const theme = localStorage.getItem("data-theme") || document.documentElement.getAttribute("data-theme");
|
||||
document.documentElement.setAttribute("data-theme", theme);
|
||||
return theme;
|
||||
}
|
||||
|
||||
function newTheme(theme) {
|
||||
setTheme(theme);
|
||||
document.documentElement.setAttribute("data-theme", theme);
|
||||
localStorage.setItem("data-theme", theme);
|
||||
}
|
||||
|
||||
const [theme, setTheme] = React.useState(getTheme());
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" size="icon" className="bg-inherit border-none text-content" dangerouslySetInnerHTML={{ __html: icons[theme] }} />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="w-20">
|
||||
<DropdownMenuRadioGroup value={theme} onValueChange={newTheme}>
|
||||
<DropdownMenuRadioItem value="theme_auto">Auto</DropdownMenuRadioItem>
|
||||
<DropdownMenuRadioItem value="theme_light">Light</DropdownMenuRadioItem>
|
||||
<DropdownMenuRadioItem value="theme_dark">Dark</DropdownMenuRadioItem>
|
||||
</DropdownMenuRadioGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu >
|
||||
)
|
||||
}
|
||||
@ -1,22 +1,27 @@
|
||||
---
|
||||
const { title, description, lang, themeOverride } = Astro.props;
|
||||
import { ViewTransitions } from 'astro:transitions';
|
||||
import Navbar from "../components/Navbar.astro";
|
||||
import "../style/index.css";
|
||||
import "../style/globals.css";
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang={lang} data-theme={themeOverride ? themeOverride : undefined} class="overflow-hidden">
|
||||
<html lang={lang} data-theme={themeOverride ? themeOverride : "theme_auto"} class="overflow-hidden">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content={description} />
|
||||
<link rel="shortcut icon" href="/favicon.svg">
|
||||
<title>{title}</title>
|
||||
<ViewTransitions />
|
||||
</head>
|
||||
<body class="bg-bkg" >
|
||||
<Navbar />
|
||||
<div class="bg-bkg h-dvh w-full overflow-y-scroll snap-mandatory snap-y scroll-smooth">
|
||||
<script transition:persist is:raw is:inline>
|
||||
document.addEventListener('astro:after-swap', () => {document.documentElement.setAttribute("data-theme", localStorage.getItem("data-theme") || document.documentElement.getAttribute("data-theme"));});
|
||||
</script>
|
||||
<Navbar transition:persist/>
|
||||
<div class="bg-bkg h-dvh w-full overflow-y-scroll snap-mandatory snap-y scroll-smooth" transition:animate="slide">
|
||||
<slot />
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div class="snap-start w-screen h-screen overflow-clip pt-10">
|
||||
<div class="snap-start w-screen h-screen overflow-clip pt-14">
|
||||
<div class="bg-bkg h-full w-full sm:grid sm:grid-cols-6 lg:grid-cols-12">
|
||||
<div
|
||||
class="sm:col-start-2 sm:col-end-6 lg:col-start-3 lg:col-end-11 2xl:col-start-4 2xl:col-end-10 h-full p-2 sm:p-6"
|
||||
|
||||
@ -4,14 +4,17 @@ const home = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 2
|
||||
const blog = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 0 1-2.25 2.25M16.5 7.5V18a2.25 2.25 0 0 0 2.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 0 0 2.25 2.25h13.5M6 7.5h3v3H6v-3Z" />
|
||||
</svg>`;
|
||||
const dark_theme = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
|
||||
const theme_dark = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
|
||||
</svg>`;
|
||||
const light_theme = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
|
||||
const theme_light = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
|
||||
</svg>`;
|
||||
const lang = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802" />
|
||||
</svg>`
|
||||
const theme_auto = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z" />
|
||||
</svg>`
|
||||
|
||||
export const icons = { home: home, blog: blog, dark_theme: dark_theme, light_theme: light_theme, lang:lang };
|
||||
export const icons = { home: home, blog: blog, theme_dark: theme_dark, theme_light: theme_light, lang: lang, theme_auto: theme_auto };
|
||||
@ -13,7 +13,7 @@ export async function getStaticPaths() {
|
||||
});
|
||||
}
|
||||
---
|
||||
<MainLayout title={title} description={description} lang={Astro.currentLocale} themeOverride="dark">
|
||||
<MainLayout title={title} description={description} lang={Astro.currentLocale} themeOverride="theme_auto">
|
||||
<Hero />
|
||||
<About />
|
||||
<Hero />
|
||||
|
||||
@ -28,7 +28,7 @@ Dark Mode: https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5
|
||||
}
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] {
|
||||
:root[data-theme="theme_dark"] {
|
||||
--color-bkg: 0deg, 0%, 6%;
|
||||
--color-bkgNavbar: 0deg, 0%, 17%;
|
||||
--color-content: 240deg, 4%, 91%;
|
||||
@ -38,7 +38,7 @@ Dark Mode: https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5
|
||||
--color-accent-red: 0deg, 84%, 60%;
|
||||
}
|
||||
|
||||
:root[data-theme="light"] {
|
||||
:root[data-theme="theme_light"] {
|
||||
--color-bkg: 0deg, 0%, 94%;
|
||||
--color-bkgNavbar: 0deg, 0%, 50%;
|
||||
--color-content: 240deg, 4%, 9%;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user