Feliday/Feliday-UI
5
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix mobile menu collapse bug (#1222)

Browse source
This commit is contained in:
SleeplessOne1917 2023-06-13 02:24:24 +00:00 committed by GitHub
parent 0197c2a0fc
commit 2053c4e4e1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -46,13 +46,12 @@ interface NavbarState {
} }
function handleCollapseClick(i: Navbar) { function handleCollapseClick(i: Navbar) {
if (i.collapseButtonRef.current?.ariaExpanded === "true") { i.collapseButtonRef.current?.click();
i.collapseButtonRef.current?.click();
}
} }
function handleLogOut() { function handleLogOut(i: Navbar) {
UserService.Instance.logout(); UserService.Instance.logout();
handleCollapseClick(i);
} }
export class Navbar extends Component<NavbarProps, NavbarState> { export class Navbar extends Component<NavbarProps, NavbarState> {
@ -68,12 +67,14 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
}; };
subscription: any; subscription: any;
collapseButtonRef = createRef<HTMLButtonElement>(); collapseButtonRef = createRef<HTMLButtonElement>();
mobileMenuRef = createRef<HTMLDivElement>();
constructor(props: any, context: any) { constructor(props: any, context: any) {
super(props, context); super(props, context);
this.parseMessage = this.parseMessage.bind(this); this.parseMessage = this.parseMessage.bind(this);
this.subscription = wsSubscribe(this.parseMessage); this.subscription = wsSubscribe(this.parseMessage);
this.handleOutsideMenuClick = this.handleOutsideMenuClick.bind(this);
} }
componentDidMount() { componentDidMount() {
@ -109,6 +110,8 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
UserService.Instance.unreadApplicationCountSub.subscribe(res => { UserService.Instance.unreadApplicationCountSub.subscribe(res => {
this.setState({ unreadApplicationCount: res }); this.setState({ unreadApplicationCount: res });
}); });
document.addEventListener("click", this.handleOutsideMenuClick);
} }
} }
@ -118,6 +121,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
this.unreadInboxCountSub.unsubscribe(); this.unreadInboxCountSub.unsubscribe();
this.unreadReportCountSub.unsubscribe(); this.unreadReportCountSub.unsubscribe();
this.unreadApplicationCountSub.unsubscribe(); this.unreadApplicationCountSub.unsubscribe();
document.removeEventListener("click", this.handleOutsideMenuClick);
} }
// TODO class active corresponding to current page // TODO class active corresponding to current page
@ -212,7 +216,11 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
> >
<Icon icon="menu" /> <Icon icon="menu" />
</button> </button>
<div className="collapse navbar-collapse my-2" id="navbarDropdown"> <div
className="collapse navbar-collapse my-2"
id="navbarDropdown"
ref={this.mobileMenuRef}
>
<ul className="mr-auto navbar-nav"> <ul className="mr-auto navbar-nav">
<li className="nav-item"> <li className="nav-item">
<NavLink <NavLink
@ -397,7 +405,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
<li> <li>
<button <button
className="dropdown-item btn btn-link px-2" className="dropdown-item btn btn-link px-2"
onClick={handleLogOut} onClick={linkEvent(this, handleLogOut)}
> >
<Icon icon="log-out" classes="mr-1" /> <Icon icon="log-out" classes="mr-1" />
{i18n.t("logout")} {i18n.t("logout")}
@ -437,6 +445,12 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
); );
} }
handleOutsideMenuClick(event: MouseEvent) {
if (!this.mobileMenuRef.current?.contains(event.target as Node | null)) {
handleCollapseClick(this);
}
}
get moderatesSomething(): boolean { get moderatesSomething(): boolean {
const mods = UserService.Instance.myUserInfo?.moderates; const mods = UserService.Instance.myUserInfo?.moderates;
const moderatesS = (mods && mods.length > 0) || false; const moderatesS = (mods && mods.length > 0) || false;