UniqueSoft/openpanel
2
0
Fork 0
mirror of https://github.com/stefanpejcic/openpanel synced 2025-06-26 18:28:26 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Update navbar-item.tsx

Browse Source
This commit is contained in:
Stefan Pejcic
2025-05-15 18:51:40 +02:00
committed by GitHub
parent 8374be074b
commit 16f6f01793
1 changed files with 47 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
website/src/refine-theme/common-header/navbar-item.tsx
View File

@@ -2,62 +2,63 @@ import React, { useEffect, useState } from "react";
import Link from "@docusaurus/Link";
import clsx from "clsx";
import { NavbarItemType } from "./constants";
import type { NavbarItemType } from "./constants";
import { TwoTonedCloudIcon } from "../icons/popover";
type NavbarItemProps = {
item: NavbarItemType;
item: NavbarItemType;
variant?: "landing" | "blog";
};
export const NavbarItem: React.FC<NavbarItemProps> = ({ item }) => {
const [theme, setTheme] = useState(null);
const [theme, setTheme] = useState(null);
useEffect(() => {
setTheme(localStorage.getItem("theme") || null);
window.addEventListener("storage", storageEventHandler, false);
useEffect(() => {
setTheme(localStorage.getItem("theme") || null);
window.addEventListener("storage", storageEventHandler, false);
return () => {
window.removeEventListener("storage", storageEventHandler, false);
};
}, []);
const storageEventHandler = () => {
setTheme(localStorage.getItem("theme") || null);
return () => {
window.removeEventListener("storage", storageEventHandler, false);
};
}, []);
let Icon = item.icon;
const storageEventHandler = () => {
setTheme(localStorage.getItem("theme") || null);
};
if (item.label === "Cloud") {
Icon = theme === "light" ? TwoTonedCloudIcon : item.icon;
}
let Icon = item.icon;
return (
<Link
key={item.label}
to={item.href}
className={clsx(
"inline-flex items-center gap-2",
"text-sm leading-6 font-normal text-gray-900 dark:text-gray-300",
"transition-colors duration-150 ease-in-out",
"no-underline",
item.label === "Hackathon"
? [
"py-1",
"px-2",
"rounded-lg",
"bg-hackathon-button-bg",
"animate-hackathon-button-bg",
"bg-refine-bg",
"text-gray-0",
"bg-[length:200%_100%]",
"text-[14px]",
"hover:text-gray-0",
]
: ["hover:text-gray-900 dark:hover:text-white"],
)}
>
{item.label}
{item.icon && <Icon />}
</Link>
);
if (item.label === "Cloud") {
Icon = theme === "light" ? TwoTonedCloudIcon : item.icon;
}
return (
<Link
key={item.label}
to={item.href}
className={clsx(
"inline-flex items-center gap-2",
"text-sm leading-6 font-normal text-gray-900 dark:text-gray-300",
"transition-colors duration-150 ease-in-out",
"no-underline",
item.label === "Hackathon"
? [
"py-1",
"px-2",
"rounded-lg",
"bg-hackathon-button-bg",
"animate-hackathon-button-bg",
"bg-refine-bg",
"text-gray-0",
"bg-[length:200%_100%]",
"text-[14px]",
"hover:text-gray-0",
]
: ["hover:text-gray-900 dark:hover:text-white"],
)}
>
{item.label}
{item.icon && <Icon />}
</Link>
);
};