From ffe95ee1c68c428695f98e5b1ebd05d13549f71d Mon Sep 17 00:00:00 2001 From: SleeplessOne1917 Date: Mon, 22 May 2023 03:31:08 +0000 Subject: [PATCH] Navbar hide menu fix (#1033) * Fix navbar not closing on mobile when it should * Get rid of unnecessary HTML tags --- package.json | 1 + src/assets/css/main.css | 12 - src/client/index.tsx | 1 + src/shared/components/app/navbar.tsx | 534 +++++++++++++-------------- yarn.lock | 9 +- 5 files changed, 258 insertions(+), 299 deletions(-) diff --git a/package.json b/package.json index 2f16b8d3..641a87aa 100644 --- a/package.json +++ b/package.json @@ -89,6 +89,7 @@ "devDependencies": { "@babel/core": "^7.21.8", "@types/autosize": "^4.0.0", + "@types/bootstrap": "^5.2.6", "@types/express": "^4.17.17", "@types/html-to-text": "^9.0.0", "@types/markdown-it": "^12.2.3", diff --git a/src/assets/css/main.css b/src/assets/css/main.css index 9cff2c7f..a0d72394 100644 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -1,7 +1,3 @@ -.navbar-toggler { - border: 0px; -} - .navbar-expand-lg .navbar-nav .nav-link { padding-right: 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 { border-left: 2px solid var(--secondary); margin: 0.5em 5px; diff --git a/src/client/index.tsx b/src/client/index.tsx index d3a5b625..99f12371 100644 --- a/src/client/index.tsx +++ b/src/client/index.tsx @@ -3,6 +3,7 @@ import { BrowserRouter } from "inferno-router"; import { App } from "../shared/components/app/app"; import { initializeSite } from "../shared/utils"; +import "bootstrap/js/dist/collapse"; import "bootstrap/js/dist/dropdown"; const site = window.isoData.site_res; diff --git a/src/shared/components/app/navbar.tsx b/src/shared/components/app/navbar.tsx index 128d4023..f9497c7b 100644 --- a/src/shared/components/app/navbar.tsx +++ b/src/shared/components/app/navbar.tsx @@ -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 { private wsSub: Subscription; private userSub: Subscription; @@ -57,10 +65,9 @@ export class Navbar extends Component { unreadInboxCount: 0, unreadReportCount: 0, unreadApplicationCount: 0, - expanded: false, - showDropdown: false, }; subscription: any; + collapseButtonRef = createRef(); constructor(props: any, context: any) { super(props, context); @@ -113,85 +120,228 @@ export class Navbar extends Component { 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 ( - ); @@ -464,23 +443,6 @@ export class Navbar extends Component { 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); diff --git a/yarn.lock b/yarn.lock index 24b8a351..9432cde1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1155,7 +1155,7 @@ picocolors "^1.0.0" tslib "^2.5.0" -"@popperjs/core@^2.9.0": +"@popperjs/core@^2.9.0", "@popperjs/core@^2.9.2": version "2.11.7" resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.7.tgz#ccab5c8f7dc557a52ca3288c10075c9ccd37fff7" integrity sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw== @@ -1235,6 +1235,13 @@ dependencies: "@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": version "1.5.0" resolved "https://registry.yarnpkg.com/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.5.0.tgz#9fd20b3974bdc2bcd4ac6567e2e0f6885cb2cf41"