fedi/lemmy-ui
1
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-28 00:25:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Navbar fix 2 (#1038)

Browse source 
* 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 2023-05-24 00:42:19 +00:00 committed by GitHub
parent a3c37d37a8
commit 42ebb57b22
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 248 additions and 286 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

194
src/shared/components/app/navbar.tsx
View file

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