Navbar hide menu fix (#1033)

* Fix navbar not closing on mobile when it should

* Get rid of unnecessary HTML tags
This commit is contained in:
SleeplessOne1917 2023-05-22 03:31:08 +00:00 committed by GitHub
parent 26de38a869
commit ffe95ee1c6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 258 additions and 299 deletions

View file

@ -89,6 +89,7 @@
"devDependencies": { "devDependencies": {
"@babel/core": "^7.21.8", "@babel/core": "^7.21.8",
"@types/autosize": "^4.0.0", "@types/autosize": "^4.0.0",
"@types/bootstrap": "^5.2.6",
"@types/express": "^4.17.17", "@types/express": "^4.17.17",
"@types/html-to-text": "^9.0.0", "@types/html-to-text": "^9.0.0",
"@types/markdown-it": "^12.2.3", "@types/markdown-it": "^12.2.3",

View file

@ -1,7 +1,3 @@
.navbar-toggler {
border: 0px;
}
.navbar-expand-lg .navbar-nav .nav-link { .navbar-expand-lg .navbar-nav .nav-link {
padding-right: 0.75rem !important; padding-right: 0.75rem !important;
padding-left: 0.75rem !important; padding-left: 0.75rem !important;
@ -201,14 +197,6 @@
} }
} }
.dropdown-content {
position: absolute;
background-color: var(--light);
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 2000;
}
blockquote { blockquote {
border-left: 2px solid var(--secondary); border-left: 2px solid var(--secondary);
margin: 0.5em 5px; margin: 0.5em 5px;

View file

@ -3,6 +3,7 @@ import { BrowserRouter } from "inferno-router";
import { App } from "../shared/components/app/app"; import { App } from "../shared/components/app/app";
import { initializeSite } from "../shared/utils"; import { initializeSite } from "../shared/utils";
import "bootstrap/js/dist/collapse";
import "bootstrap/js/dist/dropdown"; import "bootstrap/js/dist/dropdown";
const site = window.isoData.site_res; const site = window.isoData.site_res;

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,85 +120,228 @@ 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="/" title={siteView.site.description ?? siteView.site.name}
onMouseUp={linkEvent(this, this.handleHideExpandNavbar)} className="d-flex align-items-center navbar-brand mr-md-3"
title={siteView.site.description ?? siteView.site.name} onMouseUp={linkEvent(this, handleCollapseClick)}
className="d-flex align-items-center navbar-brand mr-md-3" >
> {siteView.site.icon && showAvatars() && (
{siteView.site.icon && showAvatars() && ( <PictrsImage src={siteView.site.icon} icon />
<PictrsImage src={siteView.site.icon} icon /> )}
{siteView.site.name}
</NavLink>
{person && (
<ul className="navbar-nav d-flex flex-row ml-auto d-md-none">
<li className="nav-item">
<NavLink
to="/inbox"
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 && (
<span className="mx-1 badge badge-light">
{numToSI(this.state.unreadInboxCount)}
</span>
)}
</NavLink>
</li>
{this.moderatesSomething && (
<li className="nav-item">
<NavLink
to="/reports"
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 && (
<span className="mx-1 badge badge-light">
{numToSI(this.state.unreadReportCount)}
</span>
)}
</NavLink>
</li>
)} )}
{siteView.site.name} {amAdmin() && (
</NavLink> <li className="nav-item">
{UserService.Instance.myUserInfo && ( <NavLink
<> to="/registration_applications"
<ul className="navbar-nav ml-auto"> className="p-1 nav-link border-0"
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 && (
<span className="mx-1 badge badge-light">
{numToSI(this.state.unreadApplicationCount)}
</span>
)}
</NavLink>
</li>
)}
</ul>
)}
<button
className="navbar-toggler border-0 p-1"
type="button"
aria-label="menu"
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="collapse navbar-collapse my-2" id="navbarDropdown">
<ul className="mr-auto navbar-nav">
<li className="nav-item">
<NavLink
to="/communities"
className="nav-link"
title={i18n.t("communities")}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
{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={i18n.t("create_post")}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
{i18n.t("create_post")}
</NavLink>
</li>
{canCreateCommunity(this.props.siteRes) && (
<li className="nav-item">
<NavLink
to="/create_community"
className="nav-link"
title={i18n.t("create_community")}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
{i18n.t("create_community")}
</NavLink>
</li>
)}
<li className="nav-item">
<a
className="nav-link"
title={i18n.t("support_lemmy")}
href={donateLemmyUrl}
>
<Icon icon="heart" classes="small" />
</a>
</li>
</ul>
<ul className="navbar-nav">
{!this.context.router.history.location.pathname.match(
/^\/search/
) && (
<li className="nav-item">
<NavLink
to="/search"
className="nav-link"
title={i18n.t("search")}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
<Icon icon="search" />
</NavLink>
</li>
)}
{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 ? (
<>
<li className="nav-item"> <li className="nav-item">
<NavLink <NavLink
className="nav-link"
to="/inbox" to="/inbox"
className="p-1 navbar-toggler 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 && (
<span className="mx-1 badge badge-light"> <span className="ml-1 badge badge-light">
{numToSI(this.state.unreadInboxCount)} {numToSI(this.state.unreadInboxCount)}
</span> </span>
)} )}
</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
className="nav-link"
to="/reports" to="/reports"
className="p-1 navbar-toggler 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 && (
<span className="mx-1 badge badge-light"> <span className="ml-1 badge badge-light">
{numToSI(this.state.unreadReportCount)} {numToSI(this.state.unreadReportCount)}
</span> </span>
)} )}
</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="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 && (
@ -201,241 +351,70 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
)} )}
</NavLink> </NavLink>
</li> </li>
</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")}
>
<Icon icon="menu" />
</button>
<div
className={`${!this.state.expanded && "collapse"} navbar-collapse`}
>
<ul className="navbar-nav my-2 mr-auto">
<li className="nav-item">
<NavLink
to="/communities"
className="nav-link"
onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
title={i18n.t("communities")}
>
{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"
onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
title={i18n.t("create_post")}
>
{i18n.t("create_post")}
</NavLink>
</li>
{canCreateCommunity(this.props.siteRes) && (
<li className="nav-item">
<NavLink
to="/create_community"
className="nav-link"
onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
title={i18n.t("create_community")}
>
{i18n.t("create_community")}
</NavLink>
</li>
)}
<li className="nav-item">
<a
className="nav-link"
title={i18n.t("support_lemmy")}
href={donateLemmyUrl}
>
<Icon icon="heart" classes="small" />
</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>
{!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")}
>
<Icon icon="search" />
</NavLink>
</li>
</ul>
)}
{UserService.Instance.myUserInfo ? (
<>
<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),
})}
>
<Icon icon="bell" />
{this.state.unreadInboxCount > 0 && (
<span className="ml-1 badge badge-light">
{numToSI(this.state.unreadInboxCount)}
</span>
)}
</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),
})}
>
<Icon icon="shield" />
{this.state.unreadReportCount > 0 && (
<span className="ml-1 badge badge-light">
{numToSI(this.state.unreadReportCount)}
</span>
)}
</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
),
})}
>
<Icon icon="clipboard" />
{this.state.unreadApplicationCount > 0 && (
<span className="mx-1 badge badge-light">
{numToSI(this.state.unreadApplicationCount)}
</span>
)}
</NavLink>
</li>
</ul>
)} )}
{person && ( {person && (
<ul className="navbar-nav"> <div className="dropdown">
<li className="nav-item dropdown"> <button
<button className="btn dropdown-toggle"
className="nav-link btn btn-link dropdown-toggle" role="button"
onClick={linkEvent(this, this.handleToggleDropdown)} aria-expanded="false"
id="navbarDropdown" data-bs-toggle="dropdown"
role="button" >
aria-expanded="false" {showAvatars() && person.avatar && (
> <PictrsImage src={person.avatar} icon />
<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
)}
>
<li className="nav-item">
<NavLink
to={`/u/${person.name}`}
className="nav-link"
title={i18n.t("profile")}
>
<Icon icon="user" classes="mr-1" />
{i18n.t("profile")}
</NavLink>
</li>
<li className="nav-item">
<NavLink
to="/settings"
className="nav-link"
title={i18n.t("settings")}
>
<Icon icon="settings" classes="mr-1" />
{i18n.t("settings")}
</NavLink>
</li>
<li>
<hr className="dropdown-divider" />
</li>
<li className="nav-item">
<button
className="nav-link btn btn-link"
onClick={linkEvent(this, this.handleLogoutClick)}
title="test"
>
<Icon icon="log-out" classes="mr-1" />
{i18n.t("logout")}
</button>
</li>
</div>
)} )}
</li> {person.display_name ?? person.name}
</ul> </button>
<ul
className="dropdown-menu"
style={{ "min-width": "fit-content" }}
>
<li>
<NavLink
to={`/u/${person.name}`}
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>
<NavLink
to="/settings"
className="dropdown-item px-2"
title={i18n.t("settings")}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
<Icon icon="settings" classes="mr-1" />
{i18n.t("settings")}
</NavLink>
</li>
<li>
<hr className="dropdown-divider" />
</li>
<li>
<button
className="dropdown-item btn btn-link px-2"
onClick={handleLogOut}
>
<Icon icon="log-out" classes="mr-1" />
{i18n.t("logout")}
</button>
</li>
</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);

View file

@ -1155,7 +1155,7 @@
picocolors "^1.0.0" picocolors "^1.0.0"
tslib "^2.5.0" tslib "^2.5.0"
"@popperjs/core@^2.9.0": "@popperjs/core@^2.9.0", "@popperjs/core@^2.9.2":
version "2.11.7" version "2.11.7"
resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.7.tgz#ccab5c8f7dc557a52ca3288c10075c9ccd37fff7" resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.7.tgz#ccab5c8f7dc557a52ca3288c10075c9ccd37fff7"
integrity sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw== integrity sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==
@ -1235,6 +1235,13 @@
dependencies: dependencies:
"@types/node" "*" "@types/node" "*"
"@types/bootstrap@^5.2.6":
version "5.2.6"
resolved "https://registry.yarnpkg.com/@types/bootstrap/-/bootstrap-5.2.6.tgz#e861b3aa1f4a1434da0bf50fbaa372b6f7e64d2f"
integrity sha512-BlAc3YATdasbHoxMoBWODrSF6qwQO/E9X8wVxCCSa6rWjnaZfpkr2N6pUMCY6jj2+wf0muUtLySbvU9etX6YqA==
dependencies:
"@popperjs/core" "^2.9.2"
"@types/connect-history-api-fallback@^1.3.5": "@types/connect-history-api-fallback@^1.3.5":
version "1.5.0" version "1.5.0"
resolved "https://registry.yarnpkg.com/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.5.0.tgz#9fd20b3974bdc2bcd4ac6567e2e0f6885cb2cf41" resolved "https://registry.yarnpkg.com/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.5.0.tgz#9fd20b3974bdc2bcd4ac6567e2e0f6885cb2cf41"