diff --git a/src/libraries/navdrawer/navdrawer.js b/src/libraries/navdrawer/navdrawer.js
index 8456db5a0b..b390f0bc33 100644
--- a/src/libraries/navdrawer/navdrawer.js
+++ b/src/libraries/navdrawer/navdrawer.js
@@ -3,134 +3,174 @@
  * It is a legacy library that should be replaced at some point.
  */
 
-/* eslint-disable no-var */
 import browser from '../../scripts/browser';
 import dom from '../../scripts/dom';
 import './navdrawer.scss';
 import '../../assets/css/scrollstyles.scss';
+class NavigationDrawer {
+    mask;
+    newPos = 0;
+    currentPos = 0;
+    startPoint = 0;
+    countStart = 0;
+    velocity = 0;
+    dragMode = 0;
+    menuTouchStartX;
+    menuTouchStartY;
+    menuTouchStartTime;
+    edgeContainer = document.querySelector('.mainDrawerHandle');
+    isPeeking = false;
+    backgroundTouchStartX;
+    backgroundTouchStartTime;
+    _edgeSwipeEnabled;
 
-export function NavigationDrawer(options) {
-    function getTouches(e) {
+    constructor(options) {
+        this.options = options;
+        this.defaults = {
+            width: 260,
+            handleSize: 10,
+            disableMask: false,
+            maxMaskOpacity: 0.5
+        };
+        options.target.classList.add('transition');
+        this.scrollContainer = options.target.querySelector('.mainDrawer-scrollContainer');
+        this.scrollContainer.classList.add('scrollY');
+        this.isVisible = false;
+        this.initialize();
+    }
+
+    getTouches(e) {
         return e.changedTouches || e.targetTouches || e.touches;
     }
 
-    function onMenuTouchStart(e) {
+    disableEvent(e) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+
+    setVelocity(deltaX) {
+        const time = new Date().getTime() - (this.menuTouchStartTime || 0);
+        this.velocity = Math.abs(deltaX) / time;
+    }
+
+    onMenuTouchStart(e) {
+        const options = this.options;
+
         options.target.classList.remove('transition');
-        const touches = getTouches(e);
+        const touches = this.getTouches(e);
         const touch = touches[0] || {};
-        menuTouchStartX = touch.clientX;
-        menuTouchStartY = touch.clientY;
-        menuTouchStartTime = new Date().getTime();
+        this.menuTouchStartX = touch.clientX;
+        this.menuTouchStartY = touch.clientY;
+        this.menuTouchStartTime = new Date().getTime();
     }
 
-    function setVelocity(deltaX) {
-        const time = new Date().getTime() - (menuTouchStartTime || 0);
-        velocity = Math.abs(deltaX) / time;
-    }
+    onMenuTouchMove(e) {
+        const scrollContainer = this.scrollContainer;
 
-    function onMenuTouchMove(e) {
-        const isOpen = self.visible;
-        const touches = getTouches(e);
+        const isOpen = this.visible;
+        const touches = this.getTouches(e);
         const touch = touches[0] || {};
         const endX = touch.clientX || 0;
         const endY = touch.clientY || 0;
-        const deltaX = endX - (menuTouchStartX || 0);
-        const deltaY = endY - (menuTouchStartY || 0);
-        setVelocity(deltaX);
+        const deltaX = endX - (this.menuTouchStartX || 0);
+        const deltaY = endY - (this.menuTouchStartY || 0);
+        this.setVelocity(deltaX);
 
-        if (isOpen && dragMode !== 1 && deltaX > 0) {
-            dragMode = 2;
+        if (isOpen && this.dragMode !== 1 && deltaX > 0) {
+            this.dragMode = 2;
         }
 
-        if (dragMode === 0 && (!isOpen || Math.abs(deltaX) >= 10) && Math.abs(deltaY) < 5) {
-            dragMode = 1;
-            scrollContainer.addEventListener('scroll', disableEvent);
-            self.showMask();
-        } else if (dragMode === 0 && Math.abs(deltaY) >= 5) {
-            dragMode = 2;
+        if (this.dragMode === 0 && (!isOpen || Math.abs(deltaX) >= 10) && Math.abs(deltaY) < 5) {
+            this.dragMode = 1;
+            scrollContainer.addEventListener('scroll', this.disableEvent);
+            this.showMask();
+        } else if (this.dragMode === 0 && Math.abs(deltaY) >= 5) {
+            this.dragMode = 2;
         }
 
-        if (dragMode === 1) {
-            newPos = currentPos + deltaX;
-            self.changeMenuPos();
+        if (this.dragMode === 1) {
+            this.newPos = this.currentPos + deltaX;
+            this.changeMenuPos();
         }
     }
 
-    function onMenuTouchEnd(e) {
+    onMenuTouchEnd(e) {
+        const options = this.options;
+        const scrollContainer = this.scrollContainer;
+
         options.target.classList.add('transition');
-        scrollContainer.removeEventListener('scroll', disableEvent);
-        dragMode = 0;
-        const touches = getTouches(e);
+        scrollContainer.removeEventListener('scroll', this.disableEvent);
+        this.dragMode = 0;
+        const touches = this.getTouches(e);
         const touch = touches[0] || {};
         const endX = touch.clientX || 0;
         const endY = touch.clientY || 0;
-        const deltaX = endX - (menuTouchStartX || 0);
-        const deltaY = endY - (menuTouchStartY || 0);
-        currentPos = deltaX;
-        self.checkMenuState(deltaX, deltaY);
+        const deltaX = endX - (this.menuTouchStartX || 0);
+        const deltaY = endY - (this.menuTouchStartY || 0);
+        this.currentPos = deltaX;
+        this.checkMenuState(deltaX, deltaY);
     }
 
-    function onEdgeTouchStart(e) {
-        if (isPeeking) {
-            onMenuTouchMove(e);
+    onEdgeTouchMove(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.onEdgeTouchStart(e);
+    }
+
+    onEdgeTouchStart(e) {
+        const options = this.options;
+
+        if (this.isPeeking) {
+            this.onMenuTouchMove(e);
         } else {
-            if (((getTouches(e)[0] || {}).clientX || 0) <= options.handleSize) {
-                isPeeking = true;
+            if (((this.getTouches(e)[0] || {}).clientX || 0) <= options.handleSize) {
+                this.isPeeking = true;
 
                 if (e.type === 'touchstart') {
-                    dom.removeEventListener(edgeContainer, 'touchmove', onEdgeTouchMove, {});
-                    dom.addEventListener(edgeContainer, 'touchmove', onEdgeTouchMove, {});
+                    dom.removeEventListener(this.edgeContainer, 'touchmove', this.onEdgeTouchMove.bind(this), {});
+                    dom.addEventListener(this.edgeContainer, 'touchmove', this.onEdgeTouchMove.bind(this), {});
                 }
 
-                onMenuTouchStart(e);
+                this.onMenuTouchStart(e);
             }
         }
     }
 
-    function onEdgeTouchMove(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        onEdgeTouchStart(e);
-    }
-
-    function onEdgeTouchEnd(e) {
-        if (isPeeking) {
-            isPeeking = false;
-            dom.removeEventListener(edgeContainer, 'touchmove', onEdgeTouchMove, {});
-            onMenuTouchEnd(e);
+    onEdgeTouchEnd(e) {
+        if (this.isPeeking) {
+            this.isPeeking = false;
+            dom.removeEventListener(this.edgeContainer, 'touchmove', this.onEdgeTouchMove.bind(this), {});
+            this.onMenuTouchEnd(e);
         }
     }
 
-    function disableEvent(e) {
-        e.preventDefault();
-        e.stopPropagation();
-    }
-
-    function onBackgroundTouchStart(e) {
-        const touches = getTouches(e);
+    onBackgroundTouchStart(e) {
+        const touches = this.getTouches(e);
         const touch = touches[0] || {};
-        backgroundTouchStartX = touch.clientX;
-        backgroundTouchStartTime = new Date().getTime();
+        this.backgroundTouchStartX = touch.clientX;
+        this.backgroundTouchStartTime = new Date().getTime();
     }
 
-    function onBackgroundTouchMove(e) {
-        const touches = getTouches(e);
+    onBackgroundTouchMove(e) {
+        const options = this.options;
+
+        const touches = this.getTouches(e);
         const touch = touches[0] || {};
         const endX = touch.clientX || 0;
 
-        if (endX <= options.width && self.isVisible) {
-            countStart++;
-            const deltaX = endX - (backgroundTouchStartX || 0);
+        if (endX <= options.width && this.isVisible) {
+            this.countStart++;
+            const deltaX = endX - (this.backgroundTouchStartX || 0);
 
-            if (countStart == 1) {
-                startPoint = deltaX;
+            if (this.countStart == 1) {
+                this.startPoint = deltaX;
             }
-            if (deltaX < 0 && dragMode !== 2) {
-                dragMode = 1;
-                newPos = deltaX - startPoint + options.width;
-                self.changeMenuPos();
-                const time = new Date().getTime() - (backgroundTouchStartTime || 0);
-                velocity = Math.abs(deltaX) / time;
+            if (deltaX < 0 && this.dragMode !== 2) {
+                this.dragMode = 1;
+                this.newPos = deltaX - this.startPoint + options.width;
+                this.changeMenuPos();
+                const time = new Date().getTime() - (this.backgroundTouchStartTime || 0);
+                this.velocity = Math.abs(deltaX) / time;
             }
         }
 
@@ -138,223 +178,194 @@ export function NavigationDrawer(options) {
         e.stopPropagation();
     }
 
-    function onBackgroundTouchEnd(e) {
-        const touches = getTouches(e);
+    onBackgroundTouchEnd(e) {
+        const touches = this.getTouches(e);
         const touch = touches[0] || {};
         const endX = touch.clientX || 0;
-        const deltaX = endX - (backgroundTouchStartX || 0);
-        self.checkMenuState(deltaX);
-        countStart = 0;
+        const deltaX = endX - (this.backgroundTouchStartX || 0);
+        this.checkMenuState(deltaX);
+        this.countStart = 0;
     }
 
-    function onMaskTransitionEnd() {
-        const classList = mask.classList;
+    onMaskTransitionEnd() {
+        const classList = this.mask.classList;
 
         if (!classList.contains('backdrop')) {
             classList.add('hide');
         }
     }
 
-    let self;
-    let defaults;
-    let mask;
-    var newPos = 0;
-    var currentPos = 0;
-    var startPoint = 0;
-    var countStart = 0;
-    var velocity = 0;
-    options.target.classList.add('transition');
-    var dragMode = 0;
-    var scrollContainer = options.target.querySelector('.mainDrawer-scrollContainer');
-    scrollContainer.classList.add('scrollY');
+    initElements() {
+        const options = this.options;
 
-    const TouchMenuLA = function () {
-        self = this;
-        defaults = {
-            width: 260,
-            handleSize: 10,
-            disableMask: false,
-            maxMaskOpacity: 0.5
-        };
-        this.isVisible = false;
-        this.initialize();
-    };
-
-    TouchMenuLA.prototype.initElements = function () {
         options.target.classList.add('touch-menu-la');
         options.target.style.width = options.width + 'px';
         options.target.style.left = -options.width + 'px';
 
         if (!options.disableMask) {
-            mask = document.createElement('div');
-            mask.className = 'tmla-mask hide';
-            document.body.appendChild(mask);
-            dom.addEventListener(mask, dom.whichTransitionEvent(), onMaskTransitionEnd, {
+            this.mask = document.createElement('div');
+            this.mask.className = 'tmla-mask hide';
+            document.body.appendChild(this.mask);
+            dom.addEventListener(this.mask, dom.whichTransitionEvent(), this.onMaskTransitionEnd, {
                 passive: true
             });
         }
-    };
+    }
 
-    let menuTouchStartX;
-    let menuTouchStartY;
-    let menuTouchStartTime;
-    var edgeContainer = document.querySelector('.mainDrawerHandle');
-    var isPeeking = false;
-
-    TouchMenuLA.prototype.animateToPosition = function (pos) {
+    animateToPosition(pos) {
+        const options = this.options;
         requestAnimationFrame(function () {
             options.target.style.transform = pos ? 'translateX(' + pos + 'px)' : 'none';
         });
-    };
+    }
 
-    TouchMenuLA.prototype.changeMenuPos = function () {
-        if (newPos <= options.width) {
-            this.animateToPosition(newPos);
+    changeMenuPos() {
+        const options = this.options;
+        if (this.newPos <= options.width) {
+            this.animateToPosition(this.newPos);
         }
-    };
+    }
 
-    TouchMenuLA.prototype.clickMaskClose = function () {
-        mask.addEventListener('click', function () {
-            self.close();
-        });
-    };
+    clickMaskClose() {
+        this.close();
+    }
 
-    TouchMenuLA.prototype.checkMenuState = function (deltaX, deltaY) {
-        if (velocity >= 0.4) {
+    checkMenuState(deltaX, deltaY) {
+        if (this.velocity >= 0.4) {
             if (deltaX >= 0 || Math.abs(deltaY || 0) >= 70) {
-                self.open();
+                this.open();
             } else {
-                self.close();
+                this.close();
             }
         } else {
-            if (newPos >= 100) {
-                self.open();
+            if (this.newPos >= 100) {
+                this.open();
             } else {
-                if (newPos) {
-                    self.close();
+                if (this.newPos) {
+                    this.close();
                 }
             }
         }
-    };
+    }
+
+    open() {
+        const options = this.options;
 
-    TouchMenuLA.prototype.open = function () {
         this.animateToPosition(options.width);
-        currentPos = options.width;
+        this.currentPos = options.width;
         this.isVisible = true;
         options.target.classList.add('drawer-open');
-        self.showMask();
-        self.invoke(options.onChange);
-    };
+        this.showMask();
+        this.invoke(options.onChange);
+    }
+
+    close() {
+        const options = this.options;
 
-    TouchMenuLA.prototype.close = function () {
         this.animateToPosition(0);
-        currentPos = 0;
-        self.isVisible = false;
+        this.currentPos = 0;
+        this.isVisible = false;
         options.target.classList.remove('drawer-open');
-        self.hideMask();
-        self.invoke(options.onChange);
-    };
+        this.hideMask();
+        this.invoke(options.onChange);
+    }
 
-    TouchMenuLA.prototype.toggle = function () {
-        if (self.isVisible) {
-            self.close();
+    toggle() {
+        if (this.isVisible) {
+            this.close();
         } else {
-            self.open();
+            this.open();
         }
-    };
+    }
 
-    let backgroundTouchStartX;
-    let backgroundTouchStartTime;
+    showMask() {
+        this.mask.classList.remove('hide');
+        this.mask.classList.add('backdrop');
+    }
 
-    TouchMenuLA.prototype.showMask = function () {
-        mask.classList.remove('hide');
-        mask.classList.add('backdrop');
-    };
+    hideMask() {
+        this.mask.classList.add('hide');
+        this.mask.classList.remove('backdrop');
+    }
 
-    TouchMenuLA.prototype.hideMask = function () {
-        mask.classList.add('hide');
-        mask.classList.remove('backdrop');
-    };
-
-    TouchMenuLA.prototype.invoke = function (fn) {
+    invoke(fn) {
         if (fn) {
-            fn.apply(self);
+            fn.apply(this);
         }
-    };
+    }
 
-    let _edgeSwipeEnabled;
+    setEdgeSwipeEnabled(enabled) {
+        const options = this.options;
 
-    TouchMenuLA.prototype.setEdgeSwipeEnabled = function (enabled) {
         if (!options.disableEdgeSwipe) {
             if (browser.touch) {
                 if (enabled) {
-                    if (!_edgeSwipeEnabled) {
-                        _edgeSwipeEnabled = true;
-                        dom.addEventListener(edgeContainer, 'touchstart', onEdgeTouchStart, {
+                    if (!this._edgeSwipeEnabled) {
+                        this._edgeSwipeEnabled = true;
+                        dom.addEventListener(this.edgeContainer, 'touchstart', this.onEdgeTouchStart.bind(this), {
                             passive: true
                         });
-                        dom.addEventListener(edgeContainer, 'touchend', onEdgeTouchEnd, {
+                        dom.addEventListener(this.edgeContainer, 'touchend', this.onEdgeTouchEnd.bind(this), {
                             passive: true
                         });
-                        dom.addEventListener(edgeContainer, 'touchcancel', onEdgeTouchEnd, {
+                        dom.addEventListener(this.edgeContainer, 'touchcancel', this.onEdgeTouchEnd.bind(this), {
                             passive: true
                         });
                     }
                 } else {
-                    if (_edgeSwipeEnabled) {
-                        _edgeSwipeEnabled = false;
-                        dom.removeEventListener(edgeContainer, 'touchstart', onEdgeTouchStart, {
+                    if (this._edgeSwipeEnabled) {
+                        this._edgeSwipeEnabled = false;
+                        dom.removeEventListener(this.edgeContainer, 'touchstart', this.onEdgeTouchStart.bind(this), {
                             passive: true
                         });
-                        dom.removeEventListener(edgeContainer, 'touchend', onEdgeTouchEnd, {
+                        dom.removeEventListener(this.edgeContainer, 'touchend', this.onEdgeTouchEnd.bind(this), {
                             passive: true
                         });
-                        dom.removeEventListener(edgeContainer, 'touchcancel', onEdgeTouchEnd, {
+                        dom.removeEventListener(this.edgeContainer, 'touchcancel', this.onEdgeTouchEnd.bind(this), {
                             passive: true
                         });
                     }
                 }
             }
         }
-    };
+    }
 
-    TouchMenuLA.prototype.initialize = function () {
-        options = Object.assign(defaults, options || {});
+    initialize() {
+        const options = Object.assign(this.defaults, this.options || {});
 
         if (browser.edge) {
             options.disableEdgeSwipe = true;
         }
 
-        self.initElements();
+        this.initElements();
 
         if (browser.touch) {
-            dom.addEventListener(options.target, 'touchstart', onMenuTouchStart, {
+            dom.addEventListener(options.target, 'touchstart', this.onMenuTouchStart.bind(this), {
                 passive: true
             });
-            dom.addEventListener(options.target, 'touchmove', onMenuTouchMove, {
+            dom.addEventListener(options.target, 'touchmove', this.onMenuTouchMove.bind(this), {
                 passive: true
             });
-            dom.addEventListener(options.target, 'touchend', onMenuTouchEnd, {
+            dom.addEventListener(options.target, 'touchend', this.onMenuTouchEnd.bind(this), {
                 passive: true
             });
-            dom.addEventListener(options.target, 'touchcancel', onMenuTouchEnd, {
+            dom.addEventListener(options.target, 'touchcancel', this.onMenuTouchEnd.bind(this), {
                 passive: true
             });
-            dom.addEventListener(mask, 'touchstart', onBackgroundTouchStart, {
+            dom.addEventListener(this.mask, 'touchstart', this.onBackgroundTouchStart.bind(this), {
                 passive: true
             });
-            dom.addEventListener(mask, 'touchmove', onBackgroundTouchMove, {});
-            dom.addEventListener(mask, 'touchend', onBackgroundTouchEnd, {
+            dom.addEventListener(this.mask, 'touchmove', this.onBackgroundTouchMove.bind(this), {});
+            dom.addEventListener(this.mask, 'touchend', this.onBackgroundTouchEnd.bind(this), {
                 passive: true
             });
-            dom.addEventListener(mask, 'touchcancel', onBackgroundTouchEnd, {
+            dom.addEventListener(this.mask, 'touchcancel', this.onBackgroundTouchEnd.bind(this), {
                 passive: true
             });
         }
 
-        self.clickMaskClose();
-    };
-
-    return new TouchMenuLA();
+        this.mask.addEventListener('click', this.clickMaskClose.bind(this));
+    }
 }
-/* eslint-enable no-var */
+
+export default NavigationDrawer;
diff --git a/src/scripts/libraryMenu.js b/src/scripts/libraryMenu.js
index f80c1ca30c..50d17d5449 100644
--- a/src/scripts/libraryMenu.js
+++ b/src/scripts/libraryMenu.js
@@ -899,7 +899,7 @@ import { getParameterByName } from '../utils/url.ts';
         navDrawerScrollContainer = navDrawerElement.querySelector('.scrollContainer');
         navDrawerScrollContainer.addEventListener('click', onMainDrawerClick);
         return new Promise(function (resolve) {
-            import('../libraries/navdrawer/navdrawer').then(({ NavigationDrawer }) => {
+            import('../libraries/navdrawer/navdrawer').then(({ default: NavigationDrawer }) => {
                 navDrawerInstance = new NavigationDrawer(getNavDrawerOptions());
 
                 if (!layoutManager.tv) {