blboun3/personal-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

almost finished navbar

Browse Source 
TODO: modify dropdown menus
This commit is contained in:
Cyril Šebek 2024-04-07 17:23:34 +02:00
parent d5026cfc05
commit fd03b7b9cf
Signed by: blboun3
SSH Key Fingerprint: SHA256:n9dMtOPzgsD+CCerUJslEnU2dzVanbaIv0XDQVRVjeg
8 changed files with 69 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Navbar.astro
View File

@ -1,11 +1,10 @@
--- ---
import { getRelativeLocaleUrl } from "astro:i18n"; import { getRelativeLocaleUrl } from "astro:i18n";
/* import ThemeSelector from "./ThemeSelector" */ import { ThemeSelector } from "./ThemeSelector"
import NavbarSkeleton from "./NavbarSkeleton.astro"; import NavbarSkeleton from "./NavbarSkeleton.astro";
import { LangSwitcher } from "./LangSwitcher"; import { LangSwitcher } from "./LangSwitcher";
import { NavButton } from "./NavButton"; import { NavButton } from "./NavButton";
function selected(path) { function selected(path) {
return ( return (
(Astro.url.pathname (Astro.url.pathname
@ -14,7 +13,6 @@ function selected(path) {
); );
} }
--- ---
<NavbarSkeleton> <NavbarSkeleton>
<!-- Page Navigation --> <!-- Page Navigation -->
<div class="flex gap-1"> <div class="flex gap-1">
@ -32,10 +30,8 @@ function selected(path) {
</div> </div>
<!-- Options (language, light/dark mode) --> <!-- Options (language, light/dark mode) -->
<div class="flex gap-4"> <div class="flex gap-1">
<!-- <Icon icon="dark_mode" class={"h-8 w-8 hover:text-primary text-content"} /> -->
<LangSwitcher client:load client:only/> <LangSwitcher client:load client:only/>
<!-- <ThemeSelector client:load></ThemeSelector> --> <ThemeSelector client:load client:only/>
</div> </div>
</NavbarSkeleton> </NavbarSkeleton>
./NavButton

47
src/components/ThemeSelector.jsx Normal file
View 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 >
)
}

0
src/components/ThemeSelector.tsx
View File

11
src/layouts/MainLayout.astro
View File

@ -1,22 +1,27 @@
--- ---
const { title, description, lang, themeOverride } = Astro.props; const { title, description, lang, themeOverride } = Astro.props;
import { ViewTransitions } from 'astro:transitions';
import Navbar from "../components/Navbar.astro"; import Navbar from "../components/Navbar.astro";
import "../style/index.css"; import "../style/index.css";
import "../style/globals.css"; import "../style/globals.css";
--- ---
<!doctype html> <!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> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content={description} /> <meta name="description" content={description} />
<link rel="shortcut icon" href="/favicon.svg"> <link rel="shortcut icon" href="/favicon.svg">
<title>{title}</title> <title>{title}</title>
<ViewTransitions />
</head> </head>
<body class="bg-bkg" > <body class="bg-bkg" >
<Navbar /> <script transition:persist is:raw is:inline>
<div class="bg-bkg h-dvh w-full overflow-y-scroll snap-mandatory snap-y scroll-smooth"> 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 /> <slot />
</div> </div>
</body> </body>

2
src/layouts/SinglePage.astro
View File

@ -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="bg-bkg h-full w-full sm:grid sm:grid-cols-6 lg:grid-cols-12">
<div <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" 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"

9
src/lib/icons.js
View File

@ -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"> 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" /> <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>`; </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" /> <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>`; </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" /> <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>`; </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"> 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" /> <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>` </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 };

2
src/pages/[lang]/index.astro
View File

@ -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 /> <Hero />
<About /> <About />
<Hero /> <Hero />

4
src/style/index.css
View File

@ -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-bkg: 0deg, 0%, 6%;
--color-bkgNavbar: 0deg, 0%, 17%; --color-bkgNavbar: 0deg, 0%, 17%;
--color-content: 240deg, 4%, 91%; --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%; --color-accent-red: 0deg, 84%, 60%;
} }
:root[data-theme="light"] { :root[data-theme="theme_light"] {
--color-bkg: 0deg, 0%, 94%; --color-bkg: 0deg, 0%, 94%;
--color-bkgNavbar: 0deg, 0%, 50%; --color-bkgNavbar: 0deg, 0%, 50%;
--color-content: 240deg, 4%, 9%; --color-content: 240deg, 4%, 9%;