retract menu on click (mobile devices)

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

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``}

src/core/constants/deviceWidths.ts

@@ -0,0 +1,3 @@
+export default {
+	mobile: 600,
+};

src/core/constants/index.ts

@@ -1 +1,2 @@
 export * from './validatorErrors';
+export { default as deviceWidths } from './deviceWidths';