From 836bbd47e2351a81b3ee5d2aa620c62eb1560ef2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=20Jurmanovi=C4=87?= <fjurma12@outlook.com>
Date: Sat, 10 Jul 2021 16:47:52 +0200
Subject: [PATCH] retract menu on click (mobile devices)

---
 src/components/app-link/AppLinkElement.ts   |  3 ++-
 src/components/menu-item/MenuItemElement.ts | 12 +++++++++++-
 src/core/constants/deviceWidths.ts          |  3 +++
 src/core/constants/index.ts                 |  1 +
 4 files changed, 17 insertions(+), 2 deletions(-)
 create mode 100644 src/core/constants/deviceWidths.ts

diff --git a/src/components/app-link/AppLinkElement.ts b/src/components/app-link/AppLinkElement.ts
index 47e305d..ef529df 100644
--- a/src/components/app-link/AppLinkElement.ts
+++ b/src/components/app-link/AppLinkElement.ts
@@ -10,6 +10,7 @@ class AppLinkElement extends BaseComponentElement {
 	@attr to: string;
 	@attr goBack: string;
 	@attr title: string;
+	@attr customAction: string;
 	@target main: Element;
 	constructor() {
 		super();
@@ -61,7 +62,7 @@ class AppLinkElement extends BaseComponentElement {
 			: html`<a
 					class="btn btn-link${this.className ? ` ${this.className}` : ''}"
 					data-target="app-link.main"
-					app-action="click:app-link#goTo"
+					app-action="click:app-link#goTo ${this.customAction ? this.customAction : ''}"
 					href="${this.to}"
 					style="text-decoration: underline; cursor: pointer;"
 					><span class="link-text">${this.title}</span></a
diff --git a/src/components/menu-item/MenuItemElement.ts b/src/components/menu-item/MenuItemElement.ts
index a55af7a..0abf9bb 100644
--- a/src/components/menu-item/MenuItemElement.ts
+++ b/src/components/menu-item/MenuItemElement.ts
@@ -2,6 +2,8 @@ import { attr, controller, target } from '@github/catalyst';
 import { html, TemplateResult } from 'core/utils';
 import { AppMainElement } from 'components/app-main/AppMainElement';
 import { BaseComponentElement } from 'common/';
+import { deviceWidths } from 'core/constants';
+import { MenuLayoutElement } from 'layouts';
 
 @controller
 class MenuItemElement extends BaseComponentElement {
@@ -32,10 +34,18 @@ class MenuItemElement extends BaseComponentElement {
 		return this.routerService.comparePath(this.path);
 	}
 
+	itemClick = (e) => {
+		if (window.innerWidth < deviceWidths.mobile) {
+			(this.appMain?.mainRoot?.rootElement as MenuLayoutElement)?.retractMenu?.();
+		}
+	};
+
 	render = (): TemplateResult => {
 		return html`
 			<div class="${this.current ? 'selected ' : ''}menu-item" data-target="menu-item.itemEl">
-				<app-link class="${this.className}" data-to="${this.path}">${this.title}</app-link>
+				<app-link class="${this.className}" data-to="${this.path}" data-custom-action="click:menu-item#itemClick"
+					>${this.title}</app-link
+				>
 				${this.customaction
 					? html`<div data-target="menu-item.customButton" app-action="${this.customaction}">+</div>`
 					: html``}
diff --git a/src/core/constants/deviceWidths.ts b/src/core/constants/deviceWidths.ts
new file mode 100644
index 0000000..90e04c1
--- /dev/null
+++ b/src/core/constants/deviceWidths.ts
@@ -0,0 +1,3 @@
+export default {
+	mobile: 600,
+};
diff --git a/src/core/constants/index.ts b/src/core/constants/index.ts
index 51297e7..7d9008a 100644
--- a/src/core/constants/index.ts
+++ b/src/core/constants/index.ts
@@ -1 +1,2 @@
 export * from './validatorErrors';
+export { default as deviceWidths } from './deviceWidths';