import { Component, createRef, linkEvent, RefObject } from "inferno";
-import { Link } from "inferno-router";
+import { NavLink } from "inferno-router";
import {
CommentResponse,
GetReportCount,
<nav class="navbar navbar-expand-lg navbar-light shadow-sm p-0 px-3">
<div class="container">
{this.props.site_res.site_view && (
- <button
+ <NavLink
+ to="/"
+ onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
title={
this.props.site_res.site_view.site.description ||
this.props.site_res.site_view.site.name
}
- className="d-flex align-items-center navbar-brand mr-md-3 btn btn-link"
- onClick={linkEvent(this, this.handleGotoHome)}
+ className="d-flex align-items-center navbar-brand mr-md-3"
>
{this.props.site_res.site_view.site.icon && showAvatars() && (
<PictrsImage
/>
)}
{this.props.site_res.site_view.site.name}
- </button>
+ </NavLink>
)}
{this.state.isLoggedIn && (
<>
<ul class="navbar-nav ml-auto">
<li className="nav-item">
- <button
- className="p-1 navbar-toggler nav-link border-0 btn btn-link"
- onClick={linkEvent(this, this.handleGotoInbox)}
+ <NavLink
+ to="/inbox"
+ className="p-1 navbar-toggler nav-link border-0"
+ onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
title={i18n.t("unread_messages", {
count: this.state.unreadInboxCount,
formattedCount: numToSI(this.state.unreadInboxCount),
{numToSI(this.state.unreadInboxCount)}
</span>
)}
- </button>
+ </NavLink>
</li>
</ul>
{UserService.Instance.myUserInfo?.moderates.length > 0 && (
<ul class="navbar-nav ml-1">
<li className="nav-item">
- <button
- className="p-1 navbar-toggler nav-link border-0 btn btn-link"
- onClick={linkEvent(this, this.handleGotoReports)}
+ <NavLink
+ to="/reports"
+ className="p-1 navbar-toggler nav-link border-0"
+ onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
title={i18n.t("unread_reports", {
count: this.state.unreadReportCount,
formattedCount: numToSI(this.state.unreadReportCount),
{numToSI(this.state.unreadReportCount)}
</span>
)}
- </button>
+ </NavLink>
</li>
</ul>
)}
class="navbar-toggler border-0 p-1"
type="button"
aria-label="menu"
- onClick={linkEvent(this, this.expandNavbar)}
+ onClick={linkEvent(this, this.handleToggleExpandNavbar)}
data-tippy-content={i18n.t("expand_here")}
>
<Icon icon="menu" />
>
<ul class="navbar-nav my-2 mr-auto">
<li class="nav-item">
- <button
- className="nav-link btn btn-link"
- onClick={linkEvent(this, this.handleGotoCommunities)}
+ <NavLink
+ to="/communities"
+ className="nav-link"
+ onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
title={i18n.t("communities")}
>
{i18n.t("communities")}
- </button>
+ </NavLink>
</li>
<li class="nav-item">
- <button
- className="nav-link btn btn-link"
- onClick={linkEvent(this, this.handleGotoCreatePost)}
+ <NavLink
+ to={{
+ pathname: "/create_post",
+ prevPath: this.currentLocation,
+ }}
+ className="nav-link"
+ onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
title={i18n.t("create_post")}
>
{i18n.t("create_post")}
- </button>
+ </NavLink>
</li>
{this.canCreateCommunity && (
<li class="nav-item">
- <button
- className="nav-link btn btn-link"
- onClick={linkEvent(this, this.handleGotoCreateCommunity)}
+ <NavLink
+ to="/create_community"
+ className="nav-link"
+ onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
title={i18n.t("create_community")}
>
{i18n.t("create_community")}
- </button>
+ </NavLink>
</li>
)}
<li class="nav-item">
<ul class="navbar-nav my-2">
{this.canAdmin && (
<li className="nav-item">
- <button
- className="nav-link btn btn-link"
- onClick={linkEvent(this, this.handleGotoAdmin)}
+ <NavLink
+ to="/admin"
+ className="nav-link"
+ onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
title={i18n.t("admin_settings")}
>
<Icon icon="settings" />
- </button>
+ </NavLink>
</li>
)}
</ul>
<>
<ul class="navbar-nav my-2">
<li className="nav-item">
- <Link
+ <NavLink
className="nav-link"
to="/inbox"
+ onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
title={i18n.t("unread_messages", {
count: this.state.unreadInboxCount,
formattedCount: numToSI(this.state.unreadInboxCount),
{numToSI(this.state.unreadInboxCount)}
</span>
)}
- </Link>
+ </NavLink>
</li>
</ul>
{UserService.Instance.myUserInfo?.moderates.length > 0 && (
<ul class="navbar-nav my-2">
<li className="nav-item">
- <Link
+ <NavLink
className="nav-link"
to="/reports"
+ onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
title={i18n.t("unread_reports", {
count: this.state.unreadReportCount,
formattedCount: numToSI(this.state.unreadReportCount),
{numToSI(this.state.unreadReportCount)}
</span>
)}
- </Link>
+ </NavLink>
</li>
</ul>
)}
<li class="nav-item dropdown">
<button
class="nav-link btn btn-link dropdown-toggle"
- onClick={linkEvent(this, this.handleShowDropdown)}
+ onClick={linkEvent(this, this.handleToggleDropdown)}
id="navbarDropdown"
role="button"
aria-expanded="false"
</span>
</button>
{this.state.showDropdown && (
- <div class="dropdown-content">
+ <div
+ class="dropdown-content"
+ onMouseLeave={linkEvent(
+ this,
+ this.handleToggleDropdown
+ )}
+ >
<li className="nav-item">
- <button
- className="nav-link btn btn-link"
- onClick={linkEvent(this, this.handleGotoProfile)}
+ <NavLink
+ to={`/u/${UserService.Instance.myUserInfo.local_user_view.person.name}`}
+ className="nav-link"
title={i18n.t("profile")}
>
<Icon icon="user" classes="mr-1" />
{i18n.t("profile")}
- </button>
+ </NavLink>
</li>
<li className="nav-item">
- <button
- className="nav-link btn btn-link"
- onClick={linkEvent(this, this.handleGotoSettings)}
+ <NavLink
+ to="/settings"
+ className="nav-link"
title={i18n.t("settings")}
>
<Icon icon="settings" classes="mr-1" />
{i18n.t("settings")}
- </button>
+ </NavLink>
</li>
<li>
<hr class="dropdown-divider" />
) : (
<ul class="navbar-nav my-2">
<li className="nav-item">
- <button
- className="nav-link btn btn-link"
- onClick={linkEvent(this, this.handleGotoLogin)}
+ <NavLink
+ to="/login"
+ className="nav-link"
+ onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
title={i18n.t("login")}
>
{i18n.t("login")}
- </button>
+ </NavLink>
</li>
<li className="nav-item">
- <button
- className="nav-link btn btn-link"
- onClick={linkEvent(this, this.handleGotoSignup)}
+ <NavLink
+ to="/signup"
+ className="nav-link"
+ onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
title={i18n.t("sign_up")}
>
{i18n.t("sign_up")}
- </button>
+ </NavLink>
</li>
</ul>
)}
);
}
- expandNavbar(i: Navbar) {
+ handleToggleExpandNavbar(i: Navbar) {
i.state.expanded = !i.state.expanded;
i.setState(i.state);
}
+ handleHideExpandNavbar(i: Navbar) {
+ i.setState({ expanded: false, showDropdown: false });
+ }
+
handleSearchParam(i: Navbar, event: any) {
i.state.searchParam = event.target.value;
i.setState(i.state);
location.reload();
}
- handleGotoSettings(i: Navbar) {
- i.setState({ showDropdown: false, expanded: false });
- i.context.router.history.push("/settings");
- }
-
- handleGotoProfile(i: Navbar) {
- i.setState({ showDropdown: false, expanded: false });
- i.context.router.history.push(
- `/u/${UserService.Instance.myUserInfo.local_user_view.person.name}`
- );
- }
-
- handleGotoCreatePost(i: Navbar) {
- i.setState({ showDropdown: false, expanded: false });
- i.context.router.history.push("/create_post", {
- prevPath: i.currentLocation,
- });
- }
-
- handleGotoCreateCommunity(i: Navbar) {
- i.setState({ showDropdown: false, expanded: false });
- i.context.router.history.push(`/create_community`);
- }
-
- handleGotoCommunities(i: Navbar) {
- i.setState({ showDropdown: false, expanded: false });
- i.context.router.history.push(`/communities`);
- }
-
- handleGotoHome(i: Navbar) {
- i.setState({ showDropdown: false, expanded: false });
- i.context.router.history.push(`/`);
- }
-
- handleGotoInbox(i: Navbar) {
- i.setState({ showDropdown: false, expanded: false });
- i.context.router.history.push(`/inbox`);
- }
-
- handleGotoReports(i: Navbar) {
- i.setState({ showDropdown: false, expanded: false });
- i.context.router.history.push(`/reports`);
- }
-
- handleGotoAdmin(i: Navbar) {
- i.setState({ showDropdown: false, expanded: false });
- i.context.router.history.push(`/admin`);
- }
-
- handleGotoLogin(i: Navbar) {
- i.setState({ showDropdown: false, expanded: false });
- i.context.router.history.push(`/login`);
- }
-
- handleGotoSignup(i: Navbar) {
- i.setState({ showDropdown: false, expanded: false });
- i.context.router.history.push(`/signup`);
- }
-
- handleShowDropdown(i: Navbar) {
+ handleToggleDropdown(i: Navbar) {
i.state.showDropdown = !i.state.showDropdown;
i.setState(i.state);
}