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

Tooltips in the top navigation bar

Browse Source 
Added tooltips to icons in top navigation bar
This commit is contained in:
Cyril Šebek
2024-07-06 17:02:07 +02:00
parent 8a11f24244
commit d6d44fd9af
8 changed files with 243 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/LangSwitcher.jsx
View File

@ -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>
<Button variant="outline" size="icon" className="bg-inherit border-none text-content hover:text-bkg" dangerouslySetInnerHTML={{ __html: icons["lang"] }} />
<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}>

20
src/components/NavButton.jsx
View File

@ -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 (
<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] }} />
<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>
)
}

13
src/components/Navbar.astro
View File

@ -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>

24
src/components/ThemeSelector.jsx
View File

@ -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>
<Button variant="outline" size="icon" className="bg-inherit border-none text-content hover:text-bkg" dangerouslySetInnerHTML={{ __html: icons[theme] }} />
<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}>