1 files changed, 13 insertions, 85 deletions
diff --git a/core/src/components/MainMenu.js b/core/src/components/MainMenu.js
index 436fd835cc3..267a3d9a361 100644
--- a/core/src/components/MainMenu.js
+++ b/core/src/components/MainMenu.js
@@ -22,99 +22,27 @@
  *
  */
 
-import $ from 'jquery'
+import { translate as t, translatePlural as n } from '@nextcloud/l10n'
+import Vue from 'vue'
 
-import OC from '../OC'
+import AppMenu from './AppMenu.vue'
 
-/**
- * Set up the main menu toggle to react to media query changes.
- * If the screen is small enough, the main menu becomes a toggle.
- * If the screen is bigger, the main menu is not a toggle any more.
- */
 export const setUp = () => {
 
-	Object.assign(OC, {
-		setNavigationCounter(id, counter) {
-			const appmenuElement = document.getElementById('appmenu').querySelector('[data-id="' + id + '"] svg')
-			const appsElement = document.getElementById('apps').querySelector('[data-id="' + id + '"] svg')
-			if (counter === 0) {
-				appmenuElement.classList.remove('has-unread')
-				appsElement.classList.remove('has-unread')
-				appmenuElement.getElementsByTagName('image')[0].style.mask = ''
-				appsElement.getElementsByTagName('image')[0].style.mask = ''
-			} else {
-				appmenuElement.classList.add('has-unread')
-				appsElement.classList.add('has-unread')
-				appmenuElement.getElementsByTagName('image')[0].style.mask = 'url(#hole)'
-				appsElement.getElementsByTagName('image')[0].style.mask = 'url(#hole)'
-			}
-			document.getElementById('appmenu').querySelector('[data-id="' + id + '"] .unread-counter').textContent = counter
-			document.getElementById('apps').querySelector('[data-id="' + id + '"] .unread-counter').textContent = counter
+	Vue.mixin({
+		methods: {
+			t,
+			n,
 		},
 	})
-	// init the more-apps menu
-	OC.registerMenu($('#more-apps > a'), $('#navigation'))
-
-	// toggle the navigation
-	const $toggle = $('#header .header-appname-container')
-	const $navigation = $('#navigation')
-	const $appmenu = $('#appmenu')
-
-	// init the menu
-	OC.registerMenu($toggle, $navigation)
-	$toggle.data('oldhref', $toggle.attr('href'))
-	$toggle.attr('href', '#')
-	$navigation.hide()
 
-	// show loading feedback on more apps list
-	$navigation.delegate('a', 'click', event => {
-		let $app = $(event.target)
-		if (!$app.is('a')) {
-			$app = $app.closest('a')
-		}
-		if (event.which === 1 && !event.ctrlKey && !event.metaKey && $app.attr('target') !== '_blank') {
-			$app.find('svg').remove()
-			$app.find('div').remove() // prevent odd double-clicks
-			// no need for theming, loader is already inverted on dark mode
-			// but we need it over the primary colour
-			$app.prepend($('<div></div>').addClass('icon-loading-small'))
-		} else {
-			// Close navigation when opening app in
-			// a new tab
-			OC.hideMenus(() => false)
-		}
-	})
+	const AppMenuApp = Vue.extend(AppMenu)
+	const appMenu = new AppMenuApp({}).$mount('#header-left__appmenu')
 
-	$navigation.delegate('a', 'mouseup', event => {
-		if (event.which === 2) {
-			// Close navigation when opening app in
-			// a new tab via middle click
-			OC.hideMenus(() => false)
-		}
+	Object.assign(OC, {
+		setNavigationCounter(id, counter) {
+			appMenu.setNavigationCounter(id, counter)
+		},
 	})
 
-	// show loading feedback on visible apps list
-	$appmenu.delegate('li:not(#more-apps) > a', 'click', event => {
-		let $app = $(event.target)
-		if (!$app.is('a')) {
-			$app = $app.closest('a')
-		}
-
-		if (event.which === 1 && !event.ctrlKey && !event.metaKey && $app.parent('#more-apps').length === 0 && $app.attr('target') !== '_blank') {
-			$app.find('svg').remove()
-			$app.find('div').remove() // prevent odd double-clicks
-			$app.prepend($('<div></div>').addClass(
-				OCA.Theming && OCA.Theming.inverted
-					? 'icon-loading-small'
-					: 'icon-loading-small-dark'
-			))
-			// trigger redirect
-			// needed for ie, but also works for every browser
-			window.location = $app.attr('href')
-		} else {
-			// Close navigation when opening app in
-			// a new tab
-			OC.hideMenus(() => false)
-		}
-	})
 }