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

Navbar hide menu fix (#1033)

Browse source 
* 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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
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",

12
src/assets/css/main.css
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;

1
src/client/index.tsx
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;

190
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}
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} {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);

9
yarn.lock
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"