mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-11-24 07:16:19 +00:00
Navbar fix 2 (#1038)
* Fix navbar not closing on mobile when it should * Get rid of unnecessary HTML tags * Forgot to include this
This commit is contained in:
SleeplessOne1917
GitHub
parent
a3c37d37a8
commit
42ebb57b22
|
|
@ -1,4 +1,4 @@
|
|||
import { Component, linkEvent } from "inferno";
|
||||
import { Component, createRef, linkEvent } from "inferno";
|
||||
import { NavLink } from "inferno-router";
|
||||
import {
|
||||
CommentResponse,
|
||||
|
|
@ -39,14 +39,22 @@ interface NavbarProps {
|
|||
}
|
||||
|
||||
interface NavbarState {
|
||||
expanded: boolean;
|
||||
unreadInboxCount: number;
|
||||
unreadReportCount: number;
|
||||
unreadApplicationCount: number;
|
||||
showDropdown: boolean;
|
||||
onSiteBanner?(url: string): any;
|
||||
}
|
||||
|
||||
function handleCollapseClick(i: Navbar) {
|
||||
if (i.collapseButtonRef.current?.ariaExpanded === "true") {
|
||||
i.collapseButtonRef.current?.click();
|
||||
}
|
||||
}
|
||||
|
||||
function handleLogOut() {
|
||||
UserService.Instance.logout();
|
||||
}
|
||||
|
||||
export class Navbar extends Component<NavbarProps, NavbarState> {
|
||||
private wsSub: Subscription;
|
||||
private userSub: Subscription;
|
||||
|
|
@ -57,10 +65,9 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
unreadInboxCount: 0,
|
||||
unreadReportCount: 0,
|
||||
unreadApplicationCount: 0,
|
||||
expanded: false,
|
||||
showDropdown: false,
|
||||
};
|
||||
subscription: any;
|
||||
collapseButtonRef = createRef<HTMLButtonElement>();
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
|
|
@ -113,40 +120,34 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
this.unreadApplicationCountSub.unsubscribe();
|
||||
}
|
||||
|
||||
render() {
|
||||
return this.navbar();
|
||||
}
|
||||
|
||||
// TODO class active corresponding to current page
|
||||
navbar() {
|
||||
let siteView = this.props.siteRes?.site_view;
|
||||
let person = UserService.Instance.myUserInfo?.local_user_view.person;
|
||||
render() {
|
||||
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">
|
||||
<div className="container-lg">
|
||||
<nav className="navbar navbar-expand-md navbar-light shadow-sm p-0 px-3 container-lg">
|
||||
<NavLink
|
||||
to="/"
|
||||
onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
|
||||
title={siteView?.site.description ?? siteView?.site.name ?? "Lemmy"}
|
||||
title={siteView?.site.description ?? siteView?.site.name}
|
||||
className="d-flex align-items-center navbar-brand mr-md-3"
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
{siteView?.site.icon && showAvatars() && (
|
||||
<PictrsImage src={siteView.site.icon} icon />
|
||||
)}
|
||||
{siteView?.site.name ?? "Lemmy"}
|
||||
{siteView?.site.name}
|
||||
</NavLink>
|
||||
{UserService.Instance.myUserInfo && (
|
||||
<>
|
||||
<ul className="navbar-nav ml-auto">
|
||||
{person && (
|
||||
<ul className="navbar-nav d-flex flex-row ml-auto d-md-none">
|
||||
<li className="nav-item">
|
||||
<NavLink
|
||||
to="/inbox"
|
||||
className="p-1 navbar-toggler nav-link border-0"
|
||||
onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
|
||||
className="p-1 nav-link border-0"
|
||||
title={i18n.t("unread_messages", {
|
||||
count: Number(this.state.unreadInboxCount),
|
||||
formattedCount: numToSI(this.state.unreadInboxCount),
|
||||
})}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="bell" />
|
||||
{this.state.unreadInboxCount > 0 && (
|
||||
|
|
@ -156,18 +157,16 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
)}
|
||||
</NavLink>
|
||||
</li>
|
||||
</ul>
|
||||
{this.moderatesSomething && (
|
||||
<ul className="navbar-nav ml-1">
|
||||
<li className="nav-item">
|
||||
<NavLink
|
||||
to="/reports"
|
||||
className="p-1 navbar-toggler nav-link border-0"
|
||||
onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
|
||||
className="p-1 nav-link border-0"
|
||||
title={i18n.t("unread_reports", {
|
||||
count: Number(this.state.unreadReportCount),
|
||||
formattedCount: numToSI(this.state.unreadReportCount),
|
||||
})}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="shield" />
|
||||
{this.state.unreadReportCount > 0 && (
|
||||
|
|
@ -177,21 +176,17 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
)}
|
||||
</NavLink>
|
||||
</li>
|
||||
</ul>
|
||||
)}
|
||||
{amAdmin() && (
|
||||
<ul className="navbar-nav ml-1">
|
||||
<li className="nav-item">
|
||||
<NavLink
|
||||
to="/registration_applications"
|
||||
className="p-1 navbar-toggler nav-link border-0"
|
||||
onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
|
||||
className="p-1 nav-link border-0"
|
||||
title={i18n.t("unread_registration_applications", {
|
||||
count: Number(this.state.unreadApplicationCount),
|
||||
formattedCount: numToSI(
|
||||
this.state.unreadApplicationCount
|
||||
),
|
||||
formattedCount: numToSI(this.state.unreadApplicationCount),
|
||||
})}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="clipboard" />
|
||||
{this.state.unreadApplicationCount > 0 && (
|
||||
|
|
@ -201,29 +196,30 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
)}
|
||||
</NavLink>
|
||||
</li>
|
||||
</ul>
|
||||
)}
|
||||
</>
|
||||
</ul>
|
||||
)}
|
||||
<button
|
||||
className="navbar-toggler border-0 p-1"
|
||||
type="button"
|
||||
aria-label="menu"
|
||||
onClick={linkEvent(this, this.handleToggleExpandNavbar)}
|
||||
data-tippy-content={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={`${!this.state.expanded && "collapse"} navbar-collapse`}
|
||||
>
|
||||
<ul className="navbar-nav my-2 mr-auto">
|
||||
<div className="collapse navbar-collapse my-2" id="navbarDropdown">
|
||||
<ul className="mr-auto navbar-nav">
|
||||
<li className="nav-item">
|
||||
<NavLink
|
||||
to="/communities"
|
||||
className="nav-link"
|
||||
onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
|
||||
title={i18n.t("communities")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
{i18n.t("communities")}
|
||||
</NavLink>
|
||||
|
|
@ -239,8 +235,8 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
state: { prevPath: this.currentLocation },
|
||||
}}
|
||||
className="nav-link"
|
||||
onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
|
||||
title={i18n.t("create_post")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
{i18n.t("create_post")}
|
||||
</NavLink>
|
||||
|
|
@ -250,8 +246,8 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
<NavLink
|
||||
to="/create_community"
|
||||
className="nav-link"
|
||||
onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
|
||||
title={i18n.t("create_community")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
{i18n.t("create_community")}
|
||||
</NavLink>
|
||||
|
|
@ -267,47 +263,44 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="navbar-nav my-2">
|
||||
{amAdmin() && (
|
||||
<li className="nav-item">
|
||||
<NavLink
|
||||
to="/admin"
|
||||
className="nav-link"
|
||||
onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
|
||||
title={i18n.t("admin_settings")}
|
||||
>
|
||||
<Icon icon="settings" />
|
||||
</NavLink>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
<ul className="navbar-nav">
|
||||
{!this.context.router.history.location.pathname.match(
|
||||
/^\/search/
|
||||
) && (
|
||||
<ul className="navbar-nav">
|
||||
<li className="nav-item">
|
||||
<NavLink
|
||||
to="/search"
|
||||
className="nav-link"
|
||||
title={i18n.t("search")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="search" />
|
||||
</NavLink>
|
||||
</li>
|
||||
</ul>
|
||||
)}
|
||||
{UserService.Instance.myUserInfo ? (
|
||||
{amAdmin() && (
|
||||
<li className="nav-item">
|
||||
<NavLink
|
||||
to="/admin"
|
||||
className="nav-link"
|
||||
title={i18n.t("admin_settings")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="settings" />
|
||||
</NavLink>
|
||||
</li>
|
||||
)}
|
||||
{person ? (
|
||||
<>
|
||||
<ul className="navbar-nav my-2">
|
||||
<li className="nav-item">
|
||||
<NavLink
|
||||
className="nav-link"
|
||||
to="/inbox"
|
||||
onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
|
||||
title={i18n.t("unread_messages", {
|
||||
count: Number(this.state.unreadInboxCount),
|
||||
formattedCount: numToSI(this.state.unreadInboxCount),
|
||||
})}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="bell" />
|
||||
{this.state.unreadInboxCount > 0 && (
|
||||
|
|
@ -317,18 +310,16 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
)}
|
||||
</NavLink>
|
||||
</li>
|
||||
</ul>
|
||||
{this.moderatesSomething && (
|
||||
<ul className="navbar-nav my-2">
|
||||
<li className="nav-item">
|
||||
<NavLink
|
||||
className="nav-link"
|
||||
to="/reports"
|
||||
onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
|
||||
title={i18n.t("unread_reports", {
|
||||
count: Number(this.state.unreadReportCount),
|
||||
formattedCount: numToSI(this.state.unreadReportCount),
|
||||
})}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="shield" />
|
||||
{this.state.unreadReportCount > 0 && (
|
||||
|
|
@ -338,21 +329,19 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
)}
|
||||
</NavLink>
|
||||
</li>
|
||||
</ul>
|
||||
)}
|
||||
{amAdmin() && (
|
||||
<ul className="navbar-nav my-2">
|
||||
<li className="nav-item">
|
||||
<NavLink
|
||||
to="/registration_applications"
|
||||
className="nav-link"
|
||||
onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
|
||||
title={i18n.t("unread_registration_applications", {
|
||||
count: Number(this.state.unreadApplicationCount),
|
||||
formattedCount: numToSI(
|
||||
this.state.unreadApplicationCount
|
||||
),
|
||||
})}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="clipboard" />
|
||||
{this.state.unreadApplicationCount > 0 && (
|
||||
|
|
@ -362,48 +351,41 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
)}
|
||||
</NavLink>
|
||||
</li>
|
||||
</ul>
|
||||
)}
|
||||
{person && (
|
||||
<ul className="navbar-nav">
|
||||
<li className="nav-item dropdown">
|
||||
<div className="dropdown">
|
||||
<button
|
||||
className="nav-link btn btn-link dropdown-toggle"
|
||||
onClick={linkEvent(this, this.handleToggleDropdown)}
|
||||
id="navbarDropdown"
|
||||
className="btn dropdown-toggle"
|
||||
role="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
>
|
||||
<span>
|
||||
{showAvatars() && person.avatar && (
|
||||
<PictrsImage src={person.avatar} icon />
|
||||
)}
|
||||
{person.display_name ?? person.name}
|
||||
</span>
|
||||
</button>
|
||||
{this.state.showDropdown && (
|
||||
<div
|
||||
className="dropdown-content"
|
||||
onMouseLeave={linkEvent(
|
||||
this,
|
||||
this.handleToggleDropdown
|
||||
)}
|
||||
<ul
|
||||
className="dropdown-menu"
|
||||
style={{ "min-width": "fit-content" }}
|
||||
>
|
||||
<li className="nav-item">
|
||||
<li>
|
||||
<NavLink
|
||||
to={`/u/${person.name}`}
|
||||
className="nav-link"
|
||||
className="dropdown-item px-2"
|
||||
title={i18n.t("profile")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="user" classes="mr-1" />
|
||||
{i18n.t("profile")}
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<li>
|
||||
<NavLink
|
||||
to="/settings"
|
||||
className="nav-link"
|
||||
className="dropdown-item px-2"
|
||||
title={i18n.t("settings")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="settings" classes="mr-1" />
|
||||
{i18n.t("settings")}
|
||||
|
|
@ -412,30 +394,27 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
<li>
|
||||
<hr className="dropdown-divider" />
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<li>
|
||||
<button
|
||||
className="nav-link btn btn-link"
|
||||
onClick={linkEvent(this, this.handleLogoutClick)}
|
||||
title="test"
|
||||
className="dropdown-item btn btn-link px-2"
|
||||
onClick={handleLogOut}
|
||||
>
|
||||
<Icon icon="log-out" classes="mr-1" />
|
||||
{i18n.t("logout")}
|
||||
</button>
|
||||
</li>
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<ul className="navbar-nav my-2">
|
||||
<>
|
||||
<li className="nav-item">
|
||||
<NavLink
|
||||
to="/login"
|
||||
className="nav-link"
|
||||
onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
|
||||
title={i18n.t("login")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
{i18n.t("login")}
|
||||
</NavLink>
|
||||
|
|
@ -444,15 +423,15 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
<NavLink
|
||||
to="/signup"
|
||||
className="nav-link"
|
||||
onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
|
||||
title={i18n.t("sign_up")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
{i18n.t("sign_up")}
|
||||
</NavLink>
|
||||
</li>
|
||||
</ul>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
|
|
@ -464,23 +443,6 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
return amAdmin() || moderatesS;
|
||||
}
|
||||
|
||||
handleToggleExpandNavbar(i: Navbar) {
|
||||
i.setState({ expanded: !i.state.expanded });
|
||||
}
|
||||
|
||||
handleHideExpandNavbar(i: Navbar) {
|
||||
i.setState({ expanded: false, showDropdown: false });
|
||||
}
|
||||
|
||||
handleLogoutClick(i: Navbar) {
|
||||
i.setState({ showDropdown: false, expanded: false });
|
||||
UserService.Instance.logout();
|
||||
}
|
||||
|
||||
handleToggleDropdown(i: Navbar) {
|
||||
i.setState({ showDropdown: !i.state.showDropdown });
|
||||
}
|
||||
|
||||
parseMessage(msg: any) {
|
||||
let op = wsUserOp(msg);
|
||||
console.log(msg);
|
||||
|
|
|
|||
Loading…
Reference in a new issue