From 7c2a471031a58a5703da9fee466aff99d77c7213 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Marcin=20Mr=C3=B3z?= <mrfrostn@gmail.com> Date: Sat, 17 Jun 2023 13:55:59 +0200 Subject: [PATCH] feat(navbar): Add labels for navbar items on mobile (#1323) MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit * feat(navbar): Add labels for navbar items on mobile * fix(navbar): Fix icons positioning on desktop --------- Co-authored-by: Marcin MroÌz <marcin.mroz@displate.com> Co-authored-by: SleeplessOne1917 <abias1122@gmail.com> Co-authored-by: Dessalines <dessalines@users.noreply.github.com> --- src/shared/components/app/navbar.tsx | 39 +++++++++++++++++++++++----- 1 file changed, 33 insertions(+), 6 deletions(-) diff --git a/src/shared/components/app/navbar.tsx b/src/shared/components/app/navbar.tsx index c17837c..a19ea5c 100644 --- a/src/shared/components/app/navbar.tsx +++ b/src/shared/components/app/navbar.tsx @@ -224,11 +224,14 @@ export class Navbar extends Component<NavbarProps, NavbarState> { )} <li className="nav-item"> <a - className="nav-link" + className="nav-link d-inline-flex align-items-center d-md-inline-block" title={i18n.t("support_lemmy")} href={donateLemmyUrl} > <Icon icon="heart" classes="small" /> + <span className="d-inline ml-1 d-md-none ml-md-0"> + {i18n.t("support_lemmy")} + </span> </a> </li> </ul> @@ -236,22 +239,28 @@ export class Navbar extends Component<NavbarProps, NavbarState> { <li id="navSearch" className="nav-item"> <NavLink to="/search" - className="nav-link" + className="nav-link d-inline-flex align-items-center d-md-inline-block" title={i18n.t("search")} onMouseUp={linkEvent(this, handleCollapseClick)} > <Icon icon="search" /> + <span className="d-inline ml-1 d-md-none ml-md-0"> + {i18n.t("search")} + </span> </NavLink> </li> {amAdmin() && ( <li id="navAdmin" className="nav-item"> <NavLink to="/admin" - className="nav-link" + className="nav-link d-inline-flex align-items-center d-md-inline-block" title={i18n.t("admin_settings")} onMouseUp={linkEvent(this, handleCollapseClick)} > <Icon icon="settings" /> + <span className="d-inline ml-1 d-md-none ml-md-0"> + {i18n.t("admin_settings")} + </span> </NavLink> </li> )} @@ -259,7 +268,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> { <> <li id="navMessages" className="nav-item"> <NavLink - className="nav-link" + className="nav-link d-inline-flex align-items-center d-md-inline-block" to="/inbox" title={i18n.t("unread_messages", { count: Number(this.unreadInboxCount), @@ -268,6 +277,12 @@ export class Navbar extends Component<NavbarProps, NavbarState> { onMouseUp={linkEvent(this, handleCollapseClick)} > <Icon icon="bell" /> + <span className="badge badge-light d-inline ml-1 d-md-none ml-md-0"> + {i18n.t("unread_messages", { + count: Number(this.unreadInboxCount), + formattedCount: numToSI(this.unreadInboxCount), + })} + </span> {this.unreadInboxCount > 0 && ( <span className="mx-1 badge badge-light"> {numToSI(this.unreadInboxCount)} @@ -278,7 +293,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> { {this.moderatesSomething && ( <li id="navModeration" className="nav-item"> <NavLink - className="nav-link" + className="nav-link d-inline-flex align-items-center d-md-inline-block" to="/reports" title={i18n.t("unread_reports", { count: Number(this.unreadReportCount), @@ -287,6 +302,12 @@ export class Navbar extends Component<NavbarProps, NavbarState> { onMouseUp={linkEvent(this, handleCollapseClick)} > <Icon icon="shield" /> + <span className="badge badge-light d-inline ml-1 d-md-none ml-md-0"> + {i18n.t("unread_reports", { + count: Number(this.unreadReportCount), + formattedCount: numToSI(this.unreadReportCount), + })} + </span> {this.unreadReportCount > 0 && ( <span className="mx-1 badge badge-light"> {numToSI(this.unreadReportCount)} @@ -299,7 +320,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> { <li id="navApplications" className="nav-item"> <NavLink to="/registration_applications" - className="nav-link" + className="nav-link d-inline-flex align-items-center d-md-inline-block" title={i18n.t("unread_registration_applications", { count: Number(this.unreadApplicationCount), formattedCount: numToSI(this.unreadApplicationCount), @@ -307,6 +328,12 @@ export class Navbar extends Component<NavbarProps, NavbarState> { onMouseUp={linkEvent(this, handleCollapseClick)} > <Icon icon="clipboard" /> + <span className="badge badge-light d-inline ml-1 d-md-none ml-md-0"> + {i18n.t("unread_registration_applications", { + count: Number(this.unreadApplicationCount), + formattedCount: numToSI(this.unreadApplicationCount), + })} + </span> {this.unreadApplicationCount > 0 && ( <span className="mx-1 badge badge-light"> {numToSI(this.unreadApplicationCount)} -- 2.44.1