fix: set navigation icons to not shrink (#3186)

This commit is contained in:
imikod 2024-04-08 05:16:52 +03:00 committed by GitHub
parent 756ab71302
commit 90ed908d2e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -52,31 +52,31 @@ const Navigation = (props: Props) => {
id: "header-home", id: "header-home",
path: Routes.HOME, path: Routes.HOME,
title: t("common.home"), title: t("common.home"),
icon: <Icon.Home className="w-6 h-auto opacity-70" />, icon: <Icon.Home className="w-6 h-auto opacity-70 shrink-0" />,
}; };
const timelineNavLink: NavLinkItem = { const timelineNavLink: NavLinkItem = {
id: "header-timeline", id: "header-timeline",
path: Routes.TIMELINE, path: Routes.TIMELINE,
title: t("timeline.title"), title: t("timeline.title"),
icon: <Icon.GanttChartSquare className="w-6 h-auto opacity-70" />, icon: <Icon.GanttChartSquare className="w-6 h-auto opacity-70 shrink-0" />,
}; };
const resourcesNavLink: NavLinkItem = { const resourcesNavLink: NavLinkItem = {
id: "header-resources", id: "header-resources",
path: Routes.RESOURCES, path: Routes.RESOURCES,
title: t("common.resources"), title: t("common.resources"),
icon: <Icon.Paperclip className="w-6 h-auto opacity-70" />, icon: <Icon.Paperclip className="w-6 h-auto opacity-70 shrink-0" />,
}; };
const exploreNavLink: NavLinkItem = { const exploreNavLink: NavLinkItem = {
id: "header-explore", id: "header-explore",
path: Routes.EXPLORE, path: Routes.EXPLORE,
title: t("common.explore"), title: t("common.explore"),
icon: <Icon.Globe2 className="w-6 h-auto opacity-70" />, icon: <Icon.Globe2 className="w-6 h-auto opacity-70 shrink-0" />,
}; };
const profileNavLink: NavLinkItem = { const profileNavLink: NavLinkItem = {
id: "header-profile", id: "header-profile",
path: user ? `/u/${encodeURIComponent(user.username)}` : "", path: user ? `/u/${encodeURIComponent(user.username)}` : "",
title: t("common.profile"), title: t("common.profile"),
icon: <Icon.User2 className="w-6 h-auto opacity-70" />, icon: <Icon.User2 className="w-6 h-auto opacity-70 shrink-0" />,
}; };
const inboxNavLink: NavLinkItem = { const inboxNavLink: NavLinkItem = {
id: "header-inbox", id: "header-inbox",
@ -85,7 +85,7 @@ const Navigation = (props: Props) => {
icon: ( icon: (
<> <>
<div className="relative"> <div className="relative">
<Icon.Bell className="w-6 h-auto opacity-70" /> <Icon.Bell className="w-6 h-auto opacity-70 shrink-0" />
{hasUnreadInbox && <div className="absolute top-0 left-5 w-2 h-2 rounded-full bg-blue-500"></div>} {hasUnreadInbox && <div className="absolute top-0 left-5 w-2 h-2 rounded-full bg-blue-500"></div>}
</div> </div>
</> </>
@ -95,25 +95,25 @@ const Navigation = (props: Props) => {
id: "header-archived", id: "header-archived",
path: Routes.ARCHIVED, path: Routes.ARCHIVED,
title: t("common.archived"), title: t("common.archived"),
icon: <Icon.Archive className="w-6 h-auto opacity-70" />, icon: <Icon.Archive className="w-6 h-auto opacity-70 shrink-0" />,
}; };
const settingNavLink: NavLinkItem = { const settingNavLink: NavLinkItem = {
id: "header-setting", id: "header-setting",
path: Routes.SETTING, path: Routes.SETTING,
title: t("common.settings"), title: t("common.settings"),
icon: <Icon.Settings className="w-6 h-auto opacity-70" />, icon: <Icon.Settings className="w-6 h-auto opacity-70 shrink-0" />,
}; };
const signInNavLink: NavLinkItem = { const signInNavLink: NavLinkItem = {
id: "header-auth", id: "header-auth",
path: Routes.AUTH, path: Routes.AUTH,
title: t("common.sign-in"), title: t("common.sign-in"),
icon: <Icon.LogIn className="w-6 h-auto opacity-70" />, icon: <Icon.LogIn className="w-6 h-auto opacity-70 shrink-0" />,
}; };
const aboutNavLink: NavLinkItem = { const aboutNavLink: NavLinkItem = {
id: "header-about", id: "header-about",
path: Routes.ABOUT, path: Routes.ABOUT,
title: t("common.about"), title: t("common.about"),
icon: <Icon.Smile className="w-6 h-auto opacity-70" />, icon: <Icon.Smile className="w-6 h-auto opacity-70 shrink-0" />,
}; };
const navLinks: NavLinkItem[] = user const navLinks: NavLinkItem[] = user