Tooltips in the top navigation bar
Added tooltips to icons in top navigation bar
This commit is contained in:
parent
8a11f24244
commit
d6d44fd9af
SSH Key Fingerprint:
SHA256:n9dMtOPzgsD+CCerUJslEnU2dzVanbaIv0XDQVRVjeg
@ -14,9 +14,15 @@ import {
|
||||
DropdownMenuTrigger,
|
||||
} from "./ui/dropdown-menu"
|
||||
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "./ui/tooltip"
|
||||
|
||||
// Please note that clang = lang, it's just for more confusion
|
||||
export function LangSwitcher() {
|
||||
export function LangSwitcher({ tooltip }) {
|
||||
function getClang(){
|
||||
const clang = window.location.pathname.substring(1,3);
|
||||
return clang
|
||||
@ -34,7 +40,18 @@ export function LangSwitcher() {
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<div>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<Button variant="outline" size="icon" className="bg-inherit border-none text-content hover:text-bkg" dangerouslySetInnerHTML={{ __html: icons["lang"] }} />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>{tooltip}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="w-56">
|
||||
<DropdownMenuRadioGroup value={clang} onValueChange={clinkClang}>
|
||||
|
||||
@ -6,10 +6,26 @@ import { Button } from "./ui/button"
|
||||
import { cn } from '../lib/utils'
|
||||
import { icons } from "../lib/icons"
|
||||
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "./ui/tooltip"
|
||||
|
||||
export function NavButton({selected, variant}) {
|
||||
export function NavButton({ selected, variant, tooltip }) {
|
||||
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<Button id={`${variant}Btn`} variant="outline" size="icon" className={cn("bg-inherit border-none text-content", selected ? "text-accent hover:text-bkg" : "text-content hover:text-bkg")} dangerouslySetInnerHTML={{ __html: icons[variant] }} />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>{tooltip}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
@ -3,6 +3,7 @@ import { ThemeSelector } from "./ThemeSelector"
|
||||
import NavbarSkeleton from "./NavbarSkeleton.astro";
|
||||
import { LangSwitcher } from "./LangSwitcher";
|
||||
import { NavButton } from "./NavButton";
|
||||
import { useTranslations, getLangFromUrl } from "../i18n/utils";
|
||||
|
||||
function selected(path) {
|
||||
var currentURL = Astro.url.pathname
|
||||
@ -17,18 +18,20 @@ function selected(path) {
|
||||
|
||||
const locale = Astro.currentLocale ? Astro.currentLocale : "en"
|
||||
|
||||
const t = useTranslations(getLangFromUrl(Astro.url));
|
||||
|
||||
---
|
||||
<NavbarSkeleton>
|
||||
<!-- Page Navigation -->
|
||||
<div class="flex gap-1">
|
||||
<a href={`/${locale}/`}>
|
||||
<NavButton selected={selected("/")} variant="home"/>
|
||||
<NavButton selected={selected("/")} variant="home" tooltip={t("navbar")["home"]} client:load />
|
||||
</a>
|
||||
<a href={`/${locale}/blog`}>
|
||||
<NavButton selected={selected("/blog")} variant="blog"/>
|
||||
<NavButton selected={selected("/blog")} variant="blog" tooltip={t("navbar")["blog"]} client:load />
|
||||
</a>
|
||||
<a href={`/${locale}/music`}>
|
||||
<NavButton selected={selected("/music")} variant="music"/>
|
||||
<NavButton selected={selected("/music")} variant="music" tooltip={t("navbar")["music"]} client:load/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -39,7 +42,7 @@ const locale = Astro.currentLocale ? Astro.currentLocale : "en"
|
||||
|
||||
<!-- Options (language, light/dark mode) -->
|
||||
<div class="flex gap-1">
|
||||
<LangSwitcher client:load client:only="react"/>
|
||||
<ThemeSelector client:load client:only="react"/>
|
||||
<LangSwitcher tooltip={t("navbar")["lang"]} client:load client:only="react"/>
|
||||
<ThemeSelector tooltip={t("navbar")["mode"]} client:load client:only="react"/>
|
||||
</div>
|
||||
</NavbarSkeleton>
|
||||
@ -1,4 +1,4 @@
|
||||
"use client"
|
||||
|
||||
|
||||
import * as React from "react"
|
||||
|
||||
@ -12,9 +12,16 @@ import {
|
||||
DropdownMenuTrigger,
|
||||
} from "./ui/dropdown-menu"
|
||||
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "./ui/tooltip"
|
||||
|
||||
|
||||
// Please note that clang = lang, it's just for more confusion
|
||||
export function ThemeSelector() {
|
||||
export function ThemeSelector({ tooltip }) {
|
||||
function getTheme() {
|
||||
console.log(localStorage.getItem("data-theme"));
|
||||
const theme = localStorage.getItem("data-theme") || document.documentElement.getAttribute("data-theme");
|
||||
@ -33,7 +40,18 @@ export function ThemeSelector() {
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<div>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<Button variant="outline" size="icon" className="bg-inherit border-none text-content hover:text-bkg" dangerouslySetInnerHTML={{ __html: icons[theme] }} />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>{tooltip}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="w-20">
|
||||
<DropdownMenuRadioGroup value={theme} onValueChange={newTheme}>
|
||||
|
||||
@ -3,6 +3,18 @@ export const cs = {
|
||||
description: "Personal website of one weird student", // HTML page description
|
||||
favicon: "/favicon.svg",
|
||||
|
||||
/*
|
||||
Top navigation bar
|
||||
*/
|
||||
navbar: {
|
||||
home: "Domů",
|
||||
blog: "Blog",
|
||||
music: "Moje skladby",
|
||||
lang: "Jazyky",
|
||||
mode: "Režim"
|
||||
},
|
||||
|
||||
|
||||
/*
|
||||
Hero module of the page
|
||||
*/
|
||||
|
||||
103
src/i18n/de.js
103
src/i18n/de.js
@ -1,15 +1,49 @@
|
||||
export const de = {
|
||||
title: "Lorem Ipsum", // Title of the main page in browser's handlebard
|
||||
description: "Page description here", // HTML page description
|
||||
title: "Cyril Šebek", // Title of the main page in browser's handlebard
|
||||
description: "Personal website of one weird student", // HTML page description
|
||||
favicon: "/favicon.svg",
|
||||
|
||||
/*
|
||||
Top navigation bar
|
||||
*/
|
||||
navbar: {
|
||||
home: "Home",
|
||||
blog: "Blog",
|
||||
music: "My compositions",
|
||||
lang: "Languages",
|
||||
mode: "Theme"
|
||||
},
|
||||
|
||||
/*
|
||||
Hero module of the page
|
||||
*/
|
||||
hero: {
|
||||
title: "Lorem",
|
||||
content: "ipsum dolor",
|
||||
image: "/temp.jpg",
|
||||
buttons: ["Button 1", "Button 2"],
|
||||
title: "Coding Rhythms and Melodic Algorithms",
|
||||
content: "Welcome to personal website & blog of one weird student from Czechia",
|
||||
image: "/frontpage.svg",
|
||||
buttons: ["Read more", "Contact me"],
|
||||
},
|
||||
|
||||
/*
|
||||
Contact dialog from hero page
|
||||
*/
|
||||
contact: {
|
||||
title: "Contact me",
|
||||
description: "If you are interested in working with me or you just want to talk you can contact me using this form and I promise I will get back to you soon!",
|
||||
|
||||
name: "name",
|
||||
nameDescription: "Name",
|
||||
nameDefaultValue: "Beff Jazos",
|
||||
|
||||
email: "email",
|
||||
emailDescription: "Email",
|
||||
emailDefaultValue: "beff@sahara.com",
|
||||
|
||||
message: "message",
|
||||
messageDescription: "Your message",
|
||||
messageDefaultValue: "Hi there :)",
|
||||
|
||||
button: "Send"
|
||||
},
|
||||
|
||||
/*
|
||||
@ -18,30 +52,30 @@ export const de = {
|
||||
about: [
|
||||
{
|
||||
// About page first block title
|
||||
title: "Lorem",
|
||||
title: "Student",
|
||||
// Content of about page first block
|
||||
content:
|
||||
"Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque consequatur voluptatibus nobis dolores repellendus similique, ut sit odit commodi optio tempore totam, quaerat at distinctio nisi dolore magnam quia perferendis.",
|
||||
"Currently, I am a high school student with a passion for mathematics, physics and ICT, but I maintain excellent grades across all subjects.",
|
||||
// Image
|
||||
image: "/temp.jpg",
|
||||
image: "/student.png",
|
||||
},
|
||||
{
|
||||
// About page second block title
|
||||
title: "Ipsum",
|
||||
title: "Programmer",
|
||||
// Content of about page's second block
|
||||
content:
|
||||
"Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque consequatur voluptatibus nobis dolores repellendus similique, ut sit odit commodi optio tempore totam, quaerat at distinctio nisi dolore magnam quia perferendis.",
|
||||
"I started programming in my free time in 6th grade. After experimenting with various languages, I now primarily use Python for AI/ML and general scripting, and JavaScript for web development, along with other languages as needed for specific projects.",
|
||||
// Image
|
||||
image: "/temp.jpg",
|
||||
image: "/programmer.svg",
|
||||
},
|
||||
{
|
||||
// About page third block title
|
||||
title: "Ipsum",
|
||||
title: "Musician",
|
||||
// Content of about page's third block
|
||||
content:
|
||||
"Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque consequatur voluptatibus nobis dolores repellendus similique, ut sit odit commodi optio tempore totam, quaerat at distinctio nisi dolore magnam quia perferendis.",
|
||||
"I began playing the flute in the first grade and have since transitioned to playing the clarinet in multiple orchestras. I am deeply passionate about music and dedicate a portion of my free time to composing and studying film music.",
|
||||
// Image
|
||||
image: "/temp.jpg",
|
||||
image: "/musician.png",
|
||||
},
|
||||
],
|
||||
|
||||
@ -50,37 +84,54 @@ export const de = {
|
||||
*/
|
||||
showcase: [
|
||||
{
|
||||
value: "first",
|
||||
value: "website",
|
||||
handle: "Website",
|
||||
title: "My personal webpage",
|
||||
href: "/potato",
|
||||
description:
|
||||
"My personal website, clearly you've found it. Made in Astro.js with help of shadcnui components.",
|
||||
image: "/temp.jpg",
|
||||
"My personal website, clearly you've found it. Built using Astro.js and enhanced with Shadcn/UI components, this iteration marks its sixth version, yet it's the first one I've truly completed.",
|
||||
image: "/website.png",
|
||||
imageAlt: "Screenshot of this website",
|
||||
},
|
||||
{
|
||||
value: "second",
|
||||
title: "Self-hostable",
|
||||
handle: "HomeLab",
|
||||
href: "/potat2",
|
||||
handle: "Homelab",
|
||||
description:
|
||||
"It has now been a few years since I've started with selfhosting. It started as one single Raspberry Pi 4, then it grew to cluster of 4 Pis... and now I have 2 old IBM servers (x3550 m4).",
|
||||
image: "/temp.jpg",
|
||||
"It's been a few years since I started self-hosting. What began with a single Raspberry Pi 4 has evolved into a cluster of four Pis. Now, I rely on two old IBM servers (x3550 M4) to host nearly everything I need: a video server, music server, Git repositories, and even a password manager. It's become a robust setup that meets all my requirements.",
|
||||
image: "/homelab.jpg",
|
||||
imageAlt: "Photo of my personal homelab",
|
||||
},
|
||||
{
|
||||
value: "third",
|
||||
title: "ESA's Astro Pi Challenge 2022/23",
|
||||
handle: "ESA Astro Pi",
|
||||
href: "/kartoffeln",
|
||||
description:
|
||||
"Astro Pi is a competition for high school students by the European Space Agency. It's goal is to make it possible for students to run their code on the ISS. I was part of the Barrande team from our school. As our mission we chose Classification of Earth's topology using AI in Real-Time and I was the one tasked with programmign the AI. The mission was very successfull and we were nominated to 10 best teams. Reports and other data can be found on ESA's website.",
|
||||
image: "/temp.jpg",
|
||||
"Astro Pi is a competition for high school students hosted by the European Space Agency. Its goal is to enable students to run their code aboard the ISS. I was part of the Barrande team from our school. For our mission, we chose \"Real-Time Classification of Earth\'s Topology using AI,\" and I was responsible for programming the AI. Our mission was highly successful, and we were nominated as one of the top 10 teams. Detailed reports and additional data can be found on the ESA\'s website.",
|
||||
image: "/astropi.png",
|
||||
imageAlt: "Image for of our task and results explanation",
|
||||
},
|
||||
],
|
||||
|
||||
/*
|
||||
Blog page
|
||||
*/
|
||||
blog: {
|
||||
title: "Blog @ Cyril Šebek",
|
||||
description: "My personal blog, documenting some of my crazy ideas",
|
||||
},
|
||||
|
||||
/*
|
||||
Page with musical compositions
|
||||
*/
|
||||
music: {
|
||||
pageTitle: "Music @ Cyril Šebek",
|
||||
title: "My compositions",
|
||||
description: "This is page is listing all my published musical compositions.",
|
||||
downloadPDF: "Download PDF",
|
||||
downloadMP3: "Download MP3",
|
||||
downloadFLAC: "Download FLAC"
|
||||
},
|
||||
|
||||
postsTagged: "All posts tagged with",
|
||||
};
|
||||
|
||||
@ -3,6 +3,17 @@ export const en = {
|
||||
description: "Personal website of one weird student", // HTML page description
|
||||
favicon: "/favicon.svg",
|
||||
|
||||
/*
|
||||
Top navigation bar
|
||||
*/
|
||||
navbar: {
|
||||
home: "Home",
|
||||
blog: "Blog",
|
||||
music: "My compositions",
|
||||
lang: "Languages",
|
||||
mode: "Theme"
|
||||
},
|
||||
|
||||
/*
|
||||
Hero module of the page
|
||||
*/
|
||||
|
||||
103
src/i18n/fr.js
103
src/i18n/fr.js
@ -1,15 +1,49 @@
|
||||
export const fr = {
|
||||
title: "Lorem Ipsum", // Title of the main page in browser's handlebard
|
||||
description: "Page description here", // HTML page description
|
||||
title: "Cyril Šebek", // Title of the main page in browser's handlebard
|
||||
description: "Personal website of one weird student", // HTML page description
|
||||
favicon: "/favicon.svg",
|
||||
|
||||
/*
|
||||
Top navigation bar
|
||||
*/
|
||||
navbar: {
|
||||
home: "Home",
|
||||
blog: "Blog",
|
||||
music: "My compositions",
|
||||
lang: "Languages",
|
||||
mode: "Theme"
|
||||
},
|
||||
|
||||
/*
|
||||
Hero module of the page
|
||||
*/
|
||||
hero: {
|
||||
title: "Lorem",
|
||||
content: "ipsum dolor",
|
||||
image: "/temp.jpg",
|
||||
buttons: ["Button 1", "Button 2"],
|
||||
title: "Coding Rhythms and Melodic Algorithms",
|
||||
content: "Welcome to personal website & blog of one weird student from Czechia",
|
||||
image: "/frontpage.svg",
|
||||
buttons: ["Read more", "Contact me"],
|
||||
},
|
||||
|
||||
/*
|
||||
Contact dialog from hero page
|
||||
*/
|
||||
contact: {
|
||||
title: "Contact me",
|
||||
description: "If you are interested in working with me or you just want to talk you can contact me using this form and I promise I will get back to you soon!",
|
||||
|
||||
name: "name",
|
||||
nameDescription: "Name",
|
||||
nameDefaultValue: "Beff Jazos",
|
||||
|
||||
email: "email",
|
||||
emailDescription: "Email",
|
||||
emailDefaultValue: "beff@sahara.com",
|
||||
|
||||
message: "message",
|
||||
messageDescription: "Your message",
|
||||
messageDefaultValue: "Hi there :)",
|
||||
|
||||
button: "Send"
|
||||
},
|
||||
|
||||
/*
|
||||
@ -18,30 +52,30 @@ export const fr = {
|
||||
about: [
|
||||
{
|
||||
// About page first block title
|
||||
title: "Lorem",
|
||||
title: "Student",
|
||||
// Content of about page first block
|
||||
content:
|
||||
"Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque consequatur voluptatibus nobis dolores repellendus similique, ut sit odit commodi optio tempore totam, quaerat at distinctio nisi dolore magnam quia perferendis.",
|
||||
"Currently, I am a high school student with a passion for mathematics, physics and ICT, but I maintain excellent grades across all subjects.",
|
||||
// Image
|
||||
image: "/temp.jpg",
|
||||
image: "/student.png",
|
||||
},
|
||||
{
|
||||
// About page second block title
|
||||
title: "Ipsum",
|
||||
title: "Programmer",
|
||||
// Content of about page's second block
|
||||
content:
|
||||
"Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque consequatur voluptatibus nobis dolores repellendus similique, ut sit odit commodi optio tempore totam, quaerat at distinctio nisi dolore magnam quia perferendis.",
|
||||
"I started programming in my free time in 6th grade. After experimenting with various languages, I now primarily use Python for AI/ML and general scripting, and JavaScript for web development, along with other languages as needed for specific projects.",
|
||||
// Image
|
||||
image: "/temp.jpg",
|
||||
image: "/programmer.svg",
|
||||
},
|
||||
{
|
||||
// About page third block title
|
||||
title: "Ipsum",
|
||||
title: "Musician",
|
||||
// Content of about page's third block
|
||||
content:
|
||||
"Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque consequatur voluptatibus nobis dolores repellendus similique, ut sit odit commodi optio tempore totam, quaerat at distinctio nisi dolore magnam quia perferendis.",
|
||||
"I began playing the flute in the first grade and have since transitioned to playing the clarinet in multiple orchestras. I am deeply passionate about music and dedicate a portion of my free time to composing and studying film music.",
|
||||
// Image
|
||||
image: "/temp.jpg",
|
||||
image: "/musician.png",
|
||||
},
|
||||
],
|
||||
|
||||
@ -50,37 +84,54 @@ export const fr = {
|
||||
*/
|
||||
showcase: [
|
||||
{
|
||||
value: "first",
|
||||
value: "website",
|
||||
handle: "Website",
|
||||
title: "My personal webpage",
|
||||
href: "/potato",
|
||||
description:
|
||||
"My personal website, clearly you've found it. Made in Astro.js with help of shadcnui components.",
|
||||
image: "/temp.jpg",
|
||||
"My personal website, clearly you've found it. Built using Astro.js and enhanced with Shadcn/UI components, this iteration marks its sixth version, yet it's the first one I've truly completed.",
|
||||
image: "/website.png",
|
||||
imageAlt: "Screenshot of this website",
|
||||
},
|
||||
{
|
||||
value: "second",
|
||||
title: "Self-hostable",
|
||||
handle: "HomeLab",
|
||||
href: "/potat2",
|
||||
handle: "Homelab",
|
||||
description:
|
||||
"It has now been a few years since I've started with selfhosting. It started as one single Raspberry Pi 4, then it grew to cluster of 4 Pis... and now I have 2 old IBM servers (x3550 m4).",
|
||||
image: "/temp.jpg",
|
||||
"It's been a few years since I started self-hosting. What began with a single Raspberry Pi 4 has evolved into a cluster of four Pis. Now, I rely on two old IBM servers (x3550 M4) to host nearly everything I need: a video server, music server, Git repositories, and even a password manager. It's become a robust setup that meets all my requirements.",
|
||||
image: "/homelab.jpg",
|
||||
imageAlt: "Photo of my personal homelab",
|
||||
},
|
||||
{
|
||||
value: "third",
|
||||
title: "ESA's Astro Pi Challenge 2022/23",
|
||||
handle: "ESA Astro Pi",
|
||||
href: "/kartoffeln",
|
||||
description:
|
||||
"Astro Pi is a competition for high school students by the European Space Agency. It's goal is to make it possible for students to run their code on the ISS. I was part of the Barrande team from our school. As our mission we chose Classification of Earth's topology using AI in Real-Time and I was the one tasked with programmign the AI. The mission was very successfull and we were nominated to 10 best teams. Reports and other data can be found on ESA's website.",
|
||||
image: "/temp.jpg",
|
||||
"Astro Pi is a competition for high school students hosted by the European Space Agency. Its goal is to enable students to run their code aboard the ISS. I was part of the Barrande team from our school. For our mission, we chose \"Real-Time Classification of Earth\'s Topology using AI,\" and I was responsible for programming the AI. Our mission was highly successful, and we were nominated as one of the top 10 teams. Detailed reports and additional data can be found on the ESA\'s website.",
|
||||
image: "/astropi.png",
|
||||
imageAlt: "Image for of our task and results explanation",
|
||||
},
|
||||
],
|
||||
|
||||
/*
|
||||
Blog page
|
||||
*/
|
||||
blog: {
|
||||
title: "Blog @ Cyril Šebek",
|
||||
description: "My personal blog, documenting some of my crazy ideas",
|
||||
},
|
||||
|
||||
/*
|
||||
Page with musical compositions
|
||||
*/
|
||||
music: {
|
||||
pageTitle: "Music @ Cyril Šebek",
|
||||
title: "My compositions",
|
||||
description: "This is page is listing all my published musical compositions.",
|
||||
downloadPDF: "Download PDF",
|
||||
downloadMP3: "Download MP3",
|
||||
downloadFLAC: "Download FLAC"
|
||||
},
|
||||
|
||||
postsTagged: "All posts tagged with",
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user