mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-12-23 11:21:26 +00:00
fix: Make navbar container full screen width #1536
This commit is contained in:
Jay Sitter
parent
6b5ea004a6
commit
4800a408fd
1 changed files with 308 additions and 304 deletions
|
|
@ -79,256 +79,246 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
const siteView = this.props.siteRes?.site_view;
|
||||
const person = UserService.Instance.myUserInfo?.local_user_view.person;
|
||||
return (
|
||||
<nav
|
||||
className="navbar navbar-expand-md navbar-light shadow-sm p-0 px-3 container-lg"
|
||||
id="navbar"
|
||||
>
|
||||
<NavLink
|
||||
id="navTitle"
|
||||
to="/"
|
||||
title={siteView?.site.description ?? siteView?.site.name}
|
||||
className="d-flex align-items-center navbar-brand me-md-3"
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
<div className="shadow-sm">
|
||||
<nav
|
||||
className="navbar navbar-expand-md navbar-light p-0 px-3 container-lg"
|
||||
id="navbar"
|
||||
>
|
||||
{siteView?.site.icon && showAvatars() && (
|
||||
<PictrsImage src={siteView.site.icon} icon />
|
||||
)}
|
||||
{siteView?.site.name}
|
||||
</NavLink>
|
||||
{person && (
|
||||
<ul className="navbar-nav d-flex flex-row ms-auto d-md-none">
|
||||
<li id="navMessages" className="nav-item nav-item-icon">
|
||||
<NavLink
|
||||
to="/inbox"
|
||||
className="p-1 nav-link border-0 nav-messages"
|
||||
title={I18NextService.i18n.t("unread_messages", {
|
||||
count: Number(this.state.unreadApplicationCountRes.state),
|
||||
formattedCount: numToSI(this.unreadInboxCount),
|
||||
})}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="bell" />
|
||||
{this.unreadInboxCount > 0 && (
|
||||
<span className="mx-1 badge text-bg-light">
|
||||
{numToSI(this.unreadInboxCount)}
|
||||
</span>
|
||||
)}
|
||||
</NavLink>
|
||||
</li>
|
||||
{this.moderatesSomething && (
|
||||
<li className="nav-item nav-item-icon">
|
||||
<NavLink
|
||||
id="navTitle"
|
||||
to="/"
|
||||
title={siteView?.site.description ?? siteView?.site.name}
|
||||
className="d-flex align-items-center navbar-brand me-md-3"
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
{siteView?.site.icon && showAvatars() && (
|
||||
<PictrsImage src={siteView.site.icon} icon />
|
||||
)}
|
||||
{siteView?.site.name}
|
||||
</NavLink>
|
||||
{person && (
|
||||
<ul className="navbar-nav d-flex flex-row ms-auto d-md-none">
|
||||
<li id="navMessages" className="nav-item nav-item-icon">
|
||||
<NavLink
|
||||
to="/reports"
|
||||
className="p-1 nav-link border-0"
|
||||
title={I18NextService.i18n.t("unread_reports", {
|
||||
count: Number(this.unreadReportCount),
|
||||
formattedCount: numToSI(this.unreadReportCount),
|
||||
to="/inbox"
|
||||
className="p-1 nav-link border-0 nav-messages"
|
||||
title={I18NextService.i18n.t("unread_messages", {
|
||||
count: Number(this.state.unreadApplicationCountRes.state),
|
||||
formattedCount: numToSI(this.unreadInboxCount),
|
||||
})}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="shield" />
|
||||
{this.unreadReportCount > 0 && (
|
||||
<Icon icon="bell" />
|
||||
{this.unreadInboxCount > 0 && (
|
||||
<span className="mx-1 badge text-bg-light">
|
||||
{numToSI(this.unreadReportCount)}
|
||||
{numToSI(this.unreadInboxCount)}
|
||||
</span>
|
||||
)}
|
||||
</NavLink>
|
||||
</li>
|
||||
)}
|
||||
{amAdmin() && (
|
||||
<li className="nav-item nav-item-icon">
|
||||
<NavLink
|
||||
to="/registration_applications"
|
||||
className="p-1 nav-link border-0"
|
||||
title={I18NextService.i18n.t(
|
||||
"unread_registration_applications",
|
||||
{
|
||||
count: Number(this.unreadApplicationCount),
|
||||
formattedCount: numToSI(this.unreadApplicationCount),
|
||||
}
|
||||
)}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="clipboard" />
|
||||
{this.unreadApplicationCount > 0 && (
|
||||
<span className="mx-1 badge text-bg-light">
|
||||
{numToSI(this.unreadApplicationCount)}
|
||||
</span>
|
||||
)}
|
||||
</NavLink>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
)}
|
||||
<button
|
||||
className="navbar-toggler border-0 p-1"
|
||||
type="button"
|
||||
aria-label="menu"
|
||||
data-tippy-content={I18NextService.i18n.t("expand_here")}
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarDropdown"
|
||||
aria-controls="navbarDropdown"
|
||||
aria-expanded="false"
|
||||
ref={this.collapseButtonRef}
|
||||
>
|
||||
<Icon icon="menu" />
|
||||
</button>
|
||||
<div
|
||||
className="collapse navbar-collapse my-2"
|
||||
id="navbarDropdown"
|
||||
ref={this.mobileMenuRef}
|
||||
>
|
||||
<ul id="navbarLinks" className="me-auto navbar-nav">
|
||||
<li className="nav-item">
|
||||
<NavLink
|
||||
to="/communities"
|
||||
className="nav-link"
|
||||
title={I18NextService.i18n.t("communities")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
{I18NextService.i18n.t("communities")}
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
{/* TODO make sure this works: https://github.com/infernojs/inferno/issues/1608 */}
|
||||
<NavLink
|
||||
to={{
|
||||
pathname: "/create_post",
|
||||
search: "",
|
||||
hash: "",
|
||||
key: "",
|
||||
state: { prevPath: this.currentLocation },
|
||||
}}
|
||||
className="nav-link"
|
||||
title={I18NextService.i18n.t("create_post")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
{I18NextService.i18n.t("create_post")}
|
||||
</NavLink>
|
||||
</li>
|
||||
{this.props.siteRes && canCreateCommunity(this.props.siteRes) && (
|
||||
<li className="nav-item">
|
||||
<NavLink
|
||||
to="/create_community"
|
||||
className="nav-link"
|
||||
title={I18NextService.i18n.t("create_community")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
{I18NextService.i18n.t("create_community")}
|
||||
</NavLink>
|
||||
</li>
|
||||
)}
|
||||
<li className="nav-item">
|
||||
<a
|
||||
className="nav-link d-inline-flex align-items-center d-md-inline-block"
|
||||
title={I18NextService.i18n.t("support_lemmy")}
|
||||
href={donateLemmyUrl}
|
||||
>
|
||||
<Icon icon="heart" classes="small" />
|
||||
<span className="d-inline ms-1 d-md-none ms-md-0">
|
||||
{I18NextService.i18n.t("support_lemmy")}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul id="navbarIcons" className="navbar-nav">
|
||||
<li id="navSearch" className="nav-item">
|
||||
<NavLink
|
||||
to="/search"
|
||||
className="nav-link d-inline-flex align-items-center d-md-inline-block"
|
||||
title={I18NextService.i18n.t("search")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="search" />
|
||||
<span className="d-inline ms-1 d-md-none ms-md-0">
|
||||
{I18NextService.i18n.t("search")}
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
{amAdmin() && (
|
||||
<li id="navAdmin" className="nav-item">
|
||||
<NavLink
|
||||
to="/admin"
|
||||
className="nav-link d-inline-flex align-items-center d-md-inline-block"
|
||||
title={I18NextService.i18n.t("admin_settings")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="settings" />
|
||||
<span className="d-inline ms-1 d-md-none ms-md-0">
|
||||
{I18NextService.i18n.t("admin_settings")}
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
)}
|
||||
{person ? (
|
||||
<>
|
||||
<li id="navMessages" className="nav-item">
|
||||
{this.moderatesSomething && (
|
||||
<li className="nav-item nav-item-icon">
|
||||
<NavLink
|
||||
className="nav-link d-inline-flex align-items-center d-md-inline-block"
|
||||
to="/inbox"
|
||||
title={I18NextService.i18n.t("unread_messages", {
|
||||
count: Number(this.unreadInboxCount),
|
||||
formattedCount: numToSI(this.unreadInboxCount),
|
||||
to="/reports"
|
||||
className="p-1 nav-link border-0"
|
||||
title={I18NextService.i18n.t("unread_reports", {
|
||||
count: Number(this.unreadReportCount),
|
||||
formattedCount: numToSI(this.unreadReportCount),
|
||||
})}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="bell" />
|
||||
<span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
|
||||
{I18NextService.i18n.t("unread_messages", {
|
||||
count: Number(this.unreadInboxCount),
|
||||
formattedCount: numToSI(this.unreadInboxCount),
|
||||
})}
|
||||
</span>
|
||||
{this.unreadInboxCount > 0 && (
|
||||
<Icon icon="shield" />
|
||||
{this.unreadReportCount > 0 && (
|
||||
<span className="mx-1 badge text-bg-light">
|
||||
{numToSI(this.unreadInboxCount)}
|
||||
{numToSI(this.unreadReportCount)}
|
||||
</span>
|
||||
)}
|
||||
</NavLink>
|
||||
</li>
|
||||
{this.moderatesSomething && (
|
||||
<li id="navModeration" className="nav-item">
|
||||
)}
|
||||
{amAdmin() && (
|
||||
<li className="nav-item nav-item-icon">
|
||||
<NavLink
|
||||
to="/registration_applications"
|
||||
className="p-1 nav-link border-0"
|
||||
title={I18NextService.i18n.t(
|
||||
"unread_registration_applications",
|
||||
{
|
||||
count: Number(this.unreadApplicationCount),
|
||||
formattedCount: numToSI(this.unreadApplicationCount),
|
||||
}
|
||||
)}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="clipboard" />
|
||||
{this.unreadApplicationCount > 0 && (
|
||||
<span className="mx-1 badge text-bg-light">
|
||||
{numToSI(this.unreadApplicationCount)}
|
||||
</span>
|
||||
)}
|
||||
</NavLink>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
)}
|
||||
<button
|
||||
className="navbar-toggler border-0 p-1"
|
||||
type="button"
|
||||
aria-label="menu"
|
||||
data-tippy-content={I18NextService.i18n.t("expand_here")}
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarDropdown"
|
||||
aria-controls="navbarDropdown"
|
||||
aria-expanded="false"
|
||||
ref={this.collapseButtonRef}
|
||||
>
|
||||
<Icon icon="menu" />
|
||||
</button>
|
||||
<div
|
||||
className="collapse navbar-collapse my-2"
|
||||
id="navbarDropdown"
|
||||
ref={this.mobileMenuRef}
|
||||
>
|
||||
<ul id="navbarLinks" className="me-auto navbar-nav">
|
||||
<li className="nav-item">
|
||||
<NavLink
|
||||
to="/communities"
|
||||
className="nav-link"
|
||||
title={I18NextService.i18n.t("communities")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
{I18NextService.i18n.t("communities")}
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
{/* TODO make sure this works: https://github.com/infernojs/inferno/issues/1608 */}
|
||||
<NavLink
|
||||
to={{
|
||||
pathname: "/create_post",
|
||||
search: "",
|
||||
hash: "",
|
||||
key: "",
|
||||
state: { prevPath: this.currentLocation },
|
||||
}}
|
||||
className="nav-link"
|
||||
title={I18NextService.i18n.t("create_post")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
{I18NextService.i18n.t("create_post")}
|
||||
</NavLink>
|
||||
</li>
|
||||
{this.props.siteRes && canCreateCommunity(this.props.siteRes) && (
|
||||
<li className="nav-item">
|
||||
<NavLink
|
||||
to="/create_community"
|
||||
className="nav-link"
|
||||
title={I18NextService.i18n.t("create_community")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
{I18NextService.i18n.t("create_community")}
|
||||
</NavLink>
|
||||
</li>
|
||||
)}
|
||||
<li className="nav-item">
|
||||
<a
|
||||
className="nav-link d-inline-flex align-items-center d-md-inline-block"
|
||||
title={I18NextService.i18n.t("support_lemmy")}
|
||||
href={donateLemmyUrl}
|
||||
>
|
||||
<Icon icon="heart" classes="small" />
|
||||
<span className="d-inline ms-1 d-md-none ms-md-0">
|
||||
{I18NextService.i18n.t("support_lemmy")}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul id="navbarIcons" className="navbar-nav">
|
||||
<li id="navSearch" className="nav-item">
|
||||
<NavLink
|
||||
to="/search"
|
||||
className="nav-link d-inline-flex align-items-center d-md-inline-block"
|
||||
title={I18NextService.i18n.t("search")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="search" />
|
||||
<span className="d-inline ms-1 d-md-none ms-md-0">
|
||||
{I18NextService.i18n.t("search")}
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
{amAdmin() && (
|
||||
<li id="navAdmin" className="nav-item">
|
||||
<NavLink
|
||||
to="/admin"
|
||||
className="nav-link d-inline-flex align-items-center d-md-inline-block"
|
||||
title={I18NextService.i18n.t("admin_settings")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="settings" />
|
||||
<span className="d-inline ms-1 d-md-none ms-md-0">
|
||||
{I18NextService.i18n.t("admin_settings")}
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
)}
|
||||
{person ? (
|
||||
<>
|
||||
<li id="navMessages" className="nav-item">
|
||||
<NavLink
|
||||
className="nav-link d-inline-flex align-items-center d-md-inline-block"
|
||||
to="/reports"
|
||||
title={I18NextService.i18n.t("unread_reports", {
|
||||
count: Number(this.unreadReportCount),
|
||||
formattedCount: numToSI(this.unreadReportCount),
|
||||
to="/inbox"
|
||||
title={I18NextService.i18n.t("unread_messages", {
|
||||
count: Number(this.unreadInboxCount),
|
||||
formattedCount: numToSI(this.unreadInboxCount),
|
||||
})}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="shield" />
|
||||
<Icon icon="bell" />
|
||||
<span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
|
||||
{I18NextService.i18n.t("unread_reports", {
|
||||
count: Number(this.unreadReportCount),
|
||||
formattedCount: numToSI(this.unreadReportCount),
|
||||
{I18NextService.i18n.t("unread_messages", {
|
||||
count: Number(this.unreadInboxCount),
|
||||
formattedCount: numToSI(this.unreadInboxCount),
|
||||
})}
|
||||
</span>
|
||||
{this.unreadReportCount > 0 && (
|
||||
{this.unreadInboxCount > 0 && (
|
||||
<span className="mx-1 badge text-bg-light">
|
||||
{numToSI(this.unreadReportCount)}
|
||||
{numToSI(this.unreadInboxCount)}
|
||||
</span>
|
||||
)}
|
||||
</NavLink>
|
||||
</li>
|
||||
)}
|
||||
{amAdmin() && (
|
||||
<li id="navApplications" className="nav-item">
|
||||
<NavLink
|
||||
to="/registration_applications"
|
||||
className="nav-link d-inline-flex align-items-center d-md-inline-block"
|
||||
title={I18NextService.i18n.t(
|
||||
"unread_registration_applications",
|
||||
{
|
||||
count: Number(this.unreadApplicationCount),
|
||||
formattedCount: numToSI(this.unreadApplicationCount),
|
||||
}
|
||||
)}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="clipboard" />
|
||||
<span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
|
||||
{I18NextService.i18n.t(
|
||||
{this.moderatesSomething && (
|
||||
<li id="navModeration" className="nav-item">
|
||||
<NavLink
|
||||
className="nav-link d-inline-flex align-items-center d-md-inline-block"
|
||||
to="/reports"
|
||||
title={I18NextService.i18n.t("unread_reports", {
|
||||
count: Number(this.unreadReportCount),
|
||||
formattedCount: numToSI(this.unreadReportCount),
|
||||
})}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="shield" />
|
||||
<span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
|
||||
{I18NextService.i18n.t("unread_reports", {
|
||||
count: Number(this.unreadReportCount),
|
||||
formattedCount: numToSI(this.unreadReportCount),
|
||||
})}
|
||||
</span>
|
||||
{this.unreadReportCount > 0 && (
|
||||
<span className="mx-1 badge text-bg-light">
|
||||
{numToSI(this.unreadReportCount)}
|
||||
</span>
|
||||
)}
|
||||
</NavLink>
|
||||
</li>
|
||||
)}
|
||||
{amAdmin() && (
|
||||
<li id="navApplications" className="nav-item">
|
||||
<NavLink
|
||||
to="/registration_applications"
|
||||
className="nav-link d-inline-flex align-items-center d-md-inline-block"
|
||||
title={I18NextService.i18n.t(
|
||||
"unread_registration_applications",
|
||||
{
|
||||
count: Number(this.unreadApplicationCount),
|
||||
|
|
@ -337,97 +327,111 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
),
|
||||
}
|
||||
)}
|
||||
</span>
|
||||
{this.unreadApplicationCount > 0 && (
|
||||
<span className="mx-1 badge text-bg-light">
|
||||
{numToSI(this.unreadApplicationCount)}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="clipboard" />
|
||||
<span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
|
||||
{I18NextService.i18n.t(
|
||||
"unread_registration_applications",
|
||||
{
|
||||
count: Number(this.unreadApplicationCount),
|
||||
formattedCount: numToSI(
|
||||
this.unreadApplicationCount
|
||||
),
|
||||
}
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
{this.unreadApplicationCount > 0 && (
|
||||
<span className="mx-1 badge text-bg-light">
|
||||
{numToSI(this.unreadApplicationCount)}
|
||||
</span>
|
||||
)}
|
||||
</NavLink>
|
||||
</li>
|
||||
)}
|
||||
{person && (
|
||||
<li id="dropdownUser" className="dropdown">
|
||||
<button
|
||||
type="button"
|
||||
className="btn dropdown-toggle"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
>
|
||||
{showAvatars() && person.avatar && (
|
||||
<PictrsImage src={person.avatar} icon />
|
||||
)}
|
||||
{person.display_name ?? person.name}
|
||||
</button>
|
||||
<ul
|
||||
className="dropdown-menu"
|
||||
style={{ "min-width": "fit-content" }}
|
||||
>
|
||||
<li>
|
||||
<NavLink
|
||||
to={`/u/${person.name}`}
|
||||
className="dropdown-item px-2"
|
||||
title={I18NextService.i18n.t("profile")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="user" classes="me-1" />
|
||||
{I18NextService.i18n.t("profile")}
|
||||
</NavLink>
|
||||
</li>
|
||||
<li>
|
||||
<NavLink
|
||||
to="/settings"
|
||||
className="dropdown-item px-2"
|
||||
title={I18NextService.i18n.t("settings")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="settings" classes="me-1" />
|
||||
{I18NextService.i18n.t("settings")}
|
||||
</NavLink>
|
||||
</li>
|
||||
<li>
|
||||
<hr className="dropdown-divider" />
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
className="dropdown-item btn btn-link px-2"
|
||||
onClick={linkEvent(this, handleLogOut)}
|
||||
>
|
||||
<Icon icon="log-out" classes="me-1" />
|
||||
{I18NextService.i18n.t("logout")}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<li className="nav-item">
|
||||
<NavLink
|
||||
to="/login"
|
||||
className="nav-link"
|
||||
title={I18NextService.i18n.t("login")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
{I18NextService.i18n.t("login")}
|
||||
</NavLink>
|
||||
</li>
|
||||
)}
|
||||
{person && (
|
||||
<li id="dropdownUser" className="dropdown">
|
||||
<button
|
||||
type="button"
|
||||
className="btn dropdown-toggle"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
<li className="nav-item">
|
||||
<NavLink
|
||||
to="/signup"
|
||||
className="nav-link"
|
||||
title={I18NextService.i18n.t("sign_up")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
{showAvatars() && person.avatar && (
|
||||
<PictrsImage src={person.avatar} icon />
|
||||
)}
|
||||
{person.display_name ?? person.name}
|
||||
</button>
|
||||
<ul
|
||||
className="dropdown-menu"
|
||||
style={{ "min-width": "fit-content" }}
|
||||
>
|
||||
<li>
|
||||
<NavLink
|
||||
to={`/u/${person.name}`}
|
||||
className="dropdown-item px-2"
|
||||
title={I18NextService.i18n.t("profile")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="user" classes="me-1" />
|
||||
{I18NextService.i18n.t("profile")}
|
||||
</NavLink>
|
||||
</li>
|
||||
<li>
|
||||
<NavLink
|
||||
to="/settings"
|
||||
className="dropdown-item px-2"
|
||||
title={I18NextService.i18n.t("settings")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="settings" classes="me-1" />
|
||||
{I18NextService.i18n.t("settings")}
|
||||
</NavLink>
|
||||
</li>
|
||||
<li>
|
||||
<hr className="dropdown-divider" />
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
className="dropdown-item btn btn-link px-2"
|
||||
onClick={linkEvent(this, handleLogOut)}
|
||||
>
|
||||
<Icon icon="log-out" classes="me-1" />
|
||||
{I18NextService.i18n.t("logout")}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
{I18NextService.i18n.t("sign_up")}
|
||||
</NavLink>
|
||||
</li>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<li className="nav-item">
|
||||
<NavLink
|
||||
to="/login"
|
||||
className="nav-link"
|
||||
title={I18NextService.i18n.t("login")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
{I18NextService.i18n.t("login")}
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<NavLink
|
||||
to="/signup"
|
||||
className="nav-link"
|
||||
title={I18NextService.i18n.t("sign_up")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
{I18NextService.i18n.t("sign_up")}
|
||||
</NavLink>
|
||||
</li>
|
||||
</>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue