dzeio/components
1
0
Fork 0
mirror of https://github.com/dzeiocom/components.git synced 2025-06-07 16:49:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: menu closing when clicking on it

Browse Source 
Signed-off-by: Avior <github@avior.me>
This commit is contained in:
Florian Bouillon 2022-10-16 12:59:54 +02:00
parent 6d7fc01517
commit 14f36f0bbb
Signed by: Florian Bouillon
GPG Key ID: BEEAF3722D0EBF64
2 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/Navbar/Navbar.module.styl
View File

@ -39,3 +39,6 @@ $height = 76px
.header .header
margin-right 16px margin-right 16px
.menu
opacity 1

14
src/Navbar/index.tsx
View File

@ -68,7 +68,7 @@ interface State {
/** /**
* Navbar Component * Navbar Component
* @version 1.0.3 * @version 1.0.4
*/ */
export default class Navbar extends React.Component<Props, State> { export default class Navbar extends React.Component<Props, State> {
@ -162,13 +162,20 @@ export default class Navbar extends React.Component<Props, State> {
)} )}
{this.state.subMenu && ( {this.state.subMenu && (
<div style={{position: 'fixed', top: 76, right: this.state.subMenu.x}}> <div style={{position: 'fixed', top: 76, right: this.state.subMenu.x}}>
<Menu outline items={this.state.subMenu.menu} /> <Menu className={css.menu} outline items={this.state.subMenu.menu} />
</div> </div>
)} )}
</> </>
) )
private onBodyClick = () => { private onBodyClick = (ev: MouseEvent) => {
let target = ev.target as HTMLElement | null
do {
if (target && target.classList.contains(css.menu)) {
return
}
target = target?.parentElement as HTMLElement | null
} while (target)
this.setState({subMenu: undefined}) this.setState({subMenu: undefined})
} }
@ -176,7 +183,6 @@ export default class Navbar extends React.Component<Props, State> {
ev.stopPropagation() ev.stopPropagation()
const x = window.innerWidth - (ev.currentTarget.offsetLeft + ev.currentTarget.offsetWidth) const x = window.innerWidth - (ev.currentTarget.offsetLeft + ev.currentTarget.offsetWidth)
if (subMenu && (!this.state.subMenu || x !== this.state.subMenu?.x)) { if (subMenu && (!this.state.subMenu || x !== this.state.subMenu?.x)) {
console.log(ev)
this.setState({ this.setState({
subMenu: { subMenu: {
x, x,