From cc3fdc1fcb053153e95322b9c989216e817313ce Mon Sep 17 00:00:00 2001
From: Derick Montague <derick.montague@ibm.com>
Date: Tue, 27 Oct 2020 08:21:20 -0500
Subject: [PATCH] Update failing unit tests

- Add babel plugin to handle Jest import of SVG. Without plugin the
test fails with a require.context() is undefined
- Update snapshot tests that have changed
- Removed globals from .eslintrc.js that were needed prior to
migrating from Mocha and Chai to Jest

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Ibd01d2e629b5ecb47d072e277e4e9b5ae5c5f001
---
 .eslintrc.js                                  |    4 -
 babel.config.js                               |    5 +
 package-lock.json                             |    9 +
 package.json                                  |    1 +
 tests/unit/AppHeader.spec.js                  |    1 +
 .../unit/__snapshots__/AppHeader.spec.js.snap |   57 +-
 .../__snapshots__/AppNavigation.spec.js.snap  | 1000 +++++++++--------
 7 files changed, 597 insertions(+), 480 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index fe716f06c2..502e87a0cc 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -19,10 +19,6 @@ module.exports = {
   parserOptions: {
     parser: 'babel-eslint',
   },
-  globals: {
-    expect: true,
-    sinon: true,
-  },
   overrides: [
     {
       files: [
diff --git a/babel.config.js b/babel.config.js
index b8daaabcf8..073c338396 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,3 +1,8 @@
 module.exports = {
   presets: [['@vue/cli-plugin-babel/preset', { useBuiltIns: 'entry' }]],
+  env: {
+    test: {
+      plugins: ['transform-require-context'],
+    },
+  },
 };
diff --git a/package-lock.json b/package-lock.json
index c0a5a1d00a..696938133f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3682,6 +3682,15 @@
         "babel-types": "^6.26.0"
       }
     },
+    "babel-plugin-transform-require-context": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-require-context/-/babel-plugin-transform-require-context-0.1.1.tgz",
+      "integrity": "sha512-4ceqYOtzgmq4/QsB8dP7pUrUOCjY/jrRYdt7YkIOWHxtGDQbcf6YZDyLCiPQf6KsEIcIbSQiTRXOsbLiuJfgNQ==",
+      "dev": true,
+      "requires": {
+        "@babel/template": "7"
+      }
+    },
     "babel-plugin-transform-strict-mode": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.24.1.tgz",
diff --git a/package.json b/package.json
index 0f4c00ded2..f9dd1cc3ae 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "@vue/eslint-config-prettier": "5.0.0",
     "@vue/test-utils": "1.1.0",
     "babel-eslint": "10.1.0",
+    "babel-plugin-transform-require-context": "0.1.1",
     "check-node-version": "4.0.3",
     "compression-webpack-plugin": "6.0.3",
     "eslint": "7.11.0",
diff --git a/tests/unit/AppHeader.spec.js b/tests/unit/AppHeader.spec.js
index f9a653955e..6d359c88a4 100644
--- a/tests/unit/AppHeader.spec.js
+++ b/tests/unit/AppHeader.spec.js
@@ -12,6 +12,7 @@ describe('AppHeader.vue', () => {
   const actions = {
     'global/getHostStatus': jest.fn(),
     'eventLog/getEventLogData': jest.fn(),
+    'authentication/resetStoreState': jest.fn(),
   };
 
   const store = new Vuex.Store({ actions });
diff --git a/tests/unit/__snapshots__/AppHeader.spec.js.snap b/tests/unit/__snapshots__/AppHeader.spec.js.snap
index 712353b0c8..8300ac1900 100644
--- a/tests/unit/__snapshots__/AppHeader.spec.js.snap
+++ b/tests/unit/__snapshots__/AppHeader.spec.js.snap
@@ -23,30 +23,33 @@ exports[`AppHeader.vue should render correctly 1`] = `
         aria-hidden="true"
         class="nav-trigger"
         id="app-header-trigger"
-        title="Open navigation"
         type="button"
         variant="link"
       >
         <!---->
          
         <svg
-          aria-hidden="true"
+          fill="currentColor"
           focusable="false"
           height="20"
           preserveAspectRatio="xMidYMid meet"
-          style="will-change: transform;"
+          role="img"
+          title="appHeader.titleShowNavigation"
           viewBox="0 0 20 20"
           width="20"
           xmlns="http://www.w3.org/2000/svg"
         >
+          <title>
+            appHeader.titleShowNavigation
+          </title>
           <path
-            d="M2 14.8h16V16H2zm0-3.6h16v1.2H2zm0-3.6h16v1.2H2zM2 4h16v1.2H2z"
+            d="M2 14.8H18V16H2zM2 11.2H18V12.399999999999999H2zM2 7.6H18V8.799999999999999H2zM2 4H18V5.2H2z"
           />
         </svg>
       </b-button>
        
       <b-navbar-nav>
-        <b-nav-item
+        <b-navbar-brand
           data-test-id="appHeader-container-overview"
           to="/"
         >
@@ -55,7 +58,7 @@ exports[`AppHeader.vue should render correctly 1`] = `
             class="header-logo"
             src="@/assets/images/logo-header.svg"
           />
-        </b-nav-item>
+        </b-navbar-brand>
       </b-navbar-nav>
        
       <b-navbar-nav
@@ -70,19 +73,19 @@ exports[`AppHeader.vue should render correctly 1`] = `
           >
             <svg
               aria-hidden="true"
+              fill="currentColor"
               focusable="false"
               height="20"
               preserveAspectRatio="xMidYMid meet"
-              style="will-change: transform;"
               viewBox="0 0 20 20"
               width="20"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M10 1c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm3.5 13.5l-8-8 1-1 8 8-1 1z"
+                d="M10,1c-5,0-9,4-9,9s4,9,9,9s9-4,9-9S15,1,10,1z M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z"
               />
               <path
-                d="M13.5 14.5l-8-8 1-1 8 8-1 1z"
+                d="M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z"
                 data-icon-path="inner-path"
                 opacity="0"
               />
@@ -102,19 +105,19 @@ exports[`AppHeader.vue should render correctly 1`] = `
           >
             <svg
               aria-hidden="true"
+              fill="currentColor"
               focusable="false"
               height="20"
               preserveAspectRatio="xMidYMid meet"
-              style="will-change: transform;"
               viewBox="0 0 20 20"
               width="20"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M10 1c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm3.5 13.5l-8-8 1-1 8 8-1 1z"
+                d="M10,1c-5,0-9,4-9,9s4,9,9,9s9-4,9-9S15,1,10,1z M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z"
               />
               <path
-                d="M13.5 14.5l-8-8 1-1 8 8-1 1z"
+                d="M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z"
                 data-icon-path="inner-path"
                 opacity="0"
               />
@@ -134,17 +137,21 @@ exports[`AppHeader.vue should render correctly 1`] = `
             variant="link"
           >
             <svg
-              aria-hidden="true"
+              fill="currentColor"
               focusable="false"
               height="20"
               preserveAspectRatio="xMidYMid meet"
-              style="will-change: transform;"
+              role="img"
+              title="appHeader.titleRefresh"
               viewBox="0 0 32 32"
               width="20"
               xmlns="http://www.w3.org/2000/svg"
             >
+              <title>
+                appHeader.titleRefresh
+              </title>
               <path
-                d="M12 10H6.78A11 11 0 0 1 27 16h2A13 13 0 0 0 6 7.68V4H4v8h8zm8 12h5.22A11 11 0 0 1 5 16H3a13 13 0 0 0 23 8.32V28h2v-8h-8z"
+                d="M12 10H6.78A11 11 0 0127 16h2A13 13 0 006 7.68V4H4v8h8zM20 22h5.22A11 11 0 015 16H3a13 13 0 0023 8.32V28h2V20H20z"
               />
             </svg>
              
@@ -187,15 +194,17 @@ exports[`AppHeader.vue should render correctly 1`] = `
     </b-navbar>
   </header>
    
-  <b-progress
-    height="0.4rem"
+  <transition-stub
+    name="fade"
   >
-    <b-progress-bar
-      animated=""
-      aria-label="global.ariaLabel.progressBar"
-      striped=""
-      value="0"
-    />
-  </b-progress>
+    <b-progress>
+      <b-progress-bar
+        animated=""
+        aria-label="global.ariaLabel.progressBar"
+        striped=""
+        value="0"
+      />
+    </b-progress>
+  </transition-stub>
 </div>
 `;
diff --git a/tests/unit/__snapshots__/AppNavigation.spec.js.snap b/tests/unit/__snapshots__/AppNavigation.spec.js.snap
index 3073a09b12..f8984f8b52 100644
--- a/tests/unit/__snapshots__/AppNavigation.spec.js.snap
+++ b/tests/unit/__snapshots__/AppNavigation.spec.js.snap
@@ -22,19 +22,19 @@ exports[`AppNavigation.vue should render correctly 1`] = `
           >
             <svg
               aria-hidden="true"
+              fill="currentColor"
               focusable="false"
               height="16"
               preserveAspectRatio="xMidYMid meet"
-              style="will-change: transform;"
               viewBox="0 0 32 32"
               width="16"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M4 2H2v26a2 2 0 0 0 2 2h26v-2H4z"
+                d="M4,2H2V28a2,2,0,0,0,2,2H30V28H4Z"
               />
               <path
-                d="M30 9h-7v2h3.59L19 18.59l-4.29-4.3a1 1 0 0 0-1.42 0L6 21.59 7.41 23 14 16.41l4.29 4.3a1 1 0 0 0 1.42 0l8.29-8.3V16h2z"
+                d="M30,9H23v2h3.59L19,18.59l-4.29-4.3a1,1,0,0,0-1.42,0L6,21.59,7.41,23,14,16.41l4.29,4.3a1,1,0,0,0,1.42,0L28,12.41V16h2Z"
               />
             </svg>
             
@@ -54,16 +54,16 @@ exports[`AppNavigation.vue should render correctly 1`] = `
           >
             <svg
               aria-hidden="true"
+              fill="currentColor"
               focusable="false"
               height="16"
               preserveAspectRatio="xMidYMid meet"
-              style="will-change: transform;"
               viewBox="0 0 32 32"
               width="16"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M23 27.18l-2.59-2.59L19 26l4 4 7-7-1.41-1.41L23 27.18z"
+                d="M23 27.18L20.41 24.59 19 26 23 30 30 23 28.59 21.59 23 27.18z"
               />
               <circle
                 cx="11"
@@ -81,7 +81,7 @@ exports[`AppNavigation.vue should render correctly 1`] = `
                 r="1"
               />
               <path
-                d="M24 3H8a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h8v-2H8v-6h18V5a2 2 0 0 0-2-2zm0 16H8v-6h16zm0-8H8V5h16z"
+                d="M24,3H8A2,2,0,0,0,6,5V27a2,2,0,0,0,2,2h8V27H8V21H26V5A2,2,0,0,0,24,3Zm0,16H8V13H24Zm0-8H8V5H24Z"
               />
             </svg>
             
@@ -90,68 +90,79 @@ exports[`AppNavigation.vue should render correctly 1`] = `
             <svg
               aria-hidden="true"
               class="icon-expand"
+              fill="currentColor"
               focusable="false"
               height="16"
               preserveAspectRatio="xMidYMid meet"
-              style="will-change: transform;"
               viewBox="0 0 16 16"
               width="16"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M8 5l5 5-.7.7L8 6.4l-4.3 4.3L3 10z"
+                d="M8 5L13 10 12.3 10.7 8 6.4 3.7 10.7 3 10z"
               />
             </svg>
           </button>
            
-          <ul
-            class="nav-item__nav collapse"
-            id="health"
-            style="display: none;"
+          <transition-stub
+            class="nav-item__nav"
+            css="true"
+            enteractiveclass="collapsing"
+            enterclass=""
+            entertoclass="collapse show"
+            leaveactiveclass="collapsing"
+            leaveclass="collapse show"
+            leavetoclass="collapse"
           >
-            <li
-              class="nav-item"
-              data-test-id="nav-item-event-logs"
+            <ul
+              class="collapse"
+              id="health"
+              style="display: none;"
             >
-              <a
-                class="nav-link"
-                href="/health/event-logs"
-                target="_self"
+              <li
+                class="nav-item"
+                data-test-id="nav-item-event-logs"
               >
-                
+                <a
+                  class="nav-link"
+                  href="/health/event-logs"
+                  target="_self"
+                >
+                  
                 appNavigation.eventLogs
               
-              </a>
-            </li>
-            <li
-              class="nav-item"
-              data-test-id="nav-item-hardware-status"
-            >
-              <a
-                class="nav-link"
-                href="/health/hardware-status"
-                target="_self"
+                </a>
+              </li>
+              <li
+                class="nav-item"
+                data-test-id="nav-item-hardware-status"
               >
-                
+                <a
+                  class="nav-link"
+                  href="/health/hardware-status"
+                  target="_self"
+                >
+                  
                 appNavigation.hardwareStatus
               
-              </a>
-            </li>
-            <li
-              class="nav-item"
-              data-test-id="nav-item-sensors"
-            >
-              <a
-                class="nav-link"
-                href="/health/sensors"
-                target="_self"
+                </a>
+              </li>
+              <li
+                class="nav-item"
+                data-test-id="nav-item-sensors"
               >
-                
+                <a
+                  class="nav-link"
+                  href="/health/sensors"
+                  target="_self"
+                >
+                  
                 appNavigation.sensors
               
-              </a>
-            </li>
-          </ul>
+                </a>
+              </li>
+            </ul>
+          </transition-stub>
         </li>
         <li
           class="nav-item"
@@ -165,16 +176,16 @@ exports[`AppNavigation.vue should render correctly 1`] = `
           >
             <svg
               aria-hidden="true"
+              fill="currentColor"
               focusable="false"
               height="16"
               preserveAspectRatio="xMidYMid meet"
-              style="will-change: transform;"
               viewBox="0 0 32 32"
               width="16"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M30 7h-5.1a5 5 0 0 0-9.8 0H2v2h13.1a5 5 0 0 0 9.8 0H30zm-10 4a3 3 0 1 1 3-3 3 3 0 0 1-3 3zM2 25h5.1a5 5 0 0 0 9.8 0H30v-2H16.9a5 5 0 0 0-9.8 0H2zm7-1a3 3 0 1 1 3 3 3 3 0 0 1-3-3z"
+                d="M30 8h-4.1c-.5-2.3-2.5-4-4.9-4s-4.4 1.7-4.9 4H2v2h14.1c.5 2.3 2.5 4 4.9 4s4.4-1.7 4.9-4H30V8zM21 12c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3S22.7 12 21 12zM2 24h4.1c.5 2.3 2.5 4 4.9 4s4.4-1.7 4.9-4H30v-2H15.9c-.5-2.3-2.5-4-4.9-4s-4.4 1.7-4.9 4H2V24zM11 20c1.7 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3S9.3 20 11 20z"
               />
             </svg>
             
@@ -183,124 +194,135 @@ exports[`AppNavigation.vue should render correctly 1`] = `
             <svg
               aria-hidden="true"
               class="icon-expand"
+              fill="currentColor"
               focusable="false"
               height="16"
               preserveAspectRatio="xMidYMid meet"
-              style="will-change: transform;"
               viewBox="0 0 16 16"
               width="16"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M8 5l5 5-.7.7L8 6.4l-4.3 4.3L3 10z"
+                d="M8 5L13 10 12.3 10.7 8 6.4 3.7 10.7 3 10z"
               />
             </svg>
           </button>
            
-          <ul
-            class="nav-item__nav collapse"
-            id="control"
-            style="display: none;"
+          <transition-stub
+            class="nav-item__nav"
+            css="true"
+            enteractiveclass="collapsing"
+            enterclass=""
+            entertoclass="collapse show"
+            leaveactiveclass="collapsing"
+            leaveclass="collapse show"
+            leavetoclass="collapse"
           >
-            <li
-              class="nav-item"
-              data-test-id="nav-item-kvm"
+            <ul
+              class="collapse"
+              id="control"
+              style="display: none;"
             >
-              <a
-                class="nav-link"
-                href="/control/kvm"
-                target="_self"
+              <li
+                class="nav-item"
+                data-test-id="nav-item-kvm"
               >
-                
+                <a
+                  class="nav-link"
+                  href="/control/kvm"
+                  target="_self"
+                >
+                  
                 appNavigation.kvm
               
-              </a>
-            </li>
-            <li
-              class="nav-item"
-              data-test-id="nav-item-manage-power-usage"
-            >
-              <a
-                class="nav-link"
-                href="/control/manage-power-usage"
-                target="_self"
+                </a>
+              </li>
+              <li
+                class="nav-item"
+                data-test-id="nav-item-manage-power-usage"
               >
-                
+                <a
+                  class="nav-link"
+                  href="/control/manage-power-usage"
+                  target="_self"
+                >
+                  
                 appNavigation.managePowerUsage
               
-              </a>
-            </li>
-            <li
-              class="nav-item"
-              data-test-id="nav-item-reboot-bmc"
-            >
-              <a
-                class="nav-link"
-                href="/control/reboot-bmc"
-                target="_self"
+                </a>
+              </li>
+              <li
+                class="nav-item"
+                data-test-id="nav-item-reboot-bmc"
               >
-                
+                <a
+                  class="nav-link"
+                  href="/control/reboot-bmc"
+                  target="_self"
+                >
+                  
                 appNavigation.rebootBmc
               
-              </a>
-            </li>
-            <li
-              class="nav-item"
-              data-test-id="nav-item-serial-over-lan"
-            >
-              <a
-                class="nav-link"
-                href="/control/serial-over-lan"
-                target="_self"
+                </a>
+              </li>
+              <li
+                class="nav-item"
+                data-test-id="nav-item-serial-over-lan"
               >
-                
+                <a
+                  class="nav-link"
+                  href="/control/serial-over-lan"
+                  target="_self"
+                >
+                  
                 appNavigation.serialOverLan
               
-              </a>
-            </li>
-            <li
-              class="nav-item"
-              data-test-id="nav-item-server-led"
-            >
-              <a
-                class="nav-link"
-                href="/control/server-led"
-                target="_self"
+                </a>
+              </li>
+              <li
+                class="nav-item"
+                data-test-id="nav-item-server-led"
               >
-                
+                <a
+                  class="nav-link"
+                  href="/control/server-led"
+                  target="_self"
+                >
+                  
                 appNavigation.serverLed
               
-              </a>
-            </li>
-            <li
-              class="nav-item"
-              data-test-id="nav-item-server-power-operations"
-            >
-              <a
-                class="nav-link"
-                href="/control/server-power-operations"
-                target="_self"
+                </a>
+              </li>
+              <li
+                class="nav-item"
+                data-test-id="nav-item-server-power-operations"
               >
-                
+                <a
+                  class="nav-link"
+                  href="/control/server-power-operations"
+                  target="_self"
+                >
+                  
                 appNavigation.serverPowerOperations
               
-              </a>
-            </li>
-            <li
-              class="nav-item"
-              data-test-id="nav-item-virtual-media"
-            >
-              <a
-                class="nav-link"
-                href="/control/virtual-media"
-                target="_self"
+                </a>
+              </li>
+              <li
+                class="nav-item"
+                data-test-id="nav-item-virtual-media"
               >
-                
+                <a
+                  class="nav-link"
+                  href="/control/virtual-media"
+                  target="_self"
+                >
+                  
                 appNavigation.virtualMedia
               
-              </a>
-            </li>
-          </ul>
+                </a>
+              </li>
+            </ul>
+          </transition-stub>
         </li>
         <li
           class="nav-item"
@@ -314,19 +336,19 @@ exports[`AppNavigation.vue should render correctly 1`] = `
           >
             <svg
               aria-hidden="true"
+              fill="currentColor"
               focusable="false"
               height="16"
               preserveAspectRatio="xMidYMid meet"
-              style="will-change: transform;"
               viewBox="0 0 16 16"
               width="16"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M13.5 8.4v-.8l1-.8c.4-.3.4-.9.2-1.3l-1.2-2c-.2-.3-.5-.5-.9-.5-.1 0-.2 0-.3.1l-1.2.4c-.2-.1-.4-.3-.7-.4l-.3-1.3c0-.5-.4-.8-.9-.8H6.8c-.5 0-.9.3-1 .8l-.2 1.3c-.3.1-.5.2-.7.3L3.7 3h-.3c-.4 0-.7.2-.9.5l-1.2 2c-.2.4-.1.9.3 1.3l.9.9v.8l-.9.7c-.4.3-.5.9-.2 1.3l1.2 2c.1.3.4.5.8.5.1 0 .2 0 .3-.1l1.2-.4c.2.1.4.3.7.4l.3 1.3c.1.5.5.8 1 .8h2.4c.5 0 .9-.3 1-.8l.3-1.3c.2-.1.4-.2.7-.4l1.2.4c.1 0 .2.1.3.1.4 0 .7-.2.9-.5l1.1-2c.2-.4.2-.9-.2-1.3l-1.1-.8zm-.9 3.6l-1.7-.6c-.4.3-.9.6-1.4.8L9.2 14H6.8l-.4-1.8c-.5-.2-.9-.5-1.4-.8l-1.6.6-1.2-2 1.4-1.2c-.1-.5-.1-1.1 0-1.6L2.2 6l1.2-2 1.7.6c.4-.4.9-.6 1.4-.8L6.8 2h2.4l.4 1.8c.5.2.9.5 1.4.8l1.6-.6 1.2 2-1.4 1.2c.1.5.1 1.1 0 1.6l1.4 1.2-1.2 2z"
+                d="M13.5,8.4c0-0.1,0-0.3,0-0.4c0-0.1,0-0.3,0-0.4l1-0.8c0.4-0.3,0.4-0.9,0.2-1.3l-1.2-2C13.3,3.2,13,3,12.6,3	c-0.1,0-0.2,0-0.3,0.1l-1.2,0.4c-0.2-0.1-0.4-0.3-0.7-0.4l-0.3-1.3C10.1,1.3,9.7,1,9.2,1H6.8c-0.5,0-0.9,0.3-1,0.8L5.6,3.1	C5.3,3.2,5.1,3.3,4.9,3.4L3.7,3C3.6,3,3.5,3,3.4,3C3,3,2.7,3.2,2.5,3.5l-1.2,2C1.1,5.9,1.2,6.4,1.6,6.8l0.9,0.9c0,0.1,0,0.3,0,0.4	c0,0.1,0,0.3,0,0.4L1.6,9.2c-0.4,0.3-0.5,0.9-0.2,1.3l1.2,2C2.7,12.8,3,13,3.4,13c0.1,0,0.2,0,0.3-0.1l1.2-0.4	c0.2,0.1,0.4,0.3,0.7,0.4l0.3,1.3c0.1,0.5,0.5,0.8,1,0.8h2.4c0.5,0,0.9-0.3,1-0.8l0.3-1.3c0.2-0.1,0.4-0.2,0.7-0.4l1.2,0.4	c0.1,0,0.2,0.1,0.3,0.1c0.4,0,0.7-0.2,0.9-0.5l1.1-2c0.2-0.4,0.2-0.9-0.2-1.3L13.5,8.4z M12.6,12l-1.7-0.6c-0.4,0.3-0.9,0.6-1.4,0.8	L9.2,14H6.8l-0.4-1.8c-0.5-0.2-0.9-0.5-1.4-0.8L3.4,12l-1.2-2l1.4-1.2c-0.1-0.5-0.1-1.1,0-1.6L2.2,6l1.2-2l1.7,0.6	C5.5,4.2,6,4,6.5,3.8L6.8,2h2.4l0.4,1.8c0.5,0.2,0.9,0.5,1.4,0.8L12.6,4l1.2,2l-1.4,1.2c0.1,0.5,0.1,1.1,0,1.6l1.4,1.2L12.6,12z"
               />
               <path
-                d="M8 11c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3c0 1.6-1.3 3-3 3zm0-5c-1.1 0-2 .8-2 1.9V8c0 1.1.8 2 1.9 2H8c1.1 0 2-.8 2-1.9V8c0-1.1-.8-2-2-2 .1 0 0 0 0 0z"
+                d="M8,11c-1.7,0-3-1.3-3-3s1.3-3,3-3s3,1.3,3,3C11,9.6,9.7,11,8,11C8,11,8,11,8,11z M8,6C6.9,6,6,6.8,6,7.9C6,7.9,6,8,6,8	c0,1.1,0.8,2,1.9,2c0,0,0.1,0,0.1,0c1.1,0,2-0.8,2-1.9c0,0,0-0.1,0-0.1C10,6.9,9.2,6,8,6C8.1,6,8,6,8,6z"
               />
             </svg>
             
@@ -335,82 +357,93 @@ exports[`AppNavigation.vue should render correctly 1`] = `
             <svg
               aria-hidden="true"
               class="icon-expand"
+              fill="currentColor"
               focusable="false"
               height="16"
               preserveAspectRatio="xMidYMid meet"
-              style="will-change: transform;"
               viewBox="0 0 16 16"
               width="16"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M8 5l5 5-.7.7L8 6.4l-4.3 4.3L3 10z"
+                d="M8 5L13 10 12.3 10.7 8 6.4 3.7 10.7 3 10z"
               />
             </svg>
           </button>
            
-          <ul
-            class="nav-item__nav collapse"
-            id="configuration"
-            style="display: none;"
+          <transition-stub
+            class="nav-item__nav"
+            css="true"
+            enteractiveclass="collapsing"
+            enterclass=""
+            entertoclass="collapse show"
+            leaveactiveclass="collapsing"
+            leaveclass="collapse show"
+            leavetoclass="collapse"
           >
-            <li
-              class="nav-item"
-              data-test-id="nav-item-date-time-settings"
+            <ul
+              class="collapse"
+              id="configuration"
+              style="display: none;"
             >
-              <a
-                class="nav-link"
-                href="/configuration/date-time-settings"
-                target="_self"
+              <li
+                class="nav-item"
+                data-test-id="nav-item-date-time-settings"
               >
-                
+                <a
+                  class="nav-link"
+                  href="/configuration/date-time-settings"
+                  target="_self"
+                >
+                  
                 appNavigation.dateTimeSettings
               
-              </a>
-            </li>
-            <li
-              class="nav-item"
-              data-test-id="nav-item-firmware"
-            >
-              <a
-                class="nav-link"
-                href="/configuration/firmware"
-                target="_self"
+                </a>
+              </li>
+              <li
+                class="nav-item"
+                data-test-id="nav-item-firmware"
               >
-                
+                <a
+                  class="nav-link"
+                  href="/configuration/firmware"
+                  target="_self"
+                >
+                  
                 appNavigation.firmware
               
-              </a>
-            </li>
-            <li
-              class="nav-item"
-              data-test-id="nav-item-network-settings"
-            >
-              <a
-                class="nav-link"
-                href="/configuration/network-settings"
-                target="_self"
+                </a>
+              </li>
+              <li
+                class="nav-item"
+                data-test-id="nav-item-network-settings"
               >
-                
+                <a
+                  class="nav-link"
+                  href="/configuration/network-settings"
+                  target="_self"
+                >
+                  
                 appNavigation.networkSettings
               
-              </a>
-            </li>
-            <li
-              class="nav-item"
-              data-test-id="nav-item-snmp-settings"
-            >
-              <a
-                class="nav-link"
-                href="#"
-                target="_self"
+                </a>
+              </li>
+              <li
+                class="nav-item"
+                data-test-id="nav-item-snmp-settings"
               >
-                
+                <a
+                  class="nav-link"
+                  href="/"
+                  target="_self"
+                >
+                  
                 appNavigation.snmpSettings
               
-              </a>
-            </li>
-          </ul>
+                </a>
+              </li>
+            </ul>
+          </transition-stub>
         </li>
         <li
           class="nav-item"
@@ -424,16 +457,16 @@ exports[`AppNavigation.vue should render correctly 1`] = `
           >
             <svg
               aria-hidden="true"
+              fill="currentColor"
               focusable="false"
               height="16"
               preserveAspectRatio="xMidYMid meet"
-              style="will-change: transform;"
               viewBox="0 0 32 32"
               width="16"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M21 2a9 9 0 0 0-9 9 8.87 8.87 0 0 0 .39 2.61L2 24v6h6l10.39-10.39A9 9 0 0 0 30 11.74a8.77 8.77 0 0 0-1.65-6A9 9 0 0 0 21 2zm0 16a7 7 0 0 1-2-.3l-1.15-.35-.85.85-3.18 3.18L12.41 20 11 21.41l1.38 1.38-1.59 1.59L9.41 23 8 24.41l1.38 1.38L7.17 28H4v-3.17L13.8 15l.85-.85-.29-.95a7.14 7.14 0 0 1 3.4-8.44 7 7 0 0 1 10.24 6 6.69 6.69 0 0 1-1.09 4A7 7 0 0 1 21 18z"
+                d="M21,2a9,9,0,0,0-9,9,8.87,8.87,0,0,0,.39,2.61L2,24v6H8L18.39,19.61A9,9,0,0,0,30,11.74a8.77,8.77,0,0,0-1.65-6A9,9,0,0,0,21,2Zm0,16a7,7,0,0,1-2-.3l-1.15-.35L17,18.2l-3.18,3.18L12.41,20,11,21.41l1.38,1.38-1.59,1.59L9.41,23,8,24.41l1.38,1.38L7.17,28H4V24.83L13.8,15l.85-.85-.29-.95a7.14,7.14,0,0,1,3.4-8.44,7,7,0,0,1,10.24,6,6.69,6.69,0,0,1-1.09,4A7,7,0,0,1,21,18Z"
               />
               <circle
                 cx="22"
@@ -442,79 +475,94 @@ exports[`AppNavigation.vue should render correctly 1`] = `
               />
             </svg>
             
-              appNavigation.configuration
+              appNavigation.accessControl
               
             <svg
               aria-hidden="true"
               class="icon-expand"
+              fill="currentColor"
               focusable="false"
               height="16"
               preserveAspectRatio="xMidYMid meet"
-              style="will-change: transform;"
               viewBox="0 0 16 16"
               width="16"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M8 5l5 5-.7.7L8 6.4l-4.3 4.3L3 10z"
+                d="M8 5L13 10 12.3 10.7 8 6.4 3.7 10.7 3 10z"
               />
             </svg>
           </button>
            
-          <ul
-            class="nav-item__nav collapse"
-            id="access-control"
-            style="display: none;"
+          <transition-stub
+            class="nav-item__nav"
+            css="true"
+            enteractiveclass="collapsing"
+            enterclass=""
+            entertoclass="collapse show"
+            leaveactiveclass="collapsing"
+            leaveclass="collapse show"
+            leavetoclass="collapse"
           >
-            <li
-              class="nav-item"
-              data-test-id="nav-item-ldap"
+            <ul
+              class="collapse"
+              id="access-control"
+              style="display: none;"
             >
-              <a
-                class="nav-link"
-                href="/access-control/ldap"
-                target="_self"
+              <li
+                class="nav-item"
+                data-test-id="nav-item-ldap"
               >
-                
+                <a
+                  class="nav-link"
+                  href="/access-control/ldap"
+                  target="_self"
+                >
+                  
                 appNavigation.ldap
               
-              </a>
-            </li>
-            <li
-              class="nav-item"
-              data-test-id="nav-item-local-user-management"
-            >
-              <a
-                class="nav-link"
-                href="/access-control/local-user-management"
-                target="_self"
+                </a>
+              </li>
+              <li
+                class="nav-item"
+                data-test-id="nav-item-local-user-management"
               >
-                
+                <a
+                  class="nav-link"
+                  href="/access-control/local-user-management"
+                  target="_self"
+                >
+                  
                 appNavigation.localUserManagement
               
-              </a>
-            </li>
-            <li
-              class="nav-item"
-              data-test-id="nav-item-ssl-certificates"
-            >
-              <a
-                class="nav-link"
-                href="/access-control/ssl-certificates"
-                target="_self"
+                </a>
+              </li>
+              <li
+                class="nav-item"
+                data-test-id="nav-item-ssl-certificates"
               >
-                
+                <a
+                  class="nav-link"
+                  href="/access-control/ssl-certificates"
+                  target="_self"
+                >
+                  
                 appNavigation.sslCertificates
               
-              </a>
-            </li>
-          </ul>
+                </a>
+              </li>
+            </ul>
+          </transition-stub>
         </li>
       </ul>
     </nav>
   </div>
    
-  <!---->
+  <transition-stub
+    name="fade"
+  >
+    <!---->
+  </transition-stub>
 </div>
 `;
 
@@ -540,19 +588,19 @@ exports[`AppNavigation.vue should render with nav-container open 1`] = `
           >
             <svg
               aria-hidden="true"
+              fill="currentColor"
               focusable="false"
               height="16"
               preserveAspectRatio="xMidYMid meet"
-              style="will-change: transform;"
               viewBox="0 0 32 32"
               width="16"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M4 2H2v26a2 2 0 0 0 2 2h26v-2H4z"
+                d="M4,2H2V28a2,2,0,0,0,2,2H30V28H4Z"
               />
               <path
-                d="M30 9h-7v2h3.59L19 18.59l-4.29-4.3a1 1 0 0 0-1.42 0L6 21.59 7.41 23 14 16.41l4.29 4.3a1 1 0 0 0 1.42 0l8.29-8.3V16h2z"
+                d="M30,9H23v2h3.59L19,18.59l-4.29-4.3a1,1,0,0,0-1.42,0L6,21.59,7.41,23,14,16.41l4.29,4.3a1,1,0,0,0,1.42,0L28,12.41V16h2Z"
               />
             </svg>
             
@@ -572,16 +620,16 @@ exports[`AppNavigation.vue should render with nav-container open 1`] = `
           >
             <svg
               aria-hidden="true"
+              fill="currentColor"
               focusable="false"
               height="16"
               preserveAspectRatio="xMidYMid meet"
-              style="will-change: transform;"
               viewBox="0 0 32 32"
               width="16"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M23 27.18l-2.59-2.59L19 26l4 4 7-7-1.41-1.41L23 27.18z"
+                d="M23 27.18L20.41 24.59 19 26 23 30 30 23 28.59 21.59 23 27.18z"
               />
               <circle
                 cx="11"
@@ -599,7 +647,7 @@ exports[`AppNavigation.vue should render with nav-container open 1`] = `
                 r="1"
               />
               <path
-                d="M24 3H8a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h8v-2H8v-6h18V5a2 2 0 0 0-2-2zm0 16H8v-6h16zm0-8H8V5h16z"
+                d="M24,3H8A2,2,0,0,0,6,5V27a2,2,0,0,0,2,2h8V27H8V21H26V5A2,2,0,0,0,24,3Zm0,16H8V13H24Zm0-8H8V5H24Z"
               />
             </svg>
             
@@ -608,68 +656,79 @@ exports[`AppNavigation.vue should render with nav-container open 1`] = `
             <svg
               aria-hidden="true"
               class="icon-expand"
+              fill="currentColor"
               focusable="false"
               height="16"
               preserveAspectRatio="xMidYMid meet"
-              style="will-change: transform;"
               viewBox="0 0 16 16"
               width="16"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M8 5l5 5-.7.7L8 6.4l-4.3 4.3L3 10z"
+                d="M8 5L13 10 12.3 10.7 8 6.4 3.7 10.7 3 10z"
               />
             </svg>
           </button>
            
-          <ul
-            class="nav-item__nav collapse"
-            id="health"
-            style="display: none;"
+          <transition-stub
+            class="nav-item__nav"
+            css="true"
+            enteractiveclass="collapsing"
+            enterclass=""
+            entertoclass="collapse show"
+            leaveactiveclass="collapsing"
+            leaveclass="collapse show"
+            leavetoclass="collapse"
           >
-            <li
-              class="nav-item"
-              data-test-id="nav-item-event-logs"
+            <ul
+              class="collapse"
+              id="health"
+              style="display: none;"
             >
-              <a
-                class="nav-link"
-                href="/health/event-logs"
-                target="_self"
+              <li
+                class="nav-item"
+                data-test-id="nav-item-event-logs"
               >
-                
+                <a
+                  class="nav-link"
+                  href="/health/event-logs"
+                  target="_self"
+                >
+                  
                 appNavigation.eventLogs
               
-              </a>
-            </li>
-            <li
-              class="nav-item"
-              data-test-id="nav-item-hardware-status"
-            >
-              <a
-                class="nav-link"
-                href="/health/hardware-status"
-                target="_self"
+                </a>
+              </li>
+              <li
+                class="nav-item"
+                data-test-id="nav-item-hardware-status"
               >
-                
+                <a
+                  class="nav-link"
+                  href="/health/hardware-status"
+                  target="_self"
+                >
+                  
                 appNavigation.hardwareStatus
               
-              </a>
-            </li>
-            <li
-              class="nav-item"
-              data-test-id="nav-item-sensors"
-            >
-              <a
-                class="nav-link"
-                href="/health/sensors"
-                target="_self"
+                </a>
+              </li>
+              <li
+                class="nav-item"
+                data-test-id="nav-item-sensors"
               >
-                
+                <a
+                  class="nav-link"
+                  href="/health/sensors"
+                  target="_self"
+                >
+                  
                 appNavigation.sensors
               
-              </a>
-            </li>
-          </ul>
+                </a>
+              </li>
+            </ul>
+          </transition-stub>
         </li>
         <li
           class="nav-item"
@@ -683,16 +742,16 @@ exports[`AppNavigation.vue should render with nav-container open 1`] = `
           >
             <svg
               aria-hidden="true"
+              fill="currentColor"
               focusable="false"
               height="16"
               preserveAspectRatio="xMidYMid meet"
-              style="will-change: transform;"
               viewBox="0 0 32 32"
               width="16"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M30 7h-5.1a5 5 0 0 0-9.8 0H2v2h13.1a5 5 0 0 0 9.8 0H30zm-10 4a3 3 0 1 1 3-3 3 3 0 0 1-3 3zM2 25h5.1a5 5 0 0 0 9.8 0H30v-2H16.9a5 5 0 0 0-9.8 0H2zm7-1a3 3 0 1 1 3 3 3 3 0 0 1-3-3z"
+                d="M30 8h-4.1c-.5-2.3-2.5-4-4.9-4s-4.4 1.7-4.9 4H2v2h14.1c.5 2.3 2.5 4 4.9 4s4.4-1.7 4.9-4H30V8zM21 12c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3S22.7 12 21 12zM2 24h4.1c.5 2.3 2.5 4 4.9 4s4.4-1.7 4.9-4H30v-2H15.9c-.5-2.3-2.5-4-4.9-4s-4.4 1.7-4.9 4H2V24zM11 20c1.7 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3S9.3 20 11 20z"
               />
             </svg>
             
@@ -701,124 +760,135 @@ exports[`AppNavigation.vue should render with nav-container open 1`] = `
             <svg
               aria-hidden="true"
               class="icon-expand"
+              fill="currentColor"
               focusable="false"
               height="16"
               preserveAspectRatio="xMidYMid meet"
-              style="will-change: transform;"
               viewBox="0 0 16 16"
               width="16"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M8 5l5 5-.7.7L8 6.4l-4.3 4.3L3 10z"
+                d="M8 5L13 10 12.3 10.7 8 6.4 3.7 10.7 3 10z"
               />
             </svg>
           </button>
            
-          <ul
-            class="nav-item__nav collapse"
-            id="control"
-            style="display: none;"
+          <transition-stub
+            class="nav-item__nav"
+            css="true"
+            enteractiveclass="collapsing"
+            enterclass=""
+            entertoclass="collapse show"
+            leaveactiveclass="collapsing"
+            leaveclass="collapse show"
+            leavetoclass="collapse"
           >
-            <li
-              class="nav-item"
-              data-test-id="nav-item-kvm"
+            <ul
+              class="collapse"
+              id="control"
+              style="display: none;"
             >
-              <a
-                class="nav-link"
-                href="/control/kvm"
-                target="_self"
+              <li
+                class="nav-item"
+                data-test-id="nav-item-kvm"
               >
-                
+                <a
+                  class="nav-link"
+                  href="/control/kvm"
+                  target="_self"
+                >
+                  
                 appNavigation.kvm
               
-              </a>
-            </li>
-            <li
-              class="nav-item"
-              data-test-id="nav-item-manage-power-usage"
-            >
-              <a
-                class="nav-link"
-                href="/control/manage-power-usage"
-                target="_self"
+                </a>
+              </li>
+              <li
+                class="nav-item"
+                data-test-id="nav-item-manage-power-usage"
               >
-                
+                <a
+                  class="nav-link"
+                  href="/control/manage-power-usage"
+                  target="_self"
+                >
+                  
                 appNavigation.managePowerUsage
               
-              </a>
-            </li>
-            <li
-              class="nav-item"
-              data-test-id="nav-item-reboot-bmc"
-            >
-              <a
-                class="nav-link"
-                href="/control/reboot-bmc"
-                target="_self"
+                </a>
+              </li>
+              <li
+                class="nav-item"
+                data-test-id="nav-item-reboot-bmc"
               >
-                
+                <a
+                  class="nav-link"
+                  href="/control/reboot-bmc"
+                  target="_self"
+                >
+                  
                 appNavigation.rebootBmc
               
-              </a>
-            </li>
-            <li
-              class="nav-item"
-              data-test-id="nav-item-serial-over-lan"
-            >
-              <a
-                class="nav-link"
-                href="/control/serial-over-lan"
-                target="_self"
+                </a>
+              </li>
+              <li
+                class="nav-item"
+                data-test-id="nav-item-serial-over-lan"
               >
-                
+                <a
+                  class="nav-link"
+                  href="/control/serial-over-lan"
+                  target="_self"
+                >
+                  
                 appNavigation.serialOverLan
               
-              </a>
-            </li>
-            <li
-              class="nav-item"
-              data-test-id="nav-item-server-led"
-            >
-              <a
-                class="nav-link"
-                href="/control/server-led"
-                target="_self"
+                </a>
+              </li>
+              <li
+                class="nav-item"
+                data-test-id="nav-item-server-led"
               >
-                
+                <a
+                  class="nav-link"
+                  href="/control/server-led"
+                  target="_self"
+                >
+                  
                 appNavigation.serverLed
               
-              </a>
-            </li>
-            <li
-              class="nav-item"
-              data-test-id="nav-item-server-power-operations"
-            >
-              <a
-                class="nav-link"
-                href="/control/server-power-operations"
-                target="_self"
+                </a>
+              </li>
+              <li
+                class="nav-item"
+                data-test-id="nav-item-server-power-operations"
               >
-                
+                <a
+                  class="nav-link"
+                  href="/control/server-power-operations"
+                  target="_self"
+                >
+                  
                 appNavigation.serverPowerOperations
               
-              </a>
-            </li>
-            <li
-              class="nav-item"
-              data-test-id="nav-item-virtual-media"
-            >
-              <a
-                class="nav-link"
-                href="/control/virtual-media"
-                target="_self"
+                </a>
+              </li>
+              <li
+                class="nav-item"
+                data-test-id="nav-item-virtual-media"
               >
-                
+                <a
+                  class="nav-link"
+                  href="/control/virtual-media"
+                  target="_self"
+                >
+                  
                 appNavigation.virtualMedia
               
-              </a>
-            </li>
-          </ul>
+                </a>
+              </li>
+            </ul>
+          </transition-stub>
         </li>
         <li
           class="nav-item"
@@ -832,19 +902,19 @@ exports[`AppNavigation.vue should render with nav-container open 1`] = `
           >
             <svg
               aria-hidden="true"
+              fill="currentColor"
               focusable="false"
               height="16"
               preserveAspectRatio="xMidYMid meet"
-              style="will-change: transform;"
               viewBox="0 0 16 16"
               width="16"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M13.5 8.4v-.8l1-.8c.4-.3.4-.9.2-1.3l-1.2-2c-.2-.3-.5-.5-.9-.5-.1 0-.2 0-.3.1l-1.2.4c-.2-.1-.4-.3-.7-.4l-.3-1.3c0-.5-.4-.8-.9-.8H6.8c-.5 0-.9.3-1 .8l-.2 1.3c-.3.1-.5.2-.7.3L3.7 3h-.3c-.4 0-.7.2-.9.5l-1.2 2c-.2.4-.1.9.3 1.3l.9.9v.8l-.9.7c-.4.3-.5.9-.2 1.3l1.2 2c.1.3.4.5.8.5.1 0 .2 0 .3-.1l1.2-.4c.2.1.4.3.7.4l.3 1.3c.1.5.5.8 1 .8h2.4c.5 0 .9-.3 1-.8l.3-1.3c.2-.1.4-.2.7-.4l1.2.4c.1 0 .2.1.3.1.4 0 .7-.2.9-.5l1.1-2c.2-.4.2-.9-.2-1.3l-1.1-.8zm-.9 3.6l-1.7-.6c-.4.3-.9.6-1.4.8L9.2 14H6.8l-.4-1.8c-.5-.2-.9-.5-1.4-.8l-1.6.6-1.2-2 1.4-1.2c-.1-.5-.1-1.1 0-1.6L2.2 6l1.2-2 1.7.6c.4-.4.9-.6 1.4-.8L6.8 2h2.4l.4 1.8c.5.2.9.5 1.4.8l1.6-.6 1.2 2-1.4 1.2c.1.5.1 1.1 0 1.6l1.4 1.2-1.2 2z"
+                d="M13.5,8.4c0-0.1,0-0.3,0-0.4c0-0.1,0-0.3,0-0.4l1-0.8c0.4-0.3,0.4-0.9,0.2-1.3l-1.2-2C13.3,3.2,13,3,12.6,3	c-0.1,0-0.2,0-0.3,0.1l-1.2,0.4c-0.2-0.1-0.4-0.3-0.7-0.4l-0.3-1.3C10.1,1.3,9.7,1,9.2,1H6.8c-0.5,0-0.9,0.3-1,0.8L5.6,3.1	C5.3,3.2,5.1,3.3,4.9,3.4L3.7,3C3.6,3,3.5,3,3.4,3C3,3,2.7,3.2,2.5,3.5l-1.2,2C1.1,5.9,1.2,6.4,1.6,6.8l0.9,0.9c0,0.1,0,0.3,0,0.4	c0,0.1,0,0.3,0,0.4L1.6,9.2c-0.4,0.3-0.5,0.9-0.2,1.3l1.2,2C2.7,12.8,3,13,3.4,13c0.1,0,0.2,0,0.3-0.1l1.2-0.4	c0.2,0.1,0.4,0.3,0.7,0.4l0.3,1.3c0.1,0.5,0.5,0.8,1,0.8h2.4c0.5,0,0.9-0.3,1-0.8l0.3-1.3c0.2-0.1,0.4-0.2,0.7-0.4l1.2,0.4	c0.1,0,0.2,0.1,0.3,0.1c0.4,0,0.7-0.2,0.9-0.5l1.1-2c0.2-0.4,0.2-0.9-0.2-1.3L13.5,8.4z M12.6,12l-1.7-0.6c-0.4,0.3-0.9,0.6-1.4,0.8	L9.2,14H6.8l-0.4-1.8c-0.5-0.2-0.9-0.5-1.4-0.8L3.4,12l-1.2-2l1.4-1.2c-0.1-0.5-0.1-1.1,0-1.6L2.2,6l1.2-2l1.7,0.6	C5.5,4.2,6,4,6.5,3.8L6.8,2h2.4l0.4,1.8c0.5,0.2,0.9,0.5,1.4,0.8L12.6,4l1.2,2l-1.4,1.2c0.1,0.5,0.1,1.1,0,1.6l1.4,1.2L12.6,12z"
               />
               <path
-                d="M8 11c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3c0 1.6-1.3 3-3 3zm0-5c-1.1 0-2 .8-2 1.9V8c0 1.1.8 2 1.9 2H8c1.1 0 2-.8 2-1.9V8c0-1.1-.8-2-2-2 .1 0 0 0 0 0z"
+                d="M8,11c-1.7,0-3-1.3-3-3s1.3-3,3-3s3,1.3,3,3C11,9.6,9.7,11,8,11C8,11,8,11,8,11z M8,6C6.9,6,6,6.8,6,7.9C6,7.9,6,8,6,8	c0,1.1,0.8,2,1.9,2c0,0,0.1,0,0.1,0c1.1,0,2-0.8,2-1.9c0,0,0-0.1,0-0.1C10,6.9,9.2,6,8,6C8.1,6,8,6,8,6z"
               />
             </svg>
             
@@ -853,82 +923,93 @@ exports[`AppNavigation.vue should render with nav-container open 1`] = `
             <svg
               aria-hidden="true"
               class="icon-expand"
+              fill="currentColor"
               focusable="false"
               height="16"
               preserveAspectRatio="xMidYMid meet"
-              style="will-change: transform;"
               viewBox="0 0 16 16"
               width="16"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M8 5l5 5-.7.7L8 6.4l-4.3 4.3L3 10z"
+                d="M8 5L13 10 12.3 10.7 8 6.4 3.7 10.7 3 10z"
               />
             </svg>
           </button>
            
-          <ul
-            class="nav-item__nav collapse"
-            id="configuration"
-            style="display: none;"
+          <transition-stub
+            class="nav-item__nav"
+            css="true"
+            enteractiveclass="collapsing"
+            enterclass=""
+            entertoclass="collapse show"
+            leaveactiveclass="collapsing"
+            leaveclass="collapse show"
+            leavetoclass="collapse"
           >
-            <li
-              class="nav-item"
-              data-test-id="nav-item-date-time-settings"
+            <ul
+              class="collapse"
+              id="configuration"
+              style="display: none;"
             >
-              <a
-                class="nav-link"
-                href="/configuration/date-time-settings"
-                target="_self"
+              <li
+                class="nav-item"
+                data-test-id="nav-item-date-time-settings"
               >
-                
+                <a
+                  class="nav-link"
+                  href="/configuration/date-time-settings"
+                  target="_self"
+                >
+                  
                 appNavigation.dateTimeSettings
               
-              </a>
-            </li>
-            <li
-              class="nav-item"
-              data-test-id="nav-item-firmware"
-            >
-              <a
-                class="nav-link"
-                href="/configuration/firmware"
-                target="_self"
+                </a>
+              </li>
+              <li
+                class="nav-item"
+                data-test-id="nav-item-firmware"
               >
-                
+                <a
+                  class="nav-link"
+                  href="/configuration/firmware"
+                  target="_self"
+                >
+                  
                 appNavigation.firmware
               
-              </a>
-            </li>
-            <li
-              class="nav-item"
-              data-test-id="nav-item-network-settings"
-            >
-              <a
-                class="nav-link"
-                href="/configuration/network-settings"
-                target="_self"
+                </a>
+              </li>
+              <li
+                class="nav-item"
+                data-test-id="nav-item-network-settings"
               >
-                
+                <a
+                  class="nav-link"
+                  href="/configuration/network-settings"
+                  target="_self"
+                >
+                  
                 appNavigation.networkSettings
               
-              </a>
-            </li>
-            <li
-              class="nav-item"
-              data-test-id="nav-item-snmp-settings"
-            >
-              <a
-                class="nav-link"
-                href="#"
-                target="_self"
+                </a>
+              </li>
+              <li
+                class="nav-item"
+                data-test-id="nav-item-snmp-settings"
               >
-                
+                <a
+                  class="nav-link"
+                  href="/"
+                  target="_self"
+                >
+                  
                 appNavigation.snmpSettings
               
-              </a>
-            </li>
-          </ul>
+                </a>
+              </li>
+            </ul>
+          </transition-stub>
         </li>
         <li
           class="nav-item"
@@ -942,16 +1023,16 @@ exports[`AppNavigation.vue should render with nav-container open 1`] = `
           >
             <svg
               aria-hidden="true"
+              fill="currentColor"
               focusable="false"
               height="16"
               preserveAspectRatio="xMidYMid meet"
-              style="will-change: transform;"
               viewBox="0 0 32 32"
               width="16"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M21 2a9 9 0 0 0-9 9 8.87 8.87 0 0 0 .39 2.61L2 24v6h6l10.39-10.39A9 9 0 0 0 30 11.74a8.77 8.77 0 0 0-1.65-6A9 9 0 0 0 21 2zm0 16a7 7 0 0 1-2-.3l-1.15-.35-.85.85-3.18 3.18L12.41 20 11 21.41l1.38 1.38-1.59 1.59L9.41 23 8 24.41l1.38 1.38L7.17 28H4v-3.17L13.8 15l.85-.85-.29-.95a7.14 7.14 0 0 1 3.4-8.44 7 7 0 0 1 10.24 6 6.69 6.69 0 0 1-1.09 4A7 7 0 0 1 21 18z"
+                d="M21,2a9,9,0,0,0-9,9,8.87,8.87,0,0,0,.39,2.61L2,24v6H8L18.39,19.61A9,9,0,0,0,30,11.74a8.77,8.77,0,0,0-1.65-6A9,9,0,0,0,21,2Zm0,16a7,7,0,0,1-2-.3l-1.15-.35L17,18.2l-3.18,3.18L12.41,20,11,21.41l1.38,1.38-1.59,1.59L9.41,23,8,24.41l1.38,1.38L7.17,28H4V24.83L13.8,15l.85-.85-.29-.95a7.14,7.14,0,0,1,3.4-8.44,7,7,0,0,1,10.24,6,6.69,6.69,0,0,1-1.09,4A7,7,0,0,1,21,18Z"
               />
               <circle
                 cx="22"
@@ -960,78 +1041,93 @@ exports[`AppNavigation.vue should render with nav-container open 1`] = `
               />
             </svg>
             
-              appNavigation.configuration
+              appNavigation.accessControl
               
             <svg
               aria-hidden="true"
               class="icon-expand"
+              fill="currentColor"
               focusable="false"
               height="16"
               preserveAspectRatio="xMidYMid meet"
-              style="will-change: transform;"
               viewBox="0 0 16 16"
               width="16"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M8 5l5 5-.7.7L8 6.4l-4.3 4.3L3 10z"
+                d="M8 5L13 10 12.3 10.7 8 6.4 3.7 10.7 3 10z"
               />
             </svg>
           </button>
            
-          <ul
-            class="nav-item__nav collapse"
-            id="access-control"
-            style="display: none;"
+          <transition-stub
+            class="nav-item__nav"
+            css="true"
+            enteractiveclass="collapsing"
+            enterclass=""
+            entertoclass="collapse show"
+            leaveactiveclass="collapsing"
+            leaveclass="collapse show"
+            leavetoclass="collapse"
           >
-            <li
-              class="nav-item"
-              data-test-id="nav-item-ldap"
+            <ul
+              class="collapse"
+              id="access-control"
+              style="display: none;"
             >
-              <a
-                class="nav-link"
-                href="/access-control/ldap"
-                target="_self"
+              <li
+                class="nav-item"
+                data-test-id="nav-item-ldap"
               >
-                
+                <a
+                  class="nav-link"
+                  href="/access-control/ldap"
+                  target="_self"
+                >
+                  
                 appNavigation.ldap
               
-              </a>
-            </li>
-            <li
-              class="nav-item"
-              data-test-id="nav-item-local-user-management"
-            >
-              <a
-                class="nav-link"
-                href="/access-control/local-user-management"
-                target="_self"
+                </a>
+              </li>
+              <li
+                class="nav-item"
+                data-test-id="nav-item-local-user-management"
               >
-                
+                <a
+                  class="nav-link"
+                  href="/access-control/local-user-management"
+                  target="_self"
+                >
+                  
                 appNavigation.localUserManagement
               
-              </a>
-            </li>
-            <li
-              class="nav-item"
-              data-test-id="nav-item-ssl-certificates"
-            >
-              <a
-                class="nav-link"
-                href="/access-control/ssl-certificates"
-                target="_self"
+                </a>
+              </li>
+              <li
+                class="nav-item"
+                data-test-id="nav-item-ssl-certificates"
               >
-                
+                <a
+                  class="nav-link"
+                  href="/access-control/ssl-certificates"
+                  target="_self"
+                >
+                  
                 appNavigation.sslCertificates
               
-              </a>
-            </li>
-          </ul>
+                </a>
+              </li>
+            </ul>
+          </transition-stub>
         </li>
       </ul>
     </nav>
   </div>
    
-  <!---->
+  <transition-stub
+    name="fade"
+  >
+    <!---->
+  </transition-stub>
 </div>
 `;