diff --git a/application/controllers/LayoutController.php b/application/controllers/LayoutController.php
index 237681cfa5..dffdc343a3 100644
--- a/application/controllers/LayoutController.php
+++ b/application/controllers/LayoutController.php
@@ -3,13 +3,15 @@
 
 namespace Icinga\Controllers;
 
-use Icinga\Web\Controller\ActionController;
 use Icinga\Web\Menu;
+use Icinga\Web\Navigation\Mobile\MobileConfigMenu;
+use Icinga\Web\Navigation\Mobile\MobileMenu;
+use ipl\Web\Compat\CompatController;
 
 /**
  * Create complex layout parts
  */
-class LayoutController extends ActionController
+class LayoutController extends CompatController
 {
     /**
      * Render the menu
@@ -21,6 +23,22 @@ public function menuAction()
         $this->view->menuRenderer = (new Menu())->getRenderer();
     }
 
+    public function mobileConfigMenuAction()
+    {
+        $this->setAutorefreshInterval(15);
+        $this->_helper->layout()->disableLayout();
+        $this->view->compact = true;
+        $this->getDocument()->addHtml(new MobileConfigMenu());
+    }
+
+    public function mobileMenuAction()
+    {
+        $this->setAutorefreshInterval(15);
+        $this->_helper->layout()->disableLayout();
+        $this->view->compact = true;
+        $this->getDocument()->addHtml(new MobileMenu());
+    }
+
     public function announcementsAction()
     {
         $this->_helper->layout()->disableLayout();
diff --git a/application/layouts/scripts/body.phtml b/application/layouts/scripts/body.phtml
index 87b570bfe5..c398e115ca 100644
--- a/application/layouts/scripts/body.phtml
+++ b/application/layouts/scripts/body.phtml
@@ -1,8 +1,11 @@
 <?php
 
-use Icinga\Web\Url;
-use Icinga\Web\Notification;
 use Icinga\Authentication\Auth;
+use Icinga\Web\Navigation\Mobile\MobileConfigMenu;
+use Icinga\Web\Navigation\Mobile\MobileMenu;
+use Icinga\Web\Notification;
+use Icinga\Web\Url;
+use Icinga\Web\Widget\SearchDashboard;
 use ipl\Html\HtmlString;
 use ipl\Web\Widget\Icon;
 
@@ -24,6 +27,9 @@ if ($this->layout()->inlineLayout) {
     $inlineLayoutScript = 'inline.phtml';
 }
 
+$searchDashboard = new SearchDashboard();
+$searchDashboard->setUser($this->Auth()->getUser());
+
 ?>
 <div id="header">
     <div id="announcements" class="container">
@@ -44,9 +50,18 @@ if ($this->layout()->inlineLayout) {
                     'id'                => 'header-logo'
                 )
             ); ?>
-            <div id="mobile-menu-toggle">
-                <button type="button"><?= $this->icon('menu') ?><?= $this->icon('cancel') ?></button>
-            </div>
+        </div>
+    <?php if ($searchDashboard->search('dummy')->getPane('search')->hasDashlets()): ?>
+        <form id="mobile-searchbar" action="<?= $this->href('search') ?>" method="get" role="search" class="search-control">
+            <input type="text" name="q" id="search" class="search search-input" required
+                   placeholder="<?= $this->translate('Search everything') ?> &hellip;"
+                   autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
+            <button class="search-reset icon-cancel" type="reset"></button>
+        </form>
+    <?php endif; ?>
+        <div id="mobile-config-menu" data-last-update="-1" data-base-target="_main" class="container"
+             data-icinga-url="<?= $this->href('layout/mobile-config-menu') ?>"  data-icinga-refresh="15">
+            <?= new MobileConfigMenu() ?>
         </div>
         <?= $this->render('parts/navigation.phtml'); ?>
     </div>
@@ -68,7 +83,6 @@ if ($this->layout()->inlineLayout) {
 </div>
 <div id="footer">
   <ul role="alert" id="notifications"><?php
-
     $notifications = Notification::getInstance();
     if ($notifications->hasMessages()) {
         foreach ($notifications->popMessages() as $m) {
@@ -95,4 +109,8 @@ if ($this->layout()->inlineLayout) {
     }
   ?></ul>
   <div id="application-state-summary" class="container" data-icinga-url="<?= $this->url('application-state/summary') ?>" data-last-update="-1" data-icinga-refresh="60"></div>
+    <div id="mobile-menu" data-last-update="-1" data-base-target="_main" class="container"
+         data-icinga-url="<?= $this->href('layout/mobile-menu') ?>"  data-icinga-refresh="15">
+        <?= new MobileMenu() ?>
+    </div>
 </div>
diff --git a/application/layouts/scripts/layout.phtml b/application/layouts/scripts/layout.phtml
index 880c2a9f19..feaf213ad4 100644
--- a/application/layouts/scripts/layout.phtml
+++ b/application/layouts/scripts/layout.phtml
@@ -34,6 +34,7 @@ $innerLayoutScript = $this->layout()->innerLayout . '.phtml';
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="application-name" content="Icinga Web 2">
   <meta name="apple-mobile-web-app-title" content="Icinga">
+  <link rel="manifest" href=<?= $this->baseUrl('img/manifest.json') ?>>
   <link rel="mask-icon" href="<?= $this->baseUrl('img/website-icon.svg') ?>" color="#0096BF">
 <?php if ($isIframe): ?>
   <base target="_parent">
diff --git a/application/layouts/scripts/parts/navigation.phtml b/application/layouts/scripts/parts/navigation.phtml
index dd973f5c5b..48c1f4fad5 100644
--- a/application/layouts/scripts/parts/navigation.phtml
+++ b/application/layouts/scripts/parts/navigation.phtml
@@ -20,7 +20,7 @@ if (! $this->auth()->isAuthenticated()) {
     </ul>
 </div>
 <div id="menu" data-last-update="-1" data-base-target="_main" class="container"
-      data-icinga-url="<?= $this->href('layout/menu') ?>"  data-icinga-refresh="15">
+      data-icinga-url="<?= $this->href('layout/menu') ?>" data-icinga-refresh="15">
     <?= $this->partial(
         'layout/menu.phtml',
         'default',
diff --git a/library/Icinga/Common/HealthBadgeTrait.php b/library/Icinga/Common/HealthBadgeTrait.php
new file mode 100644
index 0000000000..298d58900d
--- /dev/null
+++ b/library/Icinga/Common/HealthBadgeTrait.php
@@ -0,0 +1,78 @@
+<?php
+/* Icinga Web 2 | (c) 2022 Icinga GmbH | GPLv2+ */
+
+namespace Icinga\Common;
+
+use Icinga\Application\Hook\HealthHook;
+use ipl\Web\Widget\StateBadge;
+
+trait HealthBadgeTrait
+{
+    private $STATE_OK = 'ok';
+    private $STATE_CRITICAL = 'critical';
+    private $STATE_WARNING = 'warning';
+    private $STATE_PENDING = 'pending';
+    private $STATE_UNKNOWN = 'unknown';
+
+    /** @var string The state of the worst health problem item */
+    protected $state;
+
+    /** @var string The message of the worst health problem item */
+    protected $title;
+
+    /**
+     * Create Health Badge
+     *
+     * @return StateBadge $stateBadge
+     */
+    protected function createHealthBadge()
+    {
+        $stateBadge = null;
+        if ($this->getHealthCount() > 0) {
+            $stateBadge = new StateBadge($this->getHealthCount(), $this->state);
+            $stateBadge->addAttributes(['class' => 'disabled', 'title' => $this->title]);
+        }
+
+        return $stateBadge;
+    }
+
+    /**
+     * Get the number of health problems
+     *
+     * @return int $count
+     */
+    protected function getHealthCount()
+    {
+        $count = 0;
+        $title = null;
+        $worstState = null;
+        foreach (HealthHook::collectHealthData()->select() as $result) {
+            if ($worstState === null || $result->state > $worstState) {
+                $worstState = $result->state;
+                $title = $result->message;
+                $count = 1;
+            } elseif ($worstState === $result->state) {
+                $count++;
+            }
+        }
+
+        switch ($worstState) {
+            case HealthHook::STATE_OK:
+                $count = 0;
+                break;
+            case HealthHook::STATE_WARNING:
+                $this->state = $this->STATE_WARNING;
+                break;
+            case HealthHook::STATE_CRITICAL:
+                $this->state = $this->STATE_CRITICAL;
+                break;
+            case HealthHook::STATE_UNKNOWN:
+                $this->state = $this->STATE_UNKNOWN;
+                break;
+        }
+
+        $this->title = $title;
+
+        return $count;
+    }
+}
diff --git a/library/Icinga/Web/JavaScript.php b/library/Icinga/Web/JavaScript.php
index 9a6a11b382..4519400cf3 100644
--- a/library/Icinga/Web/JavaScript.php
+++ b/library/Icinga/Web/JavaScript.php
@@ -36,6 +36,7 @@ class JavaScript
         'js/icinga/behavior/dropdown.js',
         'js/icinga/behavior/navigation.js',
         'js/icinga/behavior/form.js',
+        'js/icinga/behavior/flyout-menu.js',
         'js/icinga/behavior/actiontable.js',
         'js/icinga/behavior/flyover.js',
         'js/icinga/behavior/filtereditor.js',
diff --git a/library/Icinga/Web/Navigation/ConfigMenu.php b/library/Icinga/Web/Navigation/ConfigMenu.php
index 4d5caee4ed..50fe6f4b86 100644
--- a/library/Icinga/Web/Navigation/ConfigMenu.php
+++ b/library/Icinga/Web/Navigation/ConfigMenu.php
@@ -3,25 +3,19 @@
 
 namespace Icinga\Web\Navigation;
 
-use Icinga\Application\Hook\HealthHook;
 use Icinga\Application\Icinga;
-use Icinga\Application\Logger;
 use Icinga\Authentication\Auth;
+use Icinga\Common\HealthBadgeTrait;
 use ipl\Html\Attributes;
 use ipl\Html\BaseHtmlElement;
 use ipl\Html\HtmlElement;
 use ipl\Html\Text;
 use ipl\Web\Url;
 use ipl\Web\Widget\Icon;
-use ipl\Web\Widget\StateBadge;
 
 class ConfigMenu extends BaseHtmlElement
 {
-    const STATE_OK = 'ok';
-    const STATE_CRITICAL = 'critical';
-    const STATE_WARNING = 'warning';
-    const STATE_PENDING = 'pending';
-    const STATE_UNKNOWN = 'unknown';
+    use HealthBadgeTrait;
 
     protected $tag = 'ul';
 
@@ -35,6 +29,10 @@ class ConfigMenu extends BaseHtmlElement
 
     protected $state;
 
+    protected $healthBadge;
+
+    protected $flyoutID = 'config-menu-flyout';
+
     public function __construct()
     {
         $this->children = [
@@ -89,6 +87,7 @@ public function __construct()
                 'items' => [
                     'logout' => [
                         'label' => t('Logout'),
+                        'icon' => 'power-off',
                         'atts'  => [
                             'target' => '_self',
                             'class' => 'nav-item-logout'
@@ -99,13 +98,7 @@ public function __construct()
             ]
         ];
 
-        if (Logger::writesToFile()) {
-            $this->children['system']['items']['application_log'] = [
-                'label'       => t('Application Log'),
-                'url'         => 'list/applicationlog',
-                'permission'  => 'application/log'
-            ];
-        }
+        $this->healthBadge = $this->createHealthBadge();
     }
 
     protected function assembleUserMenuItem(BaseHtmlElement $userMenuItem)
@@ -165,7 +158,7 @@ protected function assembleLevel2Nav(BaseHtmlElement $level2Nav)
                 ));
             }
 
-            $ul = HtmlElement::create('ul', ['class' => 'nav']);
+            $ul = HtmlElement::create('ul', ['class' => 'nav flyout-menu']);
             foreach ($c['items'] as $key => $item) {
                 $ul->add($this->createLevel2MenuItem($item, $key));
             }
@@ -176,41 +169,6 @@ protected function assembleLevel2Nav(BaseHtmlElement $level2Nav)
         $level2Nav->add($navContent);
     }
 
-    protected function getHealthCount()
-    {
-        $count = 0;
-        $title = null;
-        $worstState = null;
-        foreach (HealthHook::collectHealthData()->select() as $result) {
-            if ($worstState === null || $result->state > $worstState) {
-                $worstState = $result->state;
-                $title = $result->message;
-                $count = 1;
-            } elseif ($worstState === $result->state) {
-                $count++;
-            }
-        }
-
-        switch ($worstState) {
-            case HealthHook::STATE_OK:
-                $count = 0;
-                break;
-            case HealthHook::STATE_WARNING:
-                $this->state = self::STATE_WARNING;
-                break;
-            case HealthHook::STATE_CRITICAL:
-                $this->state = self::STATE_CRITICAL;
-                break;
-            case HealthHook::STATE_UNKNOWN:
-                $this->state = self::STATE_UNKNOWN;
-                break;
-        }
-
-        $this->title = $title;
-
-        return $count;
-    }
-
     protected function isSelectedItem($item)
     {
         if ($item !== null && Icinga::app()->getRequest()->getUrl()->matches($item['url'])) {
@@ -221,22 +179,11 @@ protected function isSelectedItem($item)
         return false;
     }
 
-    protected function createHealthBadge()
-    {
-        $stateBadge = null;
-        if ($this->getHealthCount() > 0) {
-            $stateBadge = new StateBadge($this->getHealthCount(), $this->state);
-            $stateBadge->addAttributes(['class' => 'disabled']);
-        }
-
-        return $stateBadge;
-    }
-
     protected function createLevel2Menu()
     {
         $level2Nav = HtmlElement::create(
             'div',
-            Attributes::create(['class' => 'nav-level-1 flyout'])
+            Attributes::create(['class' => 'nav-level-1 flyout', 'id' => $this->flyoutID ])
         );
 
         $this->assembleLevel2Nav($level2Nav);
@@ -251,10 +198,16 @@ protected function createLevel2MenuItem($item, $key)
         }
 
         $healthBadge = null;
-        $class = null;
+        $class = '';
         if ($key === 'health') {
             $class = 'badge-nav-item';
-            $healthBadge = $this->createHealthBadge();
+            $healthBadge = $this->healthBadge;
+        }
+
+        $icon = null;
+        if (isset($item['icon'])) {
+            $icon = new Icon($item['icon']);
+            $class .= ' has-icon';
         }
 
         $li = HtmlElement::create(
@@ -265,6 +218,7 @@ protected function createLevel2MenuItem($item, $key)
                     'a',
                     Attributes::create(['href' => Url::fromPath($item['url'])]),
                     [
+                        $icon,
                         $item['label'],
                         isset($healthBadge) ? $healthBadge : ''
                     ]
@@ -292,7 +246,10 @@ protected function createUserMenuItem()
 
     protected function createCogMenuItem()
     {
-        $cogMenuItem = HtmlElement::create('li', ['class' => 'config-nav-item']);
+        $cogMenuItem = HtmlElement::create('li', [
+            'class' => 'config-nav-item',
+            'data-flyout-target' => $this->flyoutID
+        ]);
 
         $this->assembleCogMenuItem($cogMenuItem);
 
diff --git a/library/Icinga/Web/Navigation/Mobile/MobileConfigMenu.php b/library/Icinga/Web/Navigation/Mobile/MobileConfigMenu.php
new file mode 100644
index 0000000000..9dbad89d72
--- /dev/null
+++ b/library/Icinga/Web/Navigation/Mobile/MobileConfigMenu.php
@@ -0,0 +1,101 @@
+<?php
+/* Icinga Web 2 | (c) 2022 Icinga GmbH | GPLv2+ */
+
+namespace Icinga\Web\Navigation\Mobile;
+
+use Icinga\Application\Icinga;
+use Icinga\Authentication\Auth;
+use Icinga\Common\HealthBadgeTrait;
+use Icinga\Web\Navigation\ConfigMenu;
+use ipl\Html\Attributes;
+use ipl\Html\BaseHtmlElement;
+use ipl\Html\HtmlElement;
+use ipl\Html\Text;
+use ipl\Web\Url;
+use ipl\Web\Widget\Icon;
+
+class MobileConfigMenu extends ConfigMenu
+{
+    use HealthBadgeTrait;
+
+    protected $tag = 'ul';
+
+    protected $defaultAttributes = [
+        'class' => 'nav user-nav-item',
+        'id' => 'mobile-config-menu'
+    ];
+
+    protected $flyoutID = 'mobile-config-menu-flyout';
+
+    protected function isSelectedItem($item)
+    {
+        if ($item !== null && Icinga::app()->getRequest()->getUrl()->matches($item['url'])) {
+            $this->selected = $item;
+            return true;
+        }
+
+        return false;
+    }
+
+    protected function assembleLevel2Nav(BaseHtmlElement $level2Nav)
+    {
+        $username = Auth::getInstance()->getUser()->getUsername();
+        $navContent = HtmlElement::create('div', ['class' => 'flyout-content']);
+        $navContent->add(HtmlElement::create('ul', ['class' => 'nav flyout-menu'], [
+            HtmlElement::create('li', ['class' => 'has-icon'], [
+                HtmlElement::create(
+                    'a',
+                    Attributes::create(['href' => Url::fromPath('account')]),
+                    [
+                        HtmlElement::create('i', ['class' => 'user-ball'], Text::create($username[0])),
+                        Text::create($username)
+                    ]
+                )
+            ])
+        ]));
+        foreach ($this->children as $c) {
+            if (isset($c['permission']) && ! Auth::getInstance()->hasPermission($c['permission'])) {
+                continue;
+            }
+
+            if (isset($c['title'])) {
+                $navContent->add(HtmlElement::create(
+                    'h3',
+                    null,
+                    $c['title']
+                ));
+            }
+
+            $ul = HtmlElement::create('ul', ['class' => 'nav flyout-menu']);
+            foreach ($c['items'] as $key => $item) {
+                $ul->add($this->createLevel2MenuItem($item, $key));
+            }
+
+            $navContent->add($ul);
+        }
+        $level2Nav->add($navContent);
+    }
+
+    protected function assemble()
+    {
+        $username = Auth::getInstance()->getUser()->getUsername();
+
+        $button = HtmlElement::create(
+            'button',
+            ['id' => 'toggle-mobile-config-flyout'],
+            [
+                new HtmlElement(
+                    'i',
+                    Attributes::create(['class' => 'user-ball']),
+                    Text::create($username[0])
+                )
+            ]
+        );
+
+        $this->add(HtmlElement::create('li', null, [
+            $this->createLevel2Menu(),
+            $button,
+            $this->healthBadge
+        ]));
+    }
+}
diff --git a/library/Icinga/Web/Navigation/Mobile/MobileMenu.php b/library/Icinga/Web/Navigation/Mobile/MobileMenu.php
new file mode 100644
index 0000000000..e56a707819
--- /dev/null
+++ b/library/Icinga/Web/Navigation/Mobile/MobileMenu.php
@@ -0,0 +1,186 @@
+<?php
+/* Icinga Web 2 | (c) 2022 Icinga GmbH | GPLv2+ */
+
+namespace Icinga\Web\Navigation\Mobile;
+
+use Icinga\Application\Icinga;
+use Icinga\Authentication\Auth;
+use Icinga\Common\HealthBadgeTrait;
+use Icinga\Web\Menu;
+use ipl\Html\Attributes;
+use ipl\Html\BaseHtmlElement;
+use ipl\Html\HtmlElement;
+use ipl\Html\HtmlString;
+use ipl\Html\Text;
+use ipl\Web\Widget\Icon;
+
+class MobileMenu extends BaseHtmlElement
+{
+    use HealthBadgeTrait;
+
+    const MAX_NUM_OF_ITEMS = 5;
+
+    const EXCLUDED_ITEMS = [
+        'configuration',
+        'system',
+//        'user'
+    ];
+
+    protected $tag = 'nav';
+
+    protected $items;
+
+    public function __construct()
+    {
+        $menu = new Menu();
+        $this->items = $menu;
+
+        $this->items->order();
+    }
+
+    protected function createMoreItem()
+    {
+        $moreMenu = new HtmlElement('li');
+
+        $this->assembleMoreItem($moreMenu);
+
+        return $moreMenu;
+    }
+
+    protected function assembleMoreItem(BaseHtmlElement $moreMenu)
+    {
+        $moreMenu->add([
+            $this->createMoreFlyout(),
+            HtmlElement::create(
+                'button',
+                Attributes::create(['id' => 'toggle-more']),
+                [
+                    new Icon('ellipsis-v'),
+                    Text::create('More')
+                ]
+            )
+        ]);
+    }
+
+    protected function createNavItemIcon($item)
+    {
+        if ($item->getUrl() !== null && substr($item->getUrl()->getPath(), 0, 9) === 'icingadb/') {
+            $icon = new Icon($item->getIcon(), [ 'aria-hidden' => 1]);
+            return $icon;
+        }
+
+        return new HtmlString(Icinga::app()->getViewRenderer()->view->icon($item->getIcon()));
+    }
+
+    protected function createMoreFlyout()
+    {
+        $moreFlyout = new HtmlElement('div', Attributes::create(['class' => 'flyout', 'id' => 'more-flyout']));
+
+        $this->assembleMoreFlyout($moreFlyout);
+
+        return $moreFlyout;
+    }
+
+    protected function assembleMoreFlyout($moreFlyout)
+    {
+        $flyoutContent = HtmlElement::create('div', ['class' => 'flyout-content']);
+        $ul = HtmlElement::create('ul', ['class' => 'nav flyout-menu nav-level-2']);
+
+        $startIndex = 0;
+        foreach ($this->items as $key => $item) {
+            if ($this->isValidItem($key, $item)) {
+                if (++$startIndex > self::MAX_NUM_OF_ITEMS - 1) {
+                    $li = $this->createMenuItem($item, $key);
+                    $ul->add($li);
+                }
+            }
+        }
+
+        $flyoutContent->add($ul);
+        $moreFlyout->add($flyoutContent);
+    }
+
+    protected function createMenuItem($item, $key)
+    {
+        if (in_array($key, self::EXCLUDED_ITEMS)) {
+            return null;
+        }
+
+        if (isset($item->permission) && ! Auth::getInstance()->hasPermission($item->permission)) {
+            return null;
+        }
+
+        $class = $item->getCssClass() .
+            ' '.
+            ($item->getActive() ? ' active' : '') .
+            ' ' .
+            ($item->getSelected() ? ' selected' : '') .
+            ' ' .
+            (!empty($item->getIcon()) ? ' has-icon' : '');
+
+        $menuItem = HtmlElement::create(
+            'li',
+            ['class' => $class],
+            [
+                HtmlElement::create('a', [
+                    'href' => $item->getUrl(),
+                ], [
+                    $this->createNavItemIcon($item),
+                    Text::create($item->getLabel())
+                ])
+            ]
+        );
+
+        return $menuItem;
+    }
+
+    protected function getValidItemCount()
+    {
+        $count = 0;
+        foreach ($this->items as $key => $item) {
+            if ($this->isValidItem($key, $item)) {
+                $count++;
+            }
+        }
+
+        return $count;
+    }
+
+    protected function isValidItem($key, $item)
+    {
+        if (in_array($key, self::EXCLUDED_ITEMS) || !($item->hasChildren())) {
+            if ($key === 'dashboard') {
+                return true;
+            }
+            return false;
+        }
+        return true;
+    }
+
+    protected function assemble()
+    {
+        $ul = new HtmlElement('ul', Attributes::create(['class' => 'nav nav-level-1']));
+        $validItemCount = $this->getValidItemCount();
+
+        $count = 0;
+        foreach ($this->items as $key => $item) {
+            if ($this->isValidItem($key, $item)) {
+                $count++;
+
+                if ($validItemCount == self::MAX_NUM_OF_ITEMS && $count == self::MAX_NUM_OF_ITEMS) {
+                    $ul->add($this->createMenuItem($item, $key));
+                    break;
+                }
+
+                if ($count > self::MAX_NUM_OF_ITEMS - 1) {
+                    $ul->add($this->createMoreItem());
+                    break;
+                }
+
+                $ul->add($this->createMenuItem($item, $key));
+            }
+        }
+
+        $this->add($ul);
+    }
+}
diff --git a/library/Icinga/Web/StyleSheet.php b/library/Icinga/Web/StyleSheet.php
index 9ca6d9af75..754a80b29e 100644
--- a/library/Icinga/Web/StyleSheet.php
+++ b/library/Icinga/Web/StyleSheet.php
@@ -58,6 +58,7 @@ class StyleSheet
         'css/icinga/badges.less',
         'css/icinga/configmenu.less',
         'css/icinga/mixins.less',
+        'css/icinga/flyout.less',
         'css/icinga/grid.less',
         'css/icinga/nav.less',
         'css/icinga/main.less',
@@ -65,6 +66,7 @@ class StyleSheet
         'css/icinga/layout.less',
         'css/icinga/layout-structure.less',
         'css/icinga/menu.less',
+        'css/icinga/mobilemenu.less',
         'css/icinga/tabs.less',
         'css/icinga/forms.less',
         'css/icinga/setup.less',
@@ -77,6 +79,7 @@ class StyleSheet
         'css/icinga/compat.less',
         'css/icinga/print.less',
         'css/icinga/responsive.less',
+        'css/icinga/mobileconfigmenu.less',
         'css/icinga/modal.less',
         'css/icinga/audit.less',
         'css/icinga/health.less',
diff --git a/library/Icinga/Web/Widget/Flyout.php b/library/Icinga/Web/Widget/Flyout.php
new file mode 100644
index 0000000000..343769061a
--- /dev/null
+++ b/library/Icinga/Web/Widget/Flyout.php
@@ -0,0 +1,57 @@
+<?php
+/* Icinga Web 2 | (c) 2022 Icinga GmbH | GPLv2+ */
+
+namespace Icinga\Web\Widget;
+
+use Icinga\Web\Window;
+use ipl\Html\Attributes;
+use ipl\Html\BaseHtmlElement;
+use ipl\Html\HtmlDocument;
+use ipl\Html\HtmlElement;
+
+class Flyout extends BaseHtmlElement
+{
+
+    protected $tag = 'div';
+
+    protected $button;
+
+    protected $mobileOnly;
+
+    protected $defaultAttributes = [
+        'class' => 'flyout-content'
+    ];
+
+    public function __construct($button = null, $mobileOnly = false)
+    {
+        $this->button = $button;
+        if ($button === null) {
+            $this->button = new HtmlElement('button', null, ['press me']);
+        }
+
+        $this->mobileOnly = $mobileOnly;
+    }
+
+    public function setButton($button)
+    {
+        $this->button = $button;
+    }
+
+    protected function assemble()
+    {
+        $wrapper = new HtmlElement('div', Attributes::create(['class' => 'flyout']));
+
+        // $uniqueID = $this->Window()->getContainerId();
+        $uniqueID = Window::generateID();
+        $wrapper->addAttributes([
+            'id' => 'icingaweb2-flyout-' . $uniqueID,
+            'class' => $this->mobileOnly ? 'mobile-only' : ''
+        ]);
+
+        $wrapper->add($this);
+
+        $html = new HtmlDocument();
+
+        $this->prependWrapper($html->addHtml($wrapper, $this->button));
+    }
+}
diff --git a/public/css/icinga/configmenu.less b/public/css/icinga/configmenu.less
index 05e50e8647..8e0f094dd6 100644
--- a/public/css/icinga/configmenu.less
+++ b/public/css/icinga/configmenu.less
@@ -97,6 +97,11 @@
       }
     }
 
+    .nav-level-1 li a {
+      // Match effective padding left of level-2 flyouts. (1.5 + .5 em)
+      font-size: 11/12em;
+    }
+
     .state-badge {
       line-height: 1.2;
       padding: .25em;
@@ -104,23 +109,6 @@
     }
   }
 
-  .nav-level-1 li {
-    &.badge-nav-item > a {
-      display: flex;
-      align-items: baseline;
-      width: 100%;
-
-      .state-badge {
-        margin-left: auto;
-      }
-    }
-  }
-
-  .nav-item-logout {
-    color: @color-critical;
-    border-top: 1px solid @gray-lighter;
-  }
-
   .user-ball {
     .ball();
     .ball-size-l();
@@ -163,7 +151,7 @@
     }
   }
 
-  .flyout {
+  .nav-level-1 {
     bottom: 100%;
     right: -2em;
     width: 15em;
@@ -210,7 +198,7 @@
     }
   }
 
-  .flyout {
+  .nav-level-1 {
     bottom: 0;
     left: 100%;
     width: 14em;
@@ -223,58 +211,6 @@
   }
 }
 
-.flyout {
-  display: none;
-  position: absolute;
-  border: 1px solid @gray-lighter;
-  background: @body-bg-color;
-  box-shadow: 0 0 1em 0 rgba(0,0,0,.25);
-  z-index: 1;
-  .rounded-corners();
-
-  a {
-    font-size: 11/12em;
-    padding: 0.364em 0.545em 0.364em 2em;
-    line-height: 2;
-
-    &:hover {
-      text-decoration: none;
-      background: @menu-2ndlvl-highlight-bg-color;
-    }
-  }
-
-  h3 {
-    font-size: 10/12em;
-    color: @text-color-light;
-    letter-spacing: .1px;
-    padding: 0.364em 0.545em 0.364em 0.545em;
-    margin: 0;
-  }
-
-  .flyout-content {
-    overflow: auto;
-    // Partially escape to have ems calculated
-    max-height: calc(~"100vh - " 50/12em);
-    padding: .5em 0;
-    position: relative;
-  }
-
-  // Caret
-  &:before {
-    content: "";
-    display: block;
-    position: absolute;
-    transform: rotate(45deg);
-    background: @body-bg-color;
-    border-bottom: 1px solid @gray-lighter;
-    border-right: 1px solid @gray-lighter;
-    height: 1.1em;
-    width: 1.1em;
-    bottom: -.6em;
-    right: 2.5em;
-  }
-}
-
 // Prevent flyout to vanish on autorefresh
 #layout.config-flyout-open .config-nav-item {
   .flyout {
diff --git a/public/css/icinga/flyout.less b/public/css/icinga/flyout.less
new file mode 100644
index 0000000000..998b927343
--- /dev/null
+++ b/public/css/icinga/flyout.less
@@ -0,0 +1,131 @@
+#layout:not(.minimal-layout) .flyout:not(.mobile-only),
+#layout.minimal-layout .flyout {
+  display: none;
+  border: 1px solid @gray-lighter;
+  background: @body-bg-color;
+  box-shadow: 0 0 1em 0 rgba(0,0,0,.25);
+  z-index: 1;
+  .rounded-corners();
+
+  &.flyout-open {
+    display: block;
+  }
+
+  // Caret
+  &:before {
+    content: "";
+    display: block;
+    position: absolute;
+    transform: rotate(45deg);
+    background: @body-bg-color;
+    border-bottom: 1px solid @gray-lighter;
+    border-right: 1px solid @gray-lighter;
+    height: 1.1em;
+    width: 1.1em;
+    bottom: -.6em;
+    right: 2.5em;
+  }
+
+  // Flyout Menu
+  .flyout-menu {
+    display: block;
+    margin: 0;
+
+    form {
+      width: 100%
+    }
+
+    a,
+    button {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 100%;
+      display: block;
+      width: 100%;
+
+      &:hover {
+        text-decoration: none;
+        background: @menu-2ndlvl-highlight-bg-color;
+      }
+    }
+
+    > li {
+      margin: 0;
+
+      > a,
+      button {
+        padding: 0.364em 0.545em;
+      }
+
+      &.badge-nav-item > a {
+        display: flex;
+        align-items: baseline;
+        width: 100%;
+
+        .state-badge {
+          margin-left: auto;
+        }
+      }
+
+      .icon,
+      i[class^="icon-"]{
+        width: 1em;
+        margin-left: .3em;
+        margin-right: .2em;
+        opacity: .8;
+      }
+
+      .user-ball {
+        height: 0.75em;
+        width: 0.75em;
+        padding: 0;
+        line-height: 1.25;
+
+        margin-right: .2em;
+      }
+
+      &:not(.has-icon) > a {
+        padding-left: 2em;
+      }
+
+      &.nav-item-logout {
+        color: @color-critical;
+        border-top: 1px solid @gray-lighter;
+      }
+    }
+  }
+
+  h3 {
+    font-size: 10/12em;
+    color: @text-color-light;
+    letter-spacing: .1px;
+    padding: 0.364em 0.545em 0.364em 0.545em;
+    margin: 0;
+  }
+
+  .flyout-content {
+    overflow: auto;
+    // Partially escape to have ems calculated
+    max-height: calc(~"100vh - " 50/12em);
+    padding: .5em 0;
+    position: relative;
+  }
+}
+
+.flyout:not(.mobile-only) {
+  position: absolute;
+}
+
+#layout:not(.minimal-layout) .flyout.mobile-only {
+  + button {
+    display: none;
+  }
+}
+
+#layout.minimal-layout .flyout-content {
+  a,
+  h3,
+  button {
+    line-height: 2.75
+  }
+}
diff --git a/public/css/icinga/layout-structure.less b/public/css/icinga/layout-structure.less
index b1ca8e65a5..f9ff26e102 100644
--- a/public/css/icinga/layout-structure.less
+++ b/public/css/icinga/layout-structure.less
@@ -26,11 +26,14 @@ body {
 #sidebar {
   width: 16em;
   display: flex;
-  flex-direction: column;
   position: relative;
   z-index: 2;
 }
 
+#layout:not(.minimal-layout) #sidebar {
+  flex-direction: column;
+}
+
 #layout:not(.minimal-layout) #sidebar:after {
   content: "";
   display: block;
diff --git a/public/css/icinga/layout.less b/public/css/icinga/layout.less
index c37da7920e..5eef758751 100644
--- a/public/css/icinga/layout.less
+++ b/public/css/icinga/layout.less
@@ -3,11 +3,14 @@
 #footer {
   bottom: 0;
   right: 0;
-  left: 12em;
-  position: fixed;
   z-index: 999;
 }
 
+.layout:not(.minimal-layout) #footer {
+  position: fixed;
+  left: 12em;
+}
+
 #layout.minimal-layout #footer {
   left: 0;
 }
@@ -150,6 +153,8 @@
 // Mobile menu
 #layout.minimal-layout #sidebar {
   background-color: @menu-bg-color;
+  justify-content: space-between;
+  align-items: center;
 }
 
 #mobile-menu-toggle {
diff --git a/public/css/icinga/mobileconfigmenu.less b/public/css/icinga/mobileconfigmenu.less
new file mode 100644
index 0000000000..4d96698217
--- /dev/null
+++ b/public/css/icinga/mobileconfigmenu.less
@@ -0,0 +1,137 @@
+#mobile-searchbar {
+  flex: 1 1 auto;
+  margin-right: 1em;
+
+  input.search {
+    @height: 2.5em;
+
+    width: 100%;
+    background: @low-sat-blue-dark url(../img/icons/search.png) no-repeat .5em center;
+    padding-left: 2em;
+    background-size: 1em;
+    border: none;
+    height: @height;
+    border-radius: @height/2;
+
+    &:focus {
+      outline: 3px solid rgba(0, 195, 237, 0.5);
+
+      &::placeholder {
+        color: @gray;
+      }
+    }
+  }
+
+  .search-reset {
+    right: .5em;
+  }
+
+  .search-control {
+    width: 100%;
+  }
+}
+
+#mobile-config-menu {
+  position: relative;
+
+  button {
+    .appearance(none);
+    background: none;
+    border: none;
+    .rounded-corners();
+    padding: .25em;
+    margin-right: -.25em;
+
+    > .user-ball {
+      .ball-size-l();
+    }
+  }
+
+  > li {
+    margin-right: .75em;
+  }
+
+  .state-badge {
+    font-size: .857em;
+    line-height: 1.5;
+  }
+
+  button ~ .state-badge {
+    position: absolute;
+    top: .25em;
+    left: -.5em;
+  }
+
+  .user-ball {
+    .ball();
+    .ball-solid(@icinga-blue);
+
+    // icingadb-web/public/css/common.less: .user-ball
+    font-weight: bold;
+    text-transform: uppercase;
+
+    // compensate border
+    margin: -1px;
+    border: 1px solid @text-color-inverted;
+    font-style: normal;
+    vertical-align: baseline;
+
+    font-size: 1.75em;
+  }
+
+  .nav-level-1 {
+    right: 1em;
+    left: 1em;
+    top: 4em;
+  }
+
+  > li.active button {
+    background: @icinga-blue
+  }
+
+  .nav-level-1 li.active.selected {
+    background: @menu-2ndlvl-active-bg-color
+  }
+}
+
+#layout.minimal-layout #mobile-config-menu {
+  .nav-level-1 {
+    position: fixed;
+
+    &:before {
+      transform: rotate(225deg);
+      height: 1.1em;
+      width: 1.1em;
+      top: -.6em;
+      right: .6em;
+    }
+  }
+
+  li.has-icon .user-ball {
+    font-size: 1em;
+    height: 1.5em;
+    width: 1.5em;
+    margin-right: .2em;
+  }
+}
+
+#layout:not(.minimal-layout) {
+  #mobile-config-menu,
+  #mobile-searchbar {
+    display: none;
+  }
+}
+
+#layout.mobile-config-flyout-open #mobile-config-menu {
+  button ~ .state-badge {
+    display: none;
+  }
+
+  .nav-level-1 {
+    display: block;
+  }
+
+  button {
+    background: rgba(0, 0, 0, 0.25);
+  }
+}
diff --git a/public/css/icinga/mobilemenu.less b/public/css/icinga/mobilemenu.less
new file mode 100644
index 0000000000..b1f7dce92e
--- /dev/null
+++ b/public/css/icinga/mobilemenu.less
@@ -0,0 +1,98 @@
+#mobile-menu {
+  border-top: 1px solid @gray-lighter;
+  background: @body-bg-color;
+  padding-bottom: env(safe-area-inset-bottom);
+
+  .nav-level-1 {
+    display: flex;
+    align-items: stretch;
+
+    > li {
+      flex: 1 1 auto;
+      width: 0;
+      text-align: center;
+
+      &.active > a,
+      &.active > button {
+        background: @menu-highlight-color;
+        color: @text-color-inverted;
+      }
+
+      &:not(.active) a:hover {
+        background: @menu-hover-bg-color;
+      }
+
+      > a,
+      > button {
+        font-size: .5em;
+        height: 100%;
+        padding: .25em;
+
+        // Reset font-size for child elements
+        > * {
+          font-size: 1/.5em;
+        }
+
+        > i {
+          display: block;
+          font-size: 2.5em;
+          opacity: .8;
+          line-height: 1.25;
+
+          &:before {
+            margin-right: 0;
+          }
+        }
+      }
+    }
+  }
+
+  .nav-level-2 {
+    >li {
+      &.selected {
+        background: @menu-2ndlvl-active-bg-color;
+        color: @menu-2ndlvl-active-color;
+      }
+    }
+  }
+
+  .flyout {
+    position: fixed;
+    bottom: ~"calc(env(safe-area-inset-bottom) + 3.5em)";
+    left: 1em;
+    right: 1em;
+    font-size: 12em/16;
+
+    &:before {
+      right: 10%;
+      margin-right: -1.25em;
+    }
+  }
+
+  button {
+    .appearance(none);
+    background: none;
+    border: none;
+    width: 100%;
+  }
+}
+
+#layout.more-menu-open {
+  #mobile-menu .flyout {
+    display: block;
+  }
+
+  #toggle-more {
+    background: @menu-hover-bg-color;
+    color: @menu-active-color;
+  }
+}
+
+// Show #mobile-menu only on mobile
+#layout:not(.minimal-layout) #mobile-menu {
+  display: none;
+}
+
+.nav a:hover {
+  text-decoration: none;
+}
diff --git a/public/css/icinga/responsive.less b/public/css/icinga/responsive.less
index 6d1cae856f..b66e78e817 100644
--- a/public/css/icinga/responsive.less
+++ b/public/css/icinga/responsive.less
@@ -37,6 +37,14 @@
   html {
     font-family: 'minimal-layout';
   }
+
+  body {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
 }
 
 #layout.compact-layout {
@@ -70,7 +78,6 @@
 #layout.minimal-layout {
   #sidebar {
     width: 100%;
-    overflow: auto;
   }
 
   #header-logo-container {
@@ -151,11 +158,11 @@
 // Safe areas for iPhone X
 
 #header, #sidebar, #footer {
-  padding-left: constant(safe-area-inset-left);
+  padding-left: env(safe-area-inset-left);
 }
 
 #main, #footer {
-  padding-right: constant(safe-area-inset-right);
+  padding-right: env(safe-area-inset-right);
 }
 
 #layout.twocols #col2 {
diff --git a/public/img/manifest.json b/public/img/manifest.json
new file mode 100644
index 0000000000..a24225131a
--- /dev/null
+++ b/public/img/manifest.json
@@ -0,0 +1,5 @@
+{
+    "name": "Icinga",
+    "scope": "/",
+    "display": "standalone"
+}
diff --git a/public/js/icinga/behavior/flyout-menu.js b/public/js/icinga/behavior/flyout-menu.js
new file mode 100644
index 0000000000..31a79b4805
--- /dev/null
+++ b/public/js/icinga/behavior/flyout-menu.js
@@ -0,0 +1,139 @@
+/* Icinga Web 2 | (c) 2022 Icinga GmbH | GPLv2+ */
+
+(function(Icinga) {
+
+    "use strict";
+
+    class FlyoutMenu extends Icinga.EventListener {
+        constructor(icinga) {
+            super(icinga);
+
+            this.on('rendered', this.onRendered, this);
+
+            this.on('click', '.flyout + button, [data-flyout-target]', this.onControlClick, this);
+
+            this.on('click', '.flyout .flyout-menu a, .flyout .flyout-menu button[type=submit]', this.onMenuItemClick, this);
+
+            // For Desktop
+            this.on('mouseenter', '#menu .config-menu [data-flyout-target]', this.onMouseEnter, this);
+            this.on('mouseleave', '#menu .config-menu [data-flyout-target]', this.onMouseLeave, this);
+
+            this.on('keydown', '#menu .config-menu .config-nav-item', this.onKeyDown, this);
+        }
+
+        onMouseEnter(e) {
+            let _this = e.data.self,
+                flyout;
+            var target = e.target.closest('[data-flyout-target]') || e.target.closest('button') || e.target;
+
+            if (target.dataset !== undefined && target.dataset.flyoutTarget !== undefined && target.dataset.flyoutTarget !== '') {
+                flyout = document.getElementById(target.dataset.flyoutTarget);
+            } else {
+                flyout = target.previousElementSibling;
+            }
+
+            _this.open(flyout);
+        }
+
+        onMouseLeave(e) {
+            let _this = e.data.self,
+                flyout;
+            var target = e.target.closest('[data-flyout-target]') || e.target.closest('button') || e.target;
+
+            if (target.dataset !== undefined && target.dataset.flyoutTarget !== undefined && target.dataset.flyoutTarget !== '') {
+                flyout = document.getElementById(target.dataset.flyoutTarget);
+            } else {
+                flyout = target.previousElementSibling;
+            }
+
+            _this.close(flyout);
+        }
+
+        onRendered(e) {
+            let layout = document.getElementById('layout');
+
+            if (layout.dataset !== undefined && layout.dataset.flyoutsOpen !== undefined && layout.dataset.flyoutsOpen !== '') {
+                let openFlyouts = document.querySelectorAll(layout.dataset.flyoutsOpen);
+
+                openFlyouts.forEach(function(el) {
+                    el.classList.add('flyout-open');
+                });
+            }
+        }
+
+        onControlClick(e) {
+            let _this = e.data.self,
+                flyout;
+            var target = e.target.closest('[data-flyout-target]') || e.target.closest('button') || e.target;
+
+            if (target.dataset !== undefined && target.dataset.flyoutTarget !== undefined && target.dataset.flyoutTarget !== '') {
+                flyout = document.getElementById(target.dataset.flyoutTarget);
+            } else {
+                flyout = target.previousElementSibling;
+            }
+
+            if (flyout.classList.contains('flyout-open')) {
+                _this.close(flyout);
+            } else {
+                _this.open(flyout);
+            }
+        }
+
+        onMenuItemClick = (e) => {
+            if (e.target.matches('a')) {
+                e.preventDefault();
+            }
+            let flyout = e.target.closest('.flyout');
+
+            this.close(flyout);
+        }
+
+        close(flyout) {
+            let layout = document.getElementById('layout');
+
+            flyout.classList.remove('flyout-open');
+
+            if (layout.dataset !== undefined && layout.dataset.flyoutsOpen !== undefined) {
+                let openFlyoutsSelectors = layout.dataset.flyoutsOpen.split(',');
+                openFlyoutsSelectors.splice(openFlyoutsSelectors.indexOf(flyout.id));
+
+                layout.dataset.flyoutsOpen = openFlyoutsSelectors.join(',');
+            }
+        }
+
+        open = (flyout) => {
+            let layout = document.getElementById('layout');
+            var _this = this;
+
+            document.querySelectorAll('.flyout-open').forEach((el) => {
+                _this.close(el);
+            });
+
+            flyout.classList.add('flyout-open');
+
+            if (layout.dataset.flyoutsOpen === undefined || layout.dataset.flyoutsOpen === '') {
+                layout.dataset.flyoutsOpen = '#' + flyout.id;
+            } else {
+                if (layout.dataset.flyoutsOpen.split(',').indexOf(flyout.id) !== -1) {
+                    layout.dataset.flyoutsOpen += ',#' + flyout.id;
+                }
+            }
+        }
+
+        /**
+         * Hide, config flyout when "Enter" key is pressed to follow `.flyout` nav item link
+         *
+         * @param {Object} e Event
+         */
+        onKeyDown = function(e) {
+            var _this = e.data.self;
+
+            if (e.key == 'Enter' && $(document.activeElement).is('.flyout a')) {
+                _this.hideConfigFlyout(e);
+            }
+        }
+    }
+
+    Icinga.Behaviors.FlyoutMenu = FlyoutMenu;
+
+})(Icinga);
diff --git a/public/js/icinga/behavior/navigation.js b/public/js/icinga/behavior/navigation.js
index 3befe4bd34..40a35e9d56 100644
--- a/public/js/icinga/behavior/navigation.js
+++ b/public/js/icinga/behavior/navigation.js
@@ -8,18 +8,15 @@
 
     var Navigation = function (icinga) {
         Icinga.EventListener.call(this, icinga);
-        this.on('click', '#menu a', this.linkClicked, this);
-        this.on('click', '#menu tr[href]', this.linkClicked, this);
-        this.on('rendered', '#menu', this.onRendered, this);
-        this.on('mouseenter', '#menu .primary-nav .nav-level-1 > .nav-item', this.showFlyoutMenu, this);
-        this.on('mouseleave', '#menu .primary-nav', this.hideFlyoutMenu, this);
-        this.on('click', '#toggle-sidebar', this.toggleSidebar, this);
+        this.on('click', '#menu a, #mobile-menu a, #mobile-config-menu a', this.linkClicked, this);
+        this.on('click', '#menu tr[href], #mobile-menu tr[href]', this.linkClicked, this);
+
+        this.on('rendered', '#menu, #mobile-menu', this.onRendered, this);
 
-        this.on('click', '#menu .config-nav-item button', this.toggleConfigFlyout, this);
-        this.on('mouseenter', '#menu .config-menu .config-nav-item', this.showConfigFlyout, this);
-        this.on('mouseleave', '#menu .config-menu .config-nav-item', this.hideConfigFlyout, this);
+        this.on('mouseenter', '#menu .primary-nav .nav-level-1 > .nav-item, #mobile-menu .primary-nav .nav-level-1 > .nav-item', this.showFlyoutMenu, this);
+        this.on('mouseleave', '#menu .primary-nav, #mobile-menu .primary-nav', this.hideFlyoutMenu, this);
 
-        this.on('keydown', '#menu .config-menu .config-nav-item', this.onKeyDown, this);
+        this.on('click', '#toggle-sidebar', this.toggleSidebar, this);
 
         /**
          * The DOM-Path of the active item
@@ -62,7 +59,7 @@
     Navigation.prototype.onRendered = function(e) {
         var _this = e.data.self;
 
-        _this.$menu = $(e.target);
+        _this.$menu = $('#menu, #mobile-menu, #mobile-config-menu');
 
         if (! _this.active) {
             // There is no stored menu item, therefore it is assumed that this is the first rendering
@@ -129,7 +126,7 @@
         }
 
         // update target url of the menu container to the clicked link
-        var $menu = $('#menu');
+        var $menu = $('#menu, #mobile-menu, #mobile-config-menu');
         var menuDataUrl = icinga.utils.parseUrl($menu.data('icinga-url'));
         menuDataUrl = icinga.utils.addUrlParams(menuDataUrl.path, { url: href });
         $menu.data('icinga-url', menuDataUrl);
@@ -143,7 +140,7 @@
      * @param url   {String}    The url to match
      */
     Navigation.prototype.setActiveAndSelectedByUrl = function(url) {
-        var $menu = $('#menu');
+        var $menu = $('#menu, #mobile-menu, #mobile-config-menu');
 
         if (! $menu.length) {
             return;
@@ -373,55 +370,6 @@
         $(window).trigger('resize');
     };
 
-    /**
-     * Toggle config flyout visibility
-     *
-     * @param {Object} e Event
-     */
-    Navigation.prototype.toggleConfigFlyout = function(e) {
-        var _this = e.data.self;
-        if ($('#layout').is('.config-flyout-open')) {
-            _this.hideConfigFlyout(e);
-        } else {
-            _this.showConfigFlyout(e);
-        }
-    }
-
-    /**
-     * Hide config flyout
-     *
-     * @param {Object} e Event
-     */
-    Navigation.prototype.hideConfigFlyout = function(e) {
-        $('#layout').removeClass('config-flyout-open');
-        if (e.target) {
-            delete $(e.target).closest('.container')[0].dataset.suspendAutorefresh;
-        }
-    }
-
-    /**
-     * Show config flyout
-     *
-     * @param {Object} e Event
-     */
-    Navigation.prototype.showConfigFlyout = function(e) {
-        $('#layout').addClass('config-flyout-open');
-        $(e.target).closest('.container')[0].dataset.suspendAutorefresh = '';
-    }
-
-    /**
-     * Hide, config flyout when "Enter" key is pressed to follow `.flyout` nav item link
-     *
-     * @param {Object} e Event
-     */
-    Navigation.prototype.onKeyDown = function(e) {
-        var _this = e.data.self;
-
-        if (e.key == 'Enter' && $(document.activeElement).is('.flyout a')) {
-            _this.hideConfigFlyout(e);
-        }
-    }
-
     /**
      * Called when the history changes
      *