| 6 | import Image from "next/image"; |
| 7 | |
| 8 | export default function AdminSidebar({ className }: { className?: string }) { |
| 9 | const { t } = useTranslation(); |
| 10 | const LINKWARDEN_VERSION = process.env.version; |
| 11 | |
| 12 | const { data: user } = useUser(); |
| 13 | |
| 14 | const router = useRouter(); |
| 15 | const [active, setActive] = useState(""); |
| 16 | |
| 17 | useEffect(() => { |
| 18 | setActive(router.asPath); |
| 19 | }, [router]); |
| 20 | |
| 21 | return ( |
| 22 | <div |
| 23 | className={`bg-base-200 h-screen w-80 overflow-y-auto border-solid border border-base-200 border-r-neutral-content p-2 z-20 flex flex-col gap-5 justify-between ${ |
| 24 | className || "" |
| 25 | }`} |
| 26 | > |
| 27 | <div className="flex flex-col gap-1"> |
| 28 | <div className="flex items-center justify-between mb-4"> |
| 29 | {user?.theme === "light" ? ( |
| 30 | <Image |
| 31 | src={"/linkwarden_light.png"} |
| 32 | width={640} |
| 33 | height={136} |
| 34 | alt="Linkwarden" |
| 35 | className="h-9 w-auto cursor-pointer" |
| 36 | onClick={() => router.push("/dashboard")} |
| 37 | priority |
| 38 | /> |
| 39 | ) : ( |
| 40 | <Image |
| 41 | src={"/linkwarden_dark.png"} |
| 42 | width={640} |
| 43 | height={136} |
| 44 | alt="Linkwarden" |
| 45 | className="h-9 w-auto cursor-pointer" |
| 46 | onClick={() => router.push("/dashboard")} |
| 47 | priority |
| 48 | /> |
| 49 | )} |
| 50 | </div> |
| 51 | <Link href="/admin/user-administration"> |
| 52 | <div |
| 53 | className={`${ |
| 54 | active === "/admin/user-administration" |
| 55 | ? "bg-primary/20" |
| 56 | : "hover:bg-neutral/20" |
| 57 | } duration-200 cursor-pointer flex items-center gap-2 rounded-lg px-3 py-1`} |
| 58 | > |
| 59 | <i className="bi-people text-primary text-xl drop-shadow"></i> |
| 60 | <p className="truncate w-full font-semibold text-sm"> |
| 61 | {t("user_administration")} |
| 62 | </p> |
| 63 | </div> |
| 64 | </Link> |
| 65 | |