diff --git a/public/images/zim.png b/public/images/zim.png new file mode 100644 index 0000000..805683b Binary files /dev/null and b/public/images/zim.png differ diff --git a/src/assets/styles/global.css b/src/assets/styles/global.css index da01f36..814df3c 100644 --- a/src/assets/styles/global.css +++ b/src/assets/styles/global.css @@ -195,6 +195,11 @@ blockquote p:first-of-type::after { Custom */ +.logo-auth { + height: 64px; + width: 64px; +} + .footer { display: grid; align-items: end; diff --git a/src/components/Login.jsx b/src/components/Login.jsx index ba46f84..0a1022e 100644 --- a/src/components/Login.jsx +++ b/src/components/Login.jsx @@ -101,8 +101,8 @@ export default function LoginPage() {

- Logo - Authentication Required + Logo + Log In

diff --git a/src/components/LyricSearch.jsx b/src/components/LyricSearch.jsx index 1dd4ed9..0132b1a 100644 --- a/src/components/LyricSearch.jsx +++ b/src/components/LyricSearch.jsx @@ -324,6 +324,16 @@ export function LyricSearchInputField({ id, placeholder, setShowLyrics }) { const statusTitle = statusLabels[inputStatus]; const StatusIcon = statusIcons[inputStatus] || RemoveRoundedIcon; + useEffect(() => { + const inputEl = autoCompleteInputRef.current; + if (!inputEl) return; + if (statusTitle) { + inputEl.setAttribute("title", statusTitle); + } else { + inputEl.removeAttribute("title"); + } + }, [statusTitle]); + return (
diff --git a/src/layouts/Nav.astro b/src/layouts/Nav.astro index 3842447..13a32aa 100644 --- a/src/layouts/Nav.astro +++ b/src/layouts/Nav.astro @@ -2,7 +2,7 @@ import { metaData, API_URL } from "../config"; import { Icon } from "astro-icon/components"; -const isLoggedIn = Astro.cookies.get('access_token') || Astro.cookies.get('refresh_token'); +const isLoggedIn = Boolean(Astro.cookies.get('access_token') || Astro.cookies.get('refresh_token')); const padlockIconSvg = ` @@ -21,14 +21,27 @@ const externalLinkIconSvg = ` const navItems = [ { label: "Home", href: "/" }, { label: "Radio", href: "/radio" }, - { label: "Memes", href: "/memes" }, - { label: "Lighting", href: "/lighting", auth: true, icon: "padlock" }, - { label: "TRip", href: "/TRip", auth: true, icon: "padlock" }, + { label: "Memes", href: "/memes" }, + { label: "Lighting", href: "/lighting", auth: true }, + { label: "TRip", href: "/TRip", auth: true, icon: "pirate" }, { label: "Status", href: "https://status.boatson.boats", icon: "external" }, { label: "Git", href: "https://kode.boatson.boats", icon: "external" }, + { label: "Login", href: "/login", guestOnly: true }, ...(isLoggedIn ? [{ label: "Logout", href: "#logout", onclick: "handleLogout()" }] : []), ]; +const visibleNavItems = navItems.filter((item) => { + if (item.auth && !isLoggedIn) { + return false; + } + + if (item.guestOnly && isLoggedIn) { + return false; + } + + return true; +}); + const currentPath = Astro.url.pathname; --- @@ -37,7 +50,7 @@ const currentPath = Astro.url.pathname;
-
+
-
-