From e174e226cb764fa1190b1a3f3bf6400eb2ba2ce3 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 1 Dec 2021 16:47:17 +0100
Subject: [PATCH 01/15] WIP

WIP

WIP
---
 packages/web-runtime/src/App.vue              | 58 +++++++++++++++--
 .../src/components/ApplicationsMenu.vue       | 17 ++---
 .../web-runtime/src/components/TopBar.vue     | 63 ++++++++-----------
 3 files changed, 88 insertions(+), 50 deletions(-)

diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
index d207f8d8750..d779ea635be 100644
--- a/packages/web-runtime/src/App.vue
+++ b/packages/web-runtime/src/App.vue
@@ -41,19 +41,38 @@
                 >
                   <oc-icon name="close" />
                 </oc-button>
-                <router-link ref="navigationSidebarLogo" to="/">
-                  <oc-logo :src="logoImage" :alt="sidebarLogoAlt" />
-                </router-link>
+                <oc-button
+                  variation="inverse"
+                  appearance="raw"
+                  class="web-sidebar-btn-apps"
+                  :aria-label="$gettext('Toggle sidebar')"
+                  @click="leftSidebarCollapsed = !leftSidebarCollapsed"
+                >
+                  <oc-icon name="apps" />
+                </oc-button>
               </div>
             </template>
             <template #nav>
               <oc-list>
+                <oc-sidebar-nav-item
+                  :class="toggleSidebarButtonClass"
+                  >
+                  <oc-button
+                    variation="inverse"
+                    appearance="raw"
+                    :aria-label="$gettext('Toggle sidebar')"
+                    @click="leftSidebarCollapsed = !leftSidebarCollapsed"
+                    >
+                    <oc-icon size="large" :name="leftSidebarCollapsed ? 'chevron_right' : 'chevron_left'" />
+                  </oc-button>
+                </oc-sidebar-nav-item>
                 <oc-sidebar-nav-item
                   v-for="link in sidebarNavItems"
                   :key="link.route.path"
                   :active="link.active"
                   :target="link.route.path"
                   :icon="link.icon || link.iconMaterial"
+                  :collapsed="leftSidebarCollapsed"
                 >
                   {{ link.name }}
                 </oc-sidebar-nav-item>
@@ -131,7 +150,8 @@ export default {
       appNavigationVisible: false,
       $_notificationsInterval: null,
       windowWidth: 0,
-      announcement: ''
+      announcement: '',
+      leftSidebarCollapsed: true
     }
   },
   computed: {
@@ -215,7 +235,9 @@ export default {
       if (this.appNavigationVisible) {
         return ''
       }
-
+      if(this.leftSidebarCollapsed){
+        return 'uk-visible@l oc-app-navigation-collapsed'
+      }
       return 'uk-visible@l'
     },
 
@@ -248,6 +270,10 @@ export default {
         bundle: 'profile',
         setting: 'language'
       })
+    },
+
+    toggleSidebarButtonClass() {
+      return this.leftSidebarCollapsed ? 'web-sidebar-btn-toggle-collapsed' : 'web-sidebar-btn-toggle-expanded oc-pr-s'
     }
   },
   watch: {
@@ -325,6 +351,9 @@ export default {
   methods: {
     ...mapActions(['fetchNotifications', 'deleteMessage']),
 
+    test() {
+      alert('hi')
+    },
     focusModal(component, event) {
       this.focus({
         revert: event === 'beforeDestroy'
@@ -443,6 +472,10 @@ body,
   overflow-y: auto;
 }
 
+.oc-app-navigation-collapsed {
+  width: auto !important;
+}
+
 .oc-app-navigation {
   position: sticky;
   top: 0;
@@ -483,4 +516,19 @@ body,
   top: var(--oc-space-medium);
   z-index: 3;
 }
+.web-sidebar-btn-apps {
+  position: absolute;
+  left: var(--oc-space-medium);
+  top: calc(var(--oc-space-medium) + 9px);
+  z-index: 3;
+}
+.web-sidebar-btn-toggle-expanded {
+  text-align: right;
+  float: right;
+  width: 100%;
+  display: block;
+}
+.web-sidebar-btn-toggle-collapsed {
+  text-align: center;
+}
 </style>
diff --git a/packages/web-runtime/src/components/ApplicationsMenu.vue b/packages/web-runtime/src/components/ApplicationsMenu.vue
index 3bbdf3e03c4..6c55a85a676 100644
--- a/packages/web-runtime/src/components/ApplicationsMenu.vue
+++ b/packages/web-runtime/src/components/ApplicationsMenu.vue
@@ -17,18 +17,19 @@
       mode="click"
       :options="{ pos: 'bottom-right', delayHide: 0 }"
       class="uk-width-large"
+      padding-size="small"
       close-on-click
       padding-size="small"
     >
-      <ul class="uk-grid-small uk-text-center" uk-grid>
-        <li v-for="(n, nid) in menuItems" :key="`apps-menu-${nid}`" class="uk-width-1-3">
-          <a v-if="n.url" key="apps-menu-external-link" :target="n.target" :href="n.url">
-            <oc-icon :name="n.iconMaterial" size="xlarge" />
-            <span class="uk-display-block" v-text="$gettext(n.title)" />
+      <ul class="oc-p-xs">
+        <li v-for="(n, nid) in menuItems" :key="`apps-menu-${nid}`" style="list-style:none" class="oc-pt-s oc-pb-s">
+          <a v-if="n.url" key="apps-menu-external-link" :target="n.target" :href="n.url" style="display: inline-flex; vertical-align: top; gap: 10px">
+            <oc-icon :name="n.iconMaterial" size="medium" />
+            <span v-text="$gettext(n.title)" />
           </a>
-          <router-link v-else key="apps-menu-internal-link" :to="n.path">
-            <oc-icon :name="n.iconMaterial" size="xlarge" />
-            <span class="uk-display-block" v-text="$gettext(n.title)" />
+          <router-link v-else key="apps-menu-internal-link" :to="n.path"  style="display: inline-flex; vertical-align: top; gap: 10px">
+            <oc-icon :name="n.iconMaterial" size="medium" />
+            <span v-text="$gettext(n.title)" />
           </router-link>
         </li>
       </ul>
diff --git a/packages/web-runtime/src/components/TopBar.vue b/packages/web-runtime/src/components/TopBar.vue
index cdc78a32f70..86a35ab4109 100644
--- a/packages/web-runtime/src/components/TopBar.vue
+++ b/packages/web-runtime/src/components/TopBar.vue
@@ -1,33 +1,27 @@
 <template>
   <header
-    class="oc-topbar uk-flex uk-flex-middle uk-flex-wrap oc-border-b oc-p-s"
+    id="oc-topbar"
+    class="uk-flex uk-flex-middle uk-flex-between oc-mx-m"
     :aria-label="$gettext('Top bar')"
   >
-    <oc-grid gutter="medium" flex>
-      <div class="uk-hidden@l">
-        <oc-button
-          appearance="raw"
-          class="oc-m-s oc-app-navigation-toggle"
-          :aria-label="$gettext('Open navigation menu')"
-          @click="toggleAppNavigationVisibility"
-        >
-          <oc-icon name="menu" />
-        </oc-button>
-      </div>
-    </oc-grid>
+  <div class="gap-15 uk-flex uk-flex-middle uk-flex-between">
+    <applications-menu v-if="applicationsList.length > 0" :applications-list="applicationsList" />
+    <router-link ref="navigationSidebarLogo" to="/">
+      <oc-img :src="logoImage" :alt="sidebarLogoAlt" />
+    </router-link>
+  </div>
     <div class="portal-wrapper">
       <portal-target name="app.runtime.header" multiple></portal-target>
     </div>
-    <oc-grid flex gutter="small" class="uk-width-expand uk-flex-right oc-m-rm">
+    <div class="gap-15 uk-flex uk-flex-middle uk-flex-between">
       <feedback-link v-if="isFeedbackLinkEnabled" />
       <notifications v-if="activeNotifications.length" />
-      <applications-menu v-if="applicationsList.length > 0" :applications-list="applicationsList" />
       <user-menu
         :user-id="userId"
         :user-display-name="userDisplayName"
         :applications-list="applicationsList"
       />
-    </oc-grid>
+    </div>
   </header>
 </template>
 
@@ -47,6 +41,9 @@ export default {
     UserMenu
   },
   props: {
+    sidebarLogoAlt() {
+      return this.$gettext('Navigate to all files page')
+    },
     userId: {
       type: String,
       required: false,
@@ -62,11 +59,6 @@ export default {
       required: false,
       default: () => []
     },
-    hasAppNavigation: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
     activeNotifications: {
       type: [Array, Boolean],
       required: false,
@@ -76,30 +68,27 @@ export default {
   computed: {
     ...mapGetters(['configuration']),
 
+    logoImage() {
+      return this.configuration.theme.logo.sidebar
+    },
+
     isFeedbackLinkEnabled() {
       return !this.configuration.options.disableFeedbackLink
     }
-  },
-  methods: {
-    toggleAppNavigationVisibility() {
-      this.$emit('toggleAppNavigationVisibility')
-    }
   }
 }
 </script>
 
-<style scoped>
-.topbar-current-extension-title {
-  color: white;
+<style lang="scss" scoped>
+.gap-15 {
+  gap: 15px;
 }
-
-.oc-topbar {
-  height: 60px;
-}
-
-@media (min-width: 960px) {
-  .portal-wrapper {
-    margin-left: 30px;
+#oc-topbar {
+  z-index: 2;
+  height: 80px;
+  img {
+    margin: 0 !important;
+    height: 60px;
   }
 }
 </style>

From ff09316bf5d653369d4d026068aefb98cda602fc Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Fri, 3 Dec 2021 09:22:52 +0100
Subject: [PATCH 02/15] rework topbar WIP

fix top bar right side actions

fix topbar & linting

fix unittests

remove inline style
---
 .../Search/__snapshots__/List.spec.js.snap    | 14 +++----
 packages/web-runtime/src/App.vue              | 42 +++++++++----------
 .../src/components/ApplicationsMenu.vue       | 25 +++++++++--
 .../src/components/FeedbackLink.vue           |  4 +-
 .../src/components/Notifications.vue          |  4 +-
 .../web-runtime/src/components/TopBar.vue     | 31 ++++++++++----
 .../web-runtime/src/components/UserMenu.vue   |  4 +-
 .../tests/unit/components/TopBar.spec.js      | 26 +++---------
 .../ApplicationsMenu.spec.js.snap             |  8 ++--
 .../__snapshots__/FeedbackLink.spec.js.snap   |  2 +-
 .../__snapshots__/TopBar.spec.js.snap         | 20 ++++-----
 11 files changed, 96 insertions(+), 84 deletions(-)

diff --git a/packages/web-app-files/tests/unit/components/Search/__snapshots__/List.spec.js.snap b/packages/web-app-files/tests/unit/components/Search/__snapshots__/List.spec.js.snap
index 79b68588c3d..50b3b6b932c 100644
--- a/packages/web-app-files/tests/unit/components/Search/__snapshots__/List.spec.js.snap
+++ b/packages/web-app-files/tests/unit/components/Search/__snapshots__/List.spec.js.snap
@@ -3,10 +3,9 @@
 exports[`List component when no resource is found should show no-content-message component 1`] = `
 <div class="files-search-result">
   <div class="uk-height-1-1 uk-flex uk-flex-column uk-flex-center uk-flex-middle uk-text-center files-empty">
-    <div class="oc-icon oc-icon-xxl oc-icon-passive"><svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" version="1.0" viewBox="0 0 16 16" height="16" width="16" xmlns="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" aria-hidden="true" focusable="false">
-        <g xmlns="http://www.w3.org/2000/svg" transform="matrix(.86667 0 0 .86667 -172.05 -864.43)">
-          <path d="m200.2 999.72c-0.28913 0-0.53125 0.2421-0.53125 0.53117v12.784c0 0.2985 0.23264 0.5312 0.53125 0.5312h15.091c0.2986 0 0.53124-0.2327 0.53124-0.5312l0.0004-10.474c0-0.2889-0.24211-0.5338-0.53124-0.5338l-7.5457 0.0005-2.3076-2.3078z"></path>
-        </g>
+    <div class="oc-icon oc-icon-xxl oc-icon-passive"><svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+        <path xmlns="http://www.w3.org/2000/svg" fill="none" d="M0 0h24v24H0z"></path>
+        <path xmlns="http://www.w3.org/2000/svg" d="M12.414 5H21a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h7.414l2 2z"></path>
       </svg></div>
     <div class="oc-text-muted uk-text-large">
       <p class="oc-text-muted"><span data-msgid="No search term entered" data-current-language="en_US">No search term entered</span></p>
@@ -19,10 +18,9 @@ exports[`List component when no resource is found should show no-content-message
 exports[`List component when no search term is entered should show no-content-message component 1`] = `
 <div class="files-search-result">
   <div class="uk-height-1-1 uk-flex uk-flex-column uk-flex-center uk-flex-middle uk-text-center files-empty">
-    <div class="oc-icon oc-icon-xxl oc-icon-passive"><svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" version="1.0" viewBox="0 0 16 16" height="16" width="16" xmlns="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" aria-hidden="true" focusable="false">
-        <g xmlns="http://www.w3.org/2000/svg" transform="matrix(.86667 0 0 .86667 -172.05 -864.43)">
-          <path d="m200.2 999.72c-0.28913 0-0.53125 0.2421-0.53125 0.53117v12.784c0 0.2985 0.23264 0.5312 0.53125 0.5312h15.091c0.2986 0 0.53124-0.2327 0.53124-0.5312l0.0004-10.474c0-0.2889-0.24211-0.5338-0.53124-0.5338l-7.5457 0.0005-2.3076-2.3078z"></path>
-        </g>
+    <div class="oc-icon oc-icon-xxl oc-icon-passive"><svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+        <path xmlns="http://www.w3.org/2000/svg" fill="none" d="M0 0h24v24H0z"></path>
+        <path xmlns="http://www.w3.org/2000/svg" d="M12.414 5H21a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h7.414l2 2z"></path>
       </svg></div>
     <div class="oc-text-muted uk-text-large">
       <p class="oc-text-muted"><span data-msgid="No search term entered" data-current-language="en_US">No search term entered</span></p>
diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
index d779ea635be..e0cf91f7c13 100644
--- a/packages/web-runtime/src/App.vue
+++ b/packages/web-runtime/src/App.vue
@@ -41,29 +41,18 @@
                 >
                   <oc-icon name="close" />
                 </oc-button>
-                <oc-button
-                  variation="inverse"
-                  appearance="raw"
-                  class="web-sidebar-btn-apps"
-                  :aria-label="$gettext('Toggle sidebar')"
-                  @click="leftSidebarCollapsed = !leftSidebarCollapsed"
-                >
-                  <oc-icon name="apps" />
-                </oc-button>
               </div>
             </template>
             <template #nav>
               <oc-list>
-                <oc-sidebar-nav-item
-                  :class="toggleSidebarButtonClass"
-                  >
+                <oc-sidebar-nav-item :class="toggleSidebarButtonClass">
                   <oc-button
                     variation="inverse"
                     appearance="raw"
                     :aria-label="$gettext('Toggle sidebar')"
-                    @click="leftSidebarCollapsed = !leftSidebarCollapsed"
-                    >
-                    <oc-icon size="large" :name="leftSidebarCollapsed ? 'chevron_right' : 'chevron_left'" />
+                    @click="toggleSidebarButtonClick"
+                  >
+                    <oc-icon size="large" :name="toggleSidebarButtonIcon" />
                   </oc-button>
                 </oc-sidebar-nav-item>
                 <oc-sidebar-nav-item
@@ -137,13 +126,15 @@ import MessageBar from './components/MessageBar.vue'
 import SkipTo from './components/SkipTo.vue'
 import { FocusTrap } from 'focus-trap-vue'
 import { getBackendVersion, getWebVersion } from './container/versions'
+import ApplicationsMenu from './components/ApplicationsMenu.vue'
 
 export default {
   components: {
     MessageBar,
     TopBar,
     SkipTo,
-    FocusTrap
+    FocusTrap,
+    ApplicationsMenu
   },
   data() {
     return {
@@ -235,7 +226,7 @@ export default {
       if (this.appNavigationVisible) {
         return ''
       }
-      if(this.leftSidebarCollapsed){
+      if (this.leftSidebarCollapsed) {
         return 'uk-visible@l oc-app-navigation-collapsed'
       }
       return 'uk-visible@l'
@@ -273,7 +264,13 @@ export default {
     },
 
     toggleSidebarButtonClass() {
-      return this.leftSidebarCollapsed ? 'web-sidebar-btn-toggle-collapsed' : 'web-sidebar-btn-toggle-expanded oc-pr-s'
+      return this.leftSidebarCollapsed
+        ? 'web-sidebar-btn-toggle-collapsed'
+        : 'web-sidebar-btn-toggle-expanded oc-pr-s'
+    },
+
+    toggleSidebarButtonIcon() {
+      return this.leftSidebarCollapsed ? 'chevron_right' : 'chevron_left'
     }
   },
   watch: {
@@ -351,8 +348,8 @@ export default {
   methods: {
     ...mapActions(['fetchNotifications', 'deleteMessage']),
 
-    test() {
-      alert('hi')
+    toggleSidebarButtonClick() {
+      this.leftSidebarCollapsed = !this.leftSidebarCollapsed
     },
     focusModal(component, event) {
       this.focus({
@@ -453,7 +450,8 @@ body,
   top: 0;
   height: 60px;
   z-index: 2;
-  background-color: var(--oc-color-background-default);
+  background-color: #202020;
+  margin-left: 0px !important;
 }
 
 .web-content-container {
@@ -470,6 +468,7 @@ body,
   position: relative;
   grid-area: main;
   overflow-y: auto;
+  margin-top: 64px;
 }
 
 .oc-app-navigation-collapsed {
@@ -521,6 +520,7 @@ body,
   left: var(--oc-space-medium);
   top: calc(var(--oc-space-medium) + 9px);
   z-index: 3;
+  margin-left: var(--oc-space-small);
 }
 .web-sidebar-btn-toggle-expanded {
   text-align: right;
diff --git a/packages/web-runtime/src/components/ApplicationsMenu.vue b/packages/web-runtime/src/components/ApplicationsMenu.vue
index 6c55a85a676..d97f81be349 100644
--- a/packages/web-runtime/src/components/ApplicationsMenu.vue
+++ b/packages/web-runtime/src/components/ApplicationsMenu.vue
@@ -5,10 +5,11 @@
       ref="menubutton"
       v-oc-tooltip="applicationSwitcherLabel"
       appearance="raw"
+      variation="inverse"
       class="oc-topbar-menu-burger"
       :aria-label="applicationSwitcherLabel"
     >
-      <oc-icon name="apps" class="uk-flex" />
+      <oc-icon name="apps" size="large" class="uk-flex" />
     </oc-button>
     <oc-drop
       ref="menu"
@@ -22,12 +23,28 @@
       padding-size="small"
     >
       <ul class="oc-p-xs">
-        <li v-for="(n, nid) in menuItems" :key="`apps-menu-${nid}`" style="list-style:none" class="oc-pt-s oc-pb-s">
-          <a v-if="n.url" key="apps-menu-external-link" :target="n.target" :href="n.url" style="display: inline-flex; vertical-align: top; gap: 10px">
+        <li
+          v-for="(n, nid) in menuItems"
+          :key="`apps-menu-${nid}`"
+          style="list-style: none"
+          class="oc-pt-s oc-pb-s"
+        >
+          <a
+            v-if="n.url"
+            key="apps-menu-external-link"
+            :target="n.target"
+            :href="n.url"
+            style="display: inline-flex; vertical-align: top; gap: 10px"
+          >
             <oc-icon :name="n.iconMaterial" size="medium" />
             <span v-text="$gettext(n.title)" />
           </a>
-          <router-link v-else key="apps-menu-internal-link" :to="n.path"  style="display: inline-flex; vertical-align: top; gap: 10px">
+          <router-link
+            v-else
+            key="apps-menu-internal-link"
+            :to="n.path"
+            style="display: inline-flex; vertical-align: top; gap: 10px"
+          >
             <oc-icon :name="n.iconMaterial" size="medium" />
             <span v-text="$gettext(n.title)" />
           </router-link>
diff --git a/packages/web-runtime/src/components/FeedbackLink.vue b/packages/web-runtime/src/components/FeedbackLink.vue
index 64dc245f3d0..19c0005a39a 100644
--- a/packages/web-runtime/src/components/FeedbackLink.vue
+++ b/packages/web-runtime/src/components/FeedbackLink.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="uk-flex uk-flex-middle">
+  <div class="uk-flex uk-flex-middle uk-visible@m">
     <oc-button
       v-oc-tooltip="description"
       type="a"
@@ -9,7 +9,7 @@
       :aria-label="ariaLabel"
       aria-describedby="oc-feedback-link-description"
     >
-      <oc-icon name="feedback" />
+      <oc-icon name="feedback" variation="inverse" />
     </oc-button>
     <p id="oc-feedback-link-description" class="oc-invisible-sr" v-text="description" />
   </div>
diff --git a/packages/web-runtime/src/components/Notifications.vue b/packages/web-runtime/src/components/Notifications.vue
index 667b4cb32f1..d312dd5886b 100644
--- a/packages/web-runtime/src/components/Notifications.vue
+++ b/packages/web-runtime/src/components/Notifications.vue
@@ -1,12 +1,12 @@
 <template>
-  <div id="oc-notification" class="uk-flex uk-flex-middle">
+  <div id="oc-notification" class="uk-flex uk-flex-middle uk-visible@m">
     <oc-button
       id="oc-notification-bell"
       v-oc-tooltip="notificationsLabel"
       appearance="raw"
       :aria-label="notificationsLabel"
     >
-      <oc-icon class="oc-cursor-pointer uk-flex uk-flex-middle" name="bell" />
+      <oc-icon variation="inverse" class="oc-cursor-pointer uk-flex uk-flex-middle" name="bell" />
     </oc-button>
     <oc-drop
       id="oc-notification-drop"
diff --git a/packages/web-runtime/src/components/TopBar.vue b/packages/web-runtime/src/components/TopBar.vue
index 86a35ab4109..8eca40c9bc8 100644
--- a/packages/web-runtime/src/components/TopBar.vue
+++ b/packages/web-runtime/src/components/TopBar.vue
@@ -4,12 +4,16 @@
     class="uk-flex uk-flex-middle uk-flex-between oc-mx-m"
     :aria-label="$gettext('Top bar')"
   >
-  <div class="gap-15 uk-flex uk-flex-middle uk-flex-between">
-    <applications-menu v-if="applicationsList.length > 0" :applications-list="applicationsList" />
-    <router-link ref="navigationSidebarLogo" to="/">
-      <oc-img :src="logoImage" :alt="sidebarLogoAlt" />
-    </router-link>
-  </div>
+    <div class="gap-15 uk-flex uk-flex-middle uk-flex-between">
+      <applications-menu
+        v-if="applicationsList.length > 0"
+        class="application-menu"
+        :applications-list="applicationsList"
+      />
+      <router-link ref="navigationSidebarLogo" to="/" class="oc-ml-m">
+        <oc-img :src="logoImage" :alt="sidebarLogoAlt" />
+      </router-link>
+    </div>
     <div class="portal-wrapper">
       <portal-target name="app.runtime.header" multiple></portal-target>
     </div>
@@ -84,11 +88,20 @@ export default {
   gap: 15px;
 }
 #oc-topbar {
-  z-index: 2;
-  height: 80px;
+  position: absolute;
+  height: 64px;
+  left: 0;
+  z-index: 9999;
   img {
     margin: 0 !important;
-    height: 60px;
+    height: 42px;
+    image-rendering: auto;
+    image-rendering: crisp-edges;
+    image-rendering: pixelated;
+    image-rendering: -webkit-optimize-contrast;
   }
 }
+.application-menu {
+  margin-left: 25px;
+}
 </style>
diff --git a/packages/web-runtime/src/components/UserMenu.vue b/packages/web-runtime/src/components/UserMenu.vue
index 78c4183a078..fd03659eb57 100644
--- a/packages/web-runtime/src/components/UserMenu.vue
+++ b/packages/web-runtime/src/components/UserMenu.vue
@@ -3,9 +3,9 @@
     <oc-button
       id="_userMenuButton"
       ref="menuButton"
-      class="oc-topbar-personal uk-height-1-1 oc-pr-xs"
+      class="oc-topbar-personal uk-height-1-1 oc-pr-xs oc-mr-m"
       appearance="raw"
-      variation="passive"
+      variation="inverse"
       :aria-label="$gettext('User Menu')"
     >
       <oc-grid flex>
diff --git a/packages/web-runtime/tests/unit/components/TopBar.spec.js b/packages/web-runtime/tests/unit/components/TopBar.spec.js
index 9ff0677dba1..d5b4e7b5cf5 100644
--- a/packages/web-runtime/tests/unit/components/TopBar.spec.js
+++ b/packages/web-runtime/tests/unit/components/TopBar.spec.js
@@ -7,7 +7,12 @@ const localVue = createLocalVue()
 localVue.use(Vuex)
 
 const feedbackButtonPresent = (enabled) => ({
-  options: { disableFeedbackLink: !enabled }
+  options: { disableFeedbackLink: !enabled },
+  theme: {
+    logo: {
+      sidebar: ''
+    }
+  }
 })
 
 const defaultRoute = () => ({
@@ -39,23 +44,4 @@ describe('Top Bar component', () => {
     expect(wrapper.html().indexOf('applications-menu-stub')).toBeGreaterThan(-1)
     expect(wrapper).toMatchSnapshot()
   })
-
-  it('Emits toggle of app navigation visibility', async () => {
-    const wrapper = shallowMount(TopBar, {
-      store: new Vuex.Store({
-        getters: {
-          configuration: () => feedbackButtonPresent(true)
-        }
-      }),
-      localVue,
-      stubs,
-      mocks: {
-        $route: defaultRoute()
-      }
-    })
-
-    wrapper.find('.oc-app-navigation-toggle').vm.$emit('click')
-    await wrapper.vm.$nextTick()
-    expect(wrapper.emitted().toggleAppNavigationVisibility).toBeTruthy()
-  })
 })
diff --git a/packages/web-runtime/tests/unit/components/__snapshots__/ApplicationsMenu.spec.js.snap b/packages/web-runtime/tests/unit/components/__snapshots__/ApplicationsMenu.spec.js.snap
index cce938a78f2..d5e2734274c 100644
--- a/packages/web-runtime/tests/unit/components/__snapshots__/ApplicationsMenu.spec.js.snap
+++ b/packages/web-runtime/tests/unit/components/__snapshots__/ApplicationsMenu.spec.js.snap
@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ApplicationsMenu component shoud set aria-label prop on switcher button 1`] = `
-<oc-button-stub type="button" size="medium" arialabel="Application Switcher" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="_appSwitcherButton" class="oc-topbar-menu-burger">
-  <oc-icon-stub name="apps" accessiblelabel="" type="span" size="medium" variation="passive" class="uk-flex"></oc-icon-stub>
+<oc-button-stub type="button" size="medium" arialabel="Application Switcher" variation="inverse" appearance="raw" justifycontent="center" gapsize="medium" id="_appSwitcherButton" class="oc-topbar-menu-burger">
+  <oc-icon-stub name="apps" accessiblelabel="" type="span" size="large" variation="passive" class="uk-flex"></oc-icon-stub>
 </oc-button-stub>
 `;
 
@@ -14,8 +14,8 @@ exports[`ApplicationsMenu component should show app menus 1`] = `
         <oc-icon-stub name="folder" accessiblelabel="" type="span" size="xlarge" variation="passive"></oc-icon-stub> <span class="uk-display-block">Files</span>
       </router-link-stub>
     </li>
-    <li class="uk-width-1-3"><a target="_blank" href="http://some.org">
-        <oc-icon-stub name="some-icon" accessiblelabel="" type="span" size="xlarge" variation="passive"></oc-icon-stub> <span class="uk-display-block">External</span>
+    <li class="oc-pt-s oc-pb-s" style="list-style: none;"><a target="_blank" href="http://some.org" style="display: inline-flex; vertical-align: top; gap: 10px;">
+        <oc-icon-stub name="some-icon" accessiblelabel="" type="span" size="medium" variation="passive"></oc-icon-stub> <span>External</span>
       </a></li>
   </ul>
 </oc-drop-stub>
diff --git a/packages/web-runtime/tests/unit/components/__snapshots__/FeedbackLink.spec.js.snap b/packages/web-runtime/tests/unit/components/__snapshots__/FeedbackLink.spec.js.snap
index f38f080ebd1..15a302c755a 100644
--- a/packages/web-runtime/tests/unit/components/__snapshots__/FeedbackLink.spec.js.snap
+++ b/packages/web-runtime/tests/unit/components/__snapshots__/FeedbackLink.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`FeedbackLink component has no accessibility violations 1`] = `
-<div class="uk-flex uk-flex-middle"><a aria-label="ownCloud feedback survey" href="https://owncloud.com/web-design-feedback" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" target="_blank" aria-describedby="oc-feedback-link-description"><span class="oc-icon oc-icon-m oc-icon-passive"><svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"> <path xmlns="http://www.w3.org/2000/svg" d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 12h-2v-2h2v2zm0-4h-2V6h2v4z"></path> </svg></span></a>
+<div class="uk-flex uk-flex-middle uk-visible@m"><a aria-label="ownCloud feedback survey" href="https://owncloud.com/web-design-feedback" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" target="_blank" aria-describedby="oc-feedback-link-description"><span class="oc-icon oc-icon-m oc-icon-inverse"><svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"> <path xmlns="http://www.w3.org/2000/svg" d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 12h-2v-2h2v2zm0-4h-2V6h2v4z"></path> </svg></span></a>
   <p id="oc-feedback-link-description" class="oc-invisible-sr">Provide your feedback: We'd like to improve the web design and would be happy to hear your feedback. Thank you! Your ownCloud team.</p>
 </div>
 `;
diff --git a/packages/web-runtime/tests/unit/components/__snapshots__/TopBar.spec.js.snap b/packages/web-runtime/tests/unit/components/__snapshots__/TopBar.spec.js.snap
index deef2dab2c4..549dbb866b7 100644
--- a/packages/web-runtime/tests/unit/components/__snapshots__/TopBar.spec.js.snap
+++ b/packages/web-runtime/tests/unit/components/__snapshots__/TopBar.spec.js.snap
@@ -1,22 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Top Bar component Displays applications menu 1`] = `
-<header aria-label="Top bar" class="oc-topbar uk-flex uk-flex-middle uk-flex-wrap oc-border-b oc-p-s">
-  <oc-grid-stub gutter="medium" flex="">
-    <div class="uk-hidden@l">
-      <oc-button-stub appearance="raw" aria-label="Open navigation menu" class="oc-m-s oc-app-navigation-toggle">
-        <oc-icon-stub name="menu"></oc-icon-stub>
-      </oc-button-stub>
-    </div>
-  </oc-grid-stub>
+<header id="oc-topbar" aria-label="Top bar" class="uk-flex uk-flex-middle uk-flex-between oc-mx-m">
+  <div class="gap-15 uk-flex uk-flex-middle uk-flex-between">
+    <applications-menu-stub applicationslist="testApp" class="application-menu"></applications-menu-stub>
+    <router-link-stub to="/" class="oc-ml-m">
+      <oc-img-stub src=""></oc-img-stub>
+    </router-link-stub>
+  </div>
   <div class="portal-wrapper">
     <portal-target-stub name="app.runtime.header" multiple=""></portal-target-stub>
   </div>
-  <oc-grid-stub flex="" gutter="small" class="uk-width-expand uk-flex-right oc-m-rm">
+  <div class="gap-15 uk-flex uk-flex-middle uk-flex-between">
     <feedback-link-stub></feedback-link-stub>
     <!---->
-    <applications-menu-stub applicationslist="testApp"></applications-menu-stub>
     <user-menu-stub userid="einstein" userdisplayname="Albert Einstein" applicationslist="testApp"></user-menu-stub>
-  </oc-grid-stub>
+  </div>
 </header>
 `;

From 60f1e721f59574b71a5e0969169d4f8dadb04f2d Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 7 Dec 2021 14:45:18 +0100
Subject: [PATCH 03/15] persist navigation closed state

---
 packages/web-runtime/src/App.vue              | 16 +++++++++-------
 .../src/components/ApplicationsMenu.vue       |  1 -
 packages/web-runtime/src/store/index.js       |  2 ++
 packages/web-runtime/src/store/navigation.js  | 19 ++++++++++++++++---
 4 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
index e0cf91f7c13..20eb48725f2 100644
--- a/packages/web-runtime/src/App.vue
+++ b/packages/web-runtime/src/App.vue
@@ -61,7 +61,7 @@
                   :active="link.active"
                   :target="link.route.path"
                   :icon="link.icon || link.iconMaterial"
-                  :collapsed="leftSidebarCollapsed"
+                  :collapsed="navigation.closed"
                 >
                   {{ link.name }}
                 </oc-sidebar-nav-item>
@@ -146,7 +146,7 @@ export default {
     }
   },
   computed: {
-    ...mapState(['route', 'user', 'modal', 'sidebar']),
+    ...mapState(['route', 'user', 'modal', 'sidebar', 'navigation']),
     ...mapGetters([
       'configuration',
       'activeNotifications',
@@ -226,7 +226,7 @@ export default {
       if (this.appNavigationVisible) {
         return ''
       }
-      if (this.leftSidebarCollapsed) {
+      if (this.navigation.closed) {
         return 'uk-visible@l oc-app-navigation-collapsed'
       }
       return 'uk-visible@l'
@@ -264,13 +264,13 @@ export default {
     },
 
     toggleSidebarButtonClass() {
-      return this.leftSidebarCollapsed
+      return this.navigation.closed
         ? 'web-sidebar-btn-toggle-collapsed'
         : 'web-sidebar-btn-toggle-expanded oc-pr-s'
     },
 
     toggleSidebarButtonIcon() {
-      return this.leftSidebarCollapsed ? 'chevron_right' : 'chevron_left'
+      return this.navigation.closed ? 'chevron_right' : 'chevron_left'
     }
   },
   watch: {
@@ -346,11 +346,13 @@ export default {
   },
 
   methods: {
-    ...mapActions(['fetchNotifications', 'deleteMessage']),
+    ...mapActions(['fetchNotifications', 'deleteMessage', 'openNavigation', 'closeNavigation']),
 
     toggleSidebarButtonClick() {
-      this.leftSidebarCollapsed = !this.leftSidebarCollapsed
+      if(this.navigation.closed) return this.openNavigation()
+      return this.closeNavigation()
     },
+
     focusModal(component, event) {
       this.focus({
         revert: event === 'beforeDestroy'
diff --git a/packages/web-runtime/src/components/ApplicationsMenu.vue b/packages/web-runtime/src/components/ApplicationsMenu.vue
index d97f81be349..31483a43253 100644
--- a/packages/web-runtime/src/components/ApplicationsMenu.vue
+++ b/packages/web-runtime/src/components/ApplicationsMenu.vue
@@ -20,7 +20,6 @@
       class="uk-width-large"
       padding-size="small"
       close-on-click
-      padding-size="small"
     >
       <ul class="oc-p-xs">
         <li
diff --git a/packages/web-runtime/src/store/index.js b/packages/web-runtime/src/store/index.js
index 53b7a2156ca..bb26f294746 100644
--- a/packages/web-runtime/src/store/index.js
+++ b/packages/web-runtime/src/store/index.js
@@ -18,8 +18,10 @@ const vuexPersistInSession = new VuexPersistence({
   storage: window.sessionStorage,
   reducer: (state) => {
     const { userReady, ...user } = state.user
+    const navigation = state.navigation
     return {
       user,
+      navigation,
       router: state.router
     }
   }
diff --git a/packages/web-runtime/src/store/navigation.js b/packages/web-runtime/src/store/navigation.js
index cbe245f69c7..273a1b797e5 100644
--- a/packages/web-runtime/src/store/navigation.js
+++ b/packages/web-runtime/src/store/navigation.js
@@ -2,7 +2,8 @@ const state = {
   // static nav items are set during extension loading and will not be modified later on
   staticNavItems: {},
   // dynamic nav items are initially empty and can be created e.g. from loaded data
-  dynamicNavItems: {}
+  dynamicNavItems: {},
+  closed: false
 }
 
 const mutations = {
@@ -41,7 +42,10 @@ const mutations = {
       dynamicNavItems[extension].push(navItem)
     }
     state.dynamicNavItems = dynamicNavItems
-  }
+  },
+  SET_CLOSED(state, closed) {
+    state.closed = closed
+  },
 }
 
 const getters = {
@@ -79,8 +83,17 @@ const getters = {
   }
 }
 
+const actions = {
+  openNavigation({ commit }) {
+    commit('SET_CLOSED', false)
+  },
+  closeNavigation({ commit }) {
+    commit('SET_CLOSED', true)
+  },
+}
 export default {
   state,
   mutations,
-  getters
+  getters,
+  actions
 }

From ecfceaf9cb3a9b44d366ced40a0a29e8e49a98d8 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 7 Dec 2021 16:55:43 +0100
Subject: [PATCH 04/15] add blob transition for navigation

---
 packages/web-runtime/src/App.vue | 80 ++++++++++++++++++++++++++++++--
 1 file changed, 75 insertions(+), 5 deletions(-)

diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
index 20eb48725f2..1b4027d34ac 100644
--- a/packages/web-runtime/src/App.vue
+++ b/packages/web-runtime/src/App.vue
@@ -56,14 +56,16 @@
                   </oc-button>
                 </oc-sidebar-nav-item>
                 <oc-sidebar-nav-item
-                  v-for="link in sidebarNavItems"
+                  v-for="(link, index) in sidebarNavItems"
                   :key="link.route.path"
-                  :active="link.active"
                   :target="link.route.path"
+                  :active="link.active"
                   :icon="link.icon || link.iconMaterial"
                   :collapsed="navigation.closed"
+                  :id="`nav-item-${index}`"
                 >
-                  {{ link.name }}
+                  <span v-if="!navigation.closed" class="text">{{ link.name }}</span>
+                  <span v-if="index === 0" class="active-blob" id="nav-item-blob"></span>
                 </oc-sidebar-nav-item>
               </oc-list>
             </template>
@@ -142,7 +144,7 @@ export default {
       $_notificationsInterval: null,
       windowWidth: 0,
       announcement: '',
-      leftSidebarCollapsed: true
+      animationTimeout: null
     }
   },
   computed: {
@@ -282,6 +284,16 @@ export default {
         this.appNavigationVisible = false
       }
     },
+    sidebarNavItems: {
+      immediate: true,
+      deep: true,
+      handler: function (sidebarNavItems) {
+        sidebarNavItems.forEach((item, index) => {
+          if(!item.active) return;
+          this.animateBlob(index)
+        })
+      }
+    },
     capabilities: {
       immediate: true,
       handler: function (caps) {
@@ -342,6 +354,11 @@ export default {
     this.$nextTick(() => {
       window.addEventListener('resize', this.onResize)
       this.onResize()
+      this.sidebarNavItems.forEach((item, index) => {
+        if(!item.active) return;
+        console.log(document.getElementById('nav-item-0'))
+        this.animateBlob(index, 0)
+      })
     })
   },
 
@@ -430,7 +447,39 @@ export default {
       }
 
       return titleSegments.join(' - ')
-    }
+    },
+
+    animateBlob(index, duration = 0.2) {
+      clearTimeout(this.animationTimeout);
+      const currentElement = this.getNavigationElement(0);
+      const targetElement = this.getNavigationElement(index);
+      const distance = this.getDistanceBetweenElements(
+        currentElement,
+        targetElement
+      );
+      const blob =  document.getElementById("nav-item-blob");
+      const style = blob.style;
+      style.setProperty("transition-duration", `${duration}s`);
+      style.setProperty("transform", `translateY(${distance}px)`);
+    },
+
+    getNavigationElement(index) {
+      return document.getElementById(`nav-item-${index}`);
+    },
+
+    getPositionAtCenter(element) {
+      const { top, left, width, height } = element.getBoundingClientRect();
+      return {
+        x: left + width / 2,
+        y: top + height / 2,
+      };
+    },
+
+    getDistanceBetweenElements(a, b) {
+      const aPosition = this.getPositionAtCenter(a);
+      const bPosition = this.getPositionAtCenter(b);
+      return Math.hypot(aPosition.x - bPosition.x, aPosition.y - bPosition.y);
+    },
   }
 }
 </script>
@@ -447,6 +496,27 @@ body,
   background-color: var(--oc-color-background-default);
 }
 
+#web-nav-sidebar {
+  .oc-icon {
+    z-index: 2;
+  }
+  .text {
+    z-index: 2;
+  }
+  .active-blob {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 0;
+    background: linear-gradient(90deg, #0869de 0%, #4e85c8 100%);
+    z-index: 1;
+    transition: transform 0.2s cubic-bezier(0.51, 0.06, 0.56, 1.37);
+    border-radius: 5px;
+  }
+}
+
 #oc-topbar {
   position: sticky;
   top: 0;

From 898993d0bbb93a09e18bb131e388de4a5e3f8bb0 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 7 Dec 2021 19:00:38 +0100
Subject: [PATCH 05/15] add navigation open / close transition

---
 packages/web-runtime/src/App.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
index 1b4027d34ac..3d52789cf45 100644
--- a/packages/web-runtime/src/App.vue
+++ b/packages/web-runtime/src/App.vue
@@ -64,7 +64,7 @@
                   :collapsed="navigation.closed"
                   :id="`nav-item-${index}`"
                 >
-                  <span v-if="!navigation.closed" class="text">{{ link.name }}</span>
+                  <span :class="{ 'text': true, 'text-invisible': navigation.closed }">{{ link.name }}</span>
                   <span v-if="index === 0" class="active-blob" id="nav-item-blob"></span>
                 </oc-sidebar-nav-item>
               </oc-list>
@@ -497,11 +497,19 @@ body,
 }
 
 #web-nav-sidebar {
+  transition: all 0.35s cubic-bezier(.34,.11,0,1.12);
   .oc-icon {
     z-index: 2;
   }
   .text {
     z-index: 2;
+    opacity: 1;
+    transition: all 0.35s ease-out;
+  }
+  .text-invisible {
+    opacity: 0 !important;
+    transition: 0s;
+    margin-left: var(--oc-space-medium) !important;
   }
   .active-blob {
     position: absolute;
@@ -544,7 +552,7 @@ body,
 }
 
 .oc-app-navigation-collapsed {
-  width: auto !important;
+  width: 75px !important;
 }
 
 .oc-app-navigation {

From 13e44c3867531ca7c775e95ab5fc00822f03c28e Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 8 Dec 2021 12:54:37 +0100
Subject: [PATCH 06/15] add navigation hover effect

---
 packages/web-runtime/src/App.vue              | 48 +++++++++++++------
 .../web-runtime/src/components/TopBar.vue     |  1 +
 2 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
index 3d52789cf45..d490d087db2 100644
--- a/packages/web-runtime/src/App.vue
+++ b/packages/web-runtime/src/App.vue
@@ -65,6 +65,7 @@
                   :id="`nav-item-${index}`"
                 >
                   <span :class="{ 'text': true, 'text-invisible': navigation.closed }">{{ link.name }}</span>
+                  <span class="hover-blob"></span>
                   <span v-if="index === 0" class="active-blob" id="nav-item-blob"></span>
                 </oc-sidebar-nav-item>
               </oc-list>
@@ -143,8 +144,7 @@ export default {
       appNavigationVisible: false,
       $_notificationsInterval: null,
       windowWidth: 0,
-      announcement: '',
-      animationTimeout: null
+      announcement: ''
     }
   },
   computed: {
@@ -183,18 +183,11 @@ export default {
     showHeader() {
       return this.$route.meta.hideHeadbar !== true
     },
+
     favicon() {
       return this.configuration.theme.logo.favicon
     },
 
-    logoImage() {
-      return this.configuration.theme.logo.sidebar
-    },
-
-    sidebarLogoAlt() {
-      return this.$gettext('Navigate to all files page')
-    },
-
     sidebarNavItems() {
       if (this.publicPage()) {
         return []
@@ -356,7 +349,6 @@ export default {
       this.onResize()
       this.sidebarNavItems.forEach((item, index) => {
         if(!item.active) return;
-        console.log(document.getElementById('nav-item-0'))
         this.animateBlob(index, 0)
       })
     })
@@ -449,8 +441,7 @@ export default {
       return titleSegments.join(' - ')
     },
 
-    animateBlob(index, duration = 0.2) {
-      clearTimeout(this.animationTimeout);
+    animateBlob(index, duration = 0.26) {
       const currentElement = this.getNavigationElement(0);
       const targetElement = this.getNavigationElement(index);
       const distance = this.getDistanceBetweenElements(
@@ -505,6 +496,7 @@ body,
     z-index: 2;
     opacity: 1;
     transition: all 0.35s ease-out;
+    overflow: hidden;
   }
   .text-invisible {
     opacity: 0 !important;
@@ -520,9 +512,37 @@ body,
     border: 0;
     background: linear-gradient(90deg, #0869de 0%, #4e85c8 100%);
     z-index: 1;
-    transition: transform 0.2s cubic-bezier(0.51, 0.06, 0.56, 1.37);
+    transition: transform 0.3s cubic-bezier(.51,.06,.42,1.26);
     border-radius: 5px;
   }
+  .active-blob::before {
+    content: "";
+    position: absolute;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 44px;
+    box-shadow: 2px 0px 6px rgba(0, 0, 0, 0.14);
+  }
+  .hover-blob {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 0;
+    z-index: 0;
+  }
+  .hover-blob:hover,
+  .text:hover + .hover-blob,
+  .oc-icon:hover ~ .hover-blob {
+    background-color: #202020;
+    border-radius: 5px;
+  }
+  .icon-expanded {
+    margin-right: var(--oc-space-medium);
+  }
 }
 
 #oc-topbar {
diff --git a/packages/web-runtime/src/components/TopBar.vue b/packages/web-runtime/src/components/TopBar.vue
index 8eca40c9bc8..524d3db6c3a 100644
--- a/packages/web-runtime/src/components/TopBar.vue
+++ b/packages/web-runtime/src/components/TopBar.vue
@@ -99,6 +99,7 @@ export default {
     image-rendering: crisp-edges;
     image-rendering: pixelated;
     image-rendering: -webkit-optimize-contrast;
+    user-select: none;
   }
 }
 .application-menu {

From ce3f229af09dc9eee264b964b910fde4b300bb84 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 8 Dec 2021 15:38:18 +0100
Subject: [PATCH 07/15] add hover effect

---
 packages/web-runtime/src/App.vue | 66 ++++++++++++++++++++++----------
 1 file changed, 46 insertions(+), 20 deletions(-)

diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
index d490d087db2..28234f278ed 100644
--- a/packages/web-runtime/src/App.vue
+++ b/packages/web-runtime/src/App.vue
@@ -49,6 +49,7 @@
                   <oc-button
                     variation="inverse"
                     appearance="raw"
+                    class="toggle-sidebar-button"
                     :aria-label="$gettext('Toggle sidebar')"
                     @click="toggleSidebarButtonClick"
                   >
@@ -64,9 +65,16 @@
                   :collapsed="navigation.closed"
                   :id="`nav-item-${index}`"
                 >
-                  <span :class="{ 'text': true, 'text-invisible': navigation.closed }">{{ link.name }}</span>
-                  <span class="hover-blob"></span>
-                  <span v-if="index === 0" class="active-blob" id="nav-item-blob"></span>
+                  <span :class="{ 'text': true, 'text-invisible': navigation.closed }">
+                    {{ link.name }}
+                  </span>
+                  <span class="hover-blob" />
+                  <span
+                    v-if="index === 0"
+                    @click.prevent.stop
+                    class="active-blob"
+                    id="nav-item-blob"
+                  />
                 </oc-sidebar-nav-item>
               </oc-list>
             </template>
@@ -280,10 +288,11 @@ export default {
     sidebarNavItems: {
       immediate: true,
       deep: true,
-      handler: function (sidebarNavItems) {
+      handler: function (sidebarNavItems, beforeNavItems) {
         sidebarNavItems.forEach((item, index) => {
-          if(!item.active) return;
-          this.animateBlob(index)
+          if(!item.active) return
+          if(beforeNavItems) return this.animateBlob(index)
+          this.updateNavigationHighlight(sidebarNavItems)
         })
       }
     },
@@ -347,16 +356,21 @@ export default {
     this.$nextTick(() => {
       window.addEventListener('resize', this.onResize)
       this.onResize()
-      this.sidebarNavItems.forEach((item, index) => {
-        if(!item.active) return;
-        this.animateBlob(index, 0)
-      })
+      this.updateNavigationHighlight()
     })
   },
 
   methods: {
     ...mapActions(['fetchNotifications', 'deleteMessage', 'openNavigation', 'closeNavigation']),
 
+    updateNavigationHighlight(sidebarNavItems=this.sidebarNavItems) {
+      sidebarNavItems.forEach((item, index) => {
+        if(!item.active) return
+        setTimeout(() => {
+          this.animateBlob(index, 0)
+        }, 1)
+      })
+    },
     toggleSidebarButtonClick() {
       if(this.navigation.closed) return this.openNavigation()
       return this.closeNavigation()
@@ -450,6 +464,8 @@ export default {
       );
       const blob =  document.getElementById("nav-item-blob");
       const style = blob.style;
+
+      style.setProperty("opacity", "1");
       style.setProperty("transition-duration", `${duration}s`);
       style.setProperty("transform", `translateY(${distance}px)`);
     },
@@ -503,6 +519,14 @@ body,
     transition: 0s;
     margin-left: var(--oc-space-medium) !important;
   }
+  .toggle-sidebar-button {
+    padding: 4px;
+    border-radius: 5px;
+    transition: all 0.2s ease-out;
+    &:hover {
+      background: #383838;
+    }
+  }
   .active-blob {
     position: absolute;
     top: 0;
@@ -510,20 +534,20 @@ body,
     right: 0;
     bottom: 0;
     border: 0;
+    opacity: 0;
     background: linear-gradient(90deg, #0869de 0%, #4e85c8 100%);
     z-index: 1;
     transition: transform 0.3s cubic-bezier(.51,.06,.42,1.26);
     border-radius: 5px;
-  }
-  .active-blob::before {
-    content: "";
-    position: absolute;
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: 44px;
-    box-shadow: 2px 0px 6px rgba(0, 0, 0, 0.14);
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      width: 44px;
+      box-shadow: 2px 0px 6px rgba(0, 0, 0, 0.14);
+    }
   }
   .hover-blob {
     position: absolute;
@@ -533,6 +557,7 @@ body,
     bottom: 0;
     border: 0;
     z-index: 0;
+    transition: all 0.2s ease-out;
   }
   .hover-blob:hover,
   .text:hover + .hover-blob,
@@ -615,6 +640,7 @@ body,
   top: var(--oc-space-medium);
   z-index: 3;
 }
+
 .web-sidebar-btn-apps {
   position: absolute;
   left: var(--oc-space-medium);

From eabe6536308d628fa2aace2915e4121baffd2bb3 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 9 Dec 2021 01:43:59 +0100
Subject: [PATCH 08/15] parent c25b33f042f7d1928a980e19e2a09c13e984693e author
 Paul Neubauer <paulneubauer@live.de> 1639010639 +0100 committer pwengerter
 <pascal@wengerter.info> 1640347147 +0100

parent c25b33f042f7d1928a980e19e2a09c13e984693e
author Paul Neubauer <paulneubauer@live.de> 1639010639 +0100
committer pwengerter <pascal@wengerter.info> 1640347043 +0100

move sidebar navigation from ods to web

fix animation style issue

fix initial bug

add newline to yarn lock

fix unittests

fix sidebar naming

add changelog

update snapshot tests

enable smoke tests again

fix rebase gone

fix fav id

fix favourites id

Check deeper in left navbar for navItem text in acceptance tests
---
 .../enhancement-redesign-main-layout          |   7 +
 packages/web-runtime/src/App.vue              |  85 ++++++------
 .../src/components/SidebarNav/SidebarNav.vue  |  97 ++++++++++++++
 .../components/SidebarNav/SidebarNavItem.vue  | 126 ++++++++++++++++++
 packages/web-runtime/src/store/navigation.js  |   4 +-
 .../ApplicationsMenu.spec.js.snap             |   8 +-
 tests/acceptance/pageObjects/webPage.js       |   2 +-
 .../cucumber/step_definitions/app.files.ts    |   7 +-
 tests/e2e/support/page/files/allFiles.ts      |   3 +-
 9 files changed, 283 insertions(+), 56 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-redesign-main-layout
 create mode 100644 packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
 create mode 100644 packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue

diff --git a/changelog/unreleased/enhancement-redesign-main-layout b/changelog/unreleased/enhancement-redesign-main-layout
new file mode 100644
index 00000000000..206a609def3
--- /dev/null
+++ b/changelog/unreleased/enhancement-redesign-main-layout
@@ -0,0 +1,7 @@
+Enhancement: Redesign main layout
+
+We've started to implement the redesign by adjusting the sidebar,
+topbar and appswitcher.
+
+https://github.com/owncloud/web/issues/6036
+https://github.com/owncloud/web/pull/6086
\ No newline at end of file
diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
index 28234f278ed..765e74bcc72 100644
--- a/packages/web-runtime/src/App.vue
+++ b/packages/web-runtime/src/App.vue
@@ -19,7 +19,7 @@
     <div v-else id="web-content" key="core-content" class="uk-flex uk-flex-stretch">
       <transition :name="appNavigationAnimation">
         <focus-trap v-if="isSidebarVisible" :active="isSidebarFixed && appNavigationVisible">
-          <oc-sidebar-nav
+          <sidebar-nav
             v-show="isSidebarVisible"
             id="web-nav-sidebar"
             v-touch:swipe.left="handleNavSwipe"
@@ -45,7 +45,7 @@
             </template>
             <template #nav>
               <oc-list>
-                <oc-sidebar-nav-item :class="toggleSidebarButtonClass">
+                <sidebar-nav-item :class="toggleSidebarButtonClass">
                   <oc-button
                     variation="inverse"
                     appearance="raw"
@@ -55,33 +55,33 @@
                   >
                     <oc-icon size="large" :name="toggleSidebarButtonIcon" />
                   </oc-button>
-                </oc-sidebar-nav-item>
-                <oc-sidebar-nav-item
+                </sidebar-nav-item>
+                <sidebar-nav-item
                   v-for="(link, index) in sidebarNavItems"
+                  :id="`nav-item-${index}`"
                   :key="link.route.path"
                   :target="link.route.path"
                   :active="link.active"
                   :icon="link.icon || link.iconMaterial"
                   :collapsed="navigation.closed"
-                  :id="`nav-item-${index}`"
                 >
-                  <span :class="{ 'text': true, 'text-invisible': navigation.closed }">
+                  <span :class="{ text: true, 'text-invisible': navigation.closed }">
                     {{ link.name }}
                   </span>
                   <span class="hover-blob" />
                   <span
                     v-if="index === 0"
-                    @click.prevent.stop
                     class="active-blob"
-                    id="nav-item-blob"
+                    :style="activeBlobStyle"
+                    @click.prevent.stop
                   />
-                </oc-sidebar-nav-item>
+                </sidebar-nav-item>
               </oc-list>
             </template>
             <template v-if="sidebar.sidebarFooterContentComponent" #footer>
               <component :is="sidebar.sidebarFooterContentComponent" />
             </template>
-          </oc-sidebar-nav>
+          </sidebar-nav>
         </focus-trap>
       </transition>
       <div class="uk-width-expand web-content-container">
@@ -137,7 +137,8 @@ import MessageBar from './components/MessageBar.vue'
 import SkipTo from './components/SkipTo.vue'
 import { FocusTrap } from 'focus-trap-vue'
 import { getBackendVersion, getWebVersion } from './container/versions'
-import ApplicationsMenu from './components/ApplicationsMenu.vue'
+import SidebarNav from './components/SidebarNav/SidebarNav.vue'
+import SidebarNavItem from './components/SidebarNav/SidebarNavItem.vue'
 
 export default {
   components: {
@@ -145,14 +146,16 @@ export default {
     TopBar,
     SkipTo,
     FocusTrap,
-    ApplicationsMenu
+    SidebarNav,
+    SidebarNavItem
   },
   data() {
     return {
       appNavigationVisible: false,
       $_notificationsInterval: null,
       windowWidth: 0,
-      announcement: ''
+      announcement: '',
+      activeBlobStyle: {}
     }
   },
   computed: {
@@ -288,10 +291,11 @@ export default {
     sidebarNavItems: {
       immediate: true,
       deep: true,
-      handler: function (sidebarNavItems, beforeNavItems) {
+      handler: function (sidebarNavItems) {
         sidebarNavItems.forEach((item, index) => {
-          if(!item.active) return
-          if(beforeNavItems) return this.animateBlob(index)
+          if (!item.active) return
+          const isRendered = Object.keys(this.activeBlobStyle).length !== 0
+          if (isRendered) return this.animateBlob(index)
           this.updateNavigationHighlight(sidebarNavItems)
         })
       }
@@ -356,23 +360,22 @@ export default {
     this.$nextTick(() => {
       window.addEventListener('resize', this.onResize)
       this.onResize()
-      this.updateNavigationHighlight()
     })
   },
 
   methods: {
     ...mapActions(['fetchNotifications', 'deleteMessage', 'openNavigation', 'closeNavigation']),
 
-    updateNavigationHighlight(sidebarNavItems=this.sidebarNavItems) {
+    updateNavigationHighlight(sidebarNavItems) {
       sidebarNavItems.forEach((item, index) => {
-        if(!item.active) return
+        if (!item.active) return
         setTimeout(() => {
           this.animateBlob(index, 0)
         }, 1)
       })
     },
     toggleSidebarButtonClick() {
-      if(this.navigation.closed) return this.openNavigation()
+      if (this.navigation.closed) return this.openNavigation()
       return this.closeNavigation()
     },
 
@@ -456,37 +459,33 @@ export default {
     },
 
     animateBlob(index, duration = 0.26) {
-      const currentElement = this.getNavigationElement(0);
-      const targetElement = this.getNavigationElement(index);
-      const distance = this.getDistanceBetweenElements(
-        currentElement,
-        targetElement
-      );
-      const blob =  document.getElementById("nav-item-blob");
-      const style = blob.style;
-
-      style.setProperty("opacity", "1");
-      style.setProperty("transition-duration", `${duration}s`);
-      style.setProperty("transform", `translateY(${distance}px)`);
+      const currentElement = this.getNavigationElement(0)
+      const targetElement = this.getNavigationElement(index)
+      const distance = this.getDistanceBetweenElements(currentElement, targetElement)
+
+      this.activeBlobStyle.opacity = 1
+      this.activeBlobStyle.transform = `translateY(${distance}px)`
+      this.activeBlobStyle['transition-duration'] = `${duration}s`
+      this.$forceUpdate()
     },
 
     getNavigationElement(index) {
-      return document.getElementById(`nav-item-${index}`);
+      return document.getElementById(`nav-item-${index}`)
     },
 
     getPositionAtCenter(element) {
-      const { top, left, width, height } = element.getBoundingClientRect();
+      const { top, left, width, height } = element.getBoundingClientRect()
       return {
         x: left + width / 2,
-        y: top + height / 2,
-      };
+        y: top + height / 2
+      }
     },
 
     getDistanceBetweenElements(a, b) {
-      const aPosition = this.getPositionAtCenter(a);
-      const bPosition = this.getPositionAtCenter(b);
-      return Math.hypot(aPosition.x - bPosition.x, aPosition.y - bPosition.y);
-    },
+      const aPosition = this.getPositionAtCenter(a)
+      const bPosition = this.getPositionAtCenter(b)
+      return Math.hypot(aPosition.x - bPosition.x, aPosition.y - bPosition.y)
+    }
   }
 }
 </script>
@@ -504,7 +503,7 @@ body,
 }
 
 #web-nav-sidebar {
-  transition: all 0.35s cubic-bezier(.34,.11,0,1.12);
+  transition: all 0.35s cubic-bezier(0.34, 0.11, 0, 1.12);
   .oc-icon {
     z-index: 2;
   }
@@ -537,10 +536,10 @@ body,
     opacity: 0;
     background: linear-gradient(90deg, #0869de 0%, #4e85c8 100%);
     z-index: 1;
-    transition: transform 0.3s cubic-bezier(.51,.06,.42,1.26);
+    transition: transform 0.3s cubic-bezier(0.51, 0.06, 0.42, 1.26);
     border-radius: 5px;
     &::before {
-      content: "";
+      content: '';
       position: absolute;
       top: 0;
       left: 0;
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
new file mode 100644
index 00000000000..d6b2a3ec95e
--- /dev/null
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
@@ -0,0 +1,97 @@
+<template functional>
+  <div
+    :ref="data.ref"
+    class="oc-sidebar"
+    :class="[data.staticClass, data.class]"
+    v-bind="data.attrs"
+  >
+    <header
+      v-if="slots().header"
+      class="oc-sidebar-header uk-flex uk-flex-middle"
+      :aria-label="props.accessibleLabelHeader"
+    >
+      <!-- @slot Header of the sidebar -->
+      <slot name="header" />
+    </header>
+    <nav v-if="slots().nav" class="oc-sidebar-nav" :aria-label="props.accessibleLabelNav">
+      <!-- @slot Main content of the sidebar -->
+      <slot name="nav" />
+    </nav>
+    <footer
+      v-if="slots().footer"
+      class="oc-sidebar-footer"
+      :aria-label="props.accessibleLabelFooter"
+    >
+      <!-- @slot Footer of the sidebar -->
+      <slot name="footer" />
+    </footer>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    /**
+     * Accessible label for the header inside the sidebar
+     */
+    accessibleLabelHeader: {
+      type: String,
+      required: true
+    },
+    /**
+     * Accessible label for the navigation inside the sidebar
+     */
+    accessibleLabelNav: {
+      type: String,
+      required: true
+    },
+    /**
+     * Accessible label for the footer inside the sidebar
+     */
+    accessibleLabelFooter: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.oc-sidebar {
+  background-color: var(--oc-color-swatch-brand-default);
+  box-sizing: border-box;
+  color: var(--oc-color-text-inverse);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden auto;
+  width: var(--oc-size-width-medium);
+  background-color: #202020;
+  overflow: visible;
+  z-index: var(--oc-z-index-modal);
+
+  &-header {
+    padding: 0 var(--oc-space-medium);
+    height: 64px;
+    flex-shrink: 0;
+  }
+
+  &-nav {
+    flex: auto;
+    margin-bottom: var(--oc-space-large);
+    background-color: #2d2d2d;
+    border-radius: 15px;
+    padding-top: var(--oc-space-large);
+    margin-left: var(--oc-space-small);
+    box-shadow: 5px 0px 25px rgba(0, 0, 0, 0.3);
+  }
+
+  &-footer {
+    padding: 0 var(--oc-space-medium);
+
+    p {
+      color: inherit;
+      margin-bottom: 0;
+    }
+  }
+}
+</style>
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
new file mode 100644
index 00000000000..51a0f84bea2
--- /dev/null
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
@@ -0,0 +1,126 @@
+<template functional>
+  <li
+    v-bind="data.attrs"
+    :ref="data.ref"
+    :class="[
+      'oc-sidebar-nav-item',
+      'oc-pb-xs',
+      'oc-pl-s',
+      'oc-pr-s',
+      { 'oc-sidebar-nav-item-isolated': props.isolate },
+      { 'oc-sidebar-nav-item-parent': slots().subnav },
+      data.staticClass,
+      data.class
+    ]"
+    :aria-current="props.active ? 'page' : null"
+  >
+    <router-link
+      v-if="props.target"
+      :id="props.id"
+      :class="['oc-sidebar-nav-item-link', { active: props.active }]"
+      :to="props.target"
+    >
+      <oc-icon
+        :class="{ 'oc-sidebar-nav-item-icon': !props.collapsed }"
+        :name="props.icon"
+        variation="inverse"
+        aria-hidden="true"
+      />
+      <slot name="default" />
+    </router-link>
+    <oc-button v-else appearance="raw" @click="$emit('click', $event)">
+      <slot name="default" />
+    </oc-button>
+    <oc-list v-if="slots().subnav" class="oc-sidebar-nav-item-list">
+      <slot name="subnav" />
+    </oc-list>
+  </li>
+</template>
+<script>
+export default {
+  props: {
+    active: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    target: {
+      type: String,
+      required: false,
+      default: null
+    },
+    icon: {
+      type: String,
+      required: true,
+      default: ''
+    },
+    isolate: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    collapsed: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    id: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.oc-sidebar-nav-item {
+  &-link {
+    position: relative;
+    align-items: center;
+    -webkit-user-drag: none;
+    color: var(--oc-color-border);
+    display: flex;
+    font-weight: 400;
+    padding: var(--oc-space-small) var(--oc-space-small);
+    border-radius: 5px;
+    white-space: nowrap;
+    user-select: none;
+
+    &.active {
+      color: var(--oc-color-text-inverse);
+      border: 0px;
+    }
+
+    .oc-icon > svg {
+      fill: var(--oc-color-border) !important;
+    }
+
+    &.active > .oc-icon > svg {
+      fill: var(--oc-color-text-inverse) !important;
+    }
+
+    &:hover {
+      text-decoration: none;
+      color: var(--oc-color-text-inverse);
+    }
+
+    &.active {
+      cursor: default;
+    }
+  }
+
+  &-icon {
+    margin-right: var(--oc-space-medium);
+  }
+
+  &-isolated {
+    margin-top: var(--oc-space-medium);
+  }
+
+  &-list &-link {
+    font-size: 0.875rem;
+    padding-left: var(--oc-space-large);
+  }
+}
+</style>
diff --git a/packages/web-runtime/src/store/navigation.js b/packages/web-runtime/src/store/navigation.js
index 273a1b797e5..8a9760f89fe 100644
--- a/packages/web-runtime/src/store/navigation.js
+++ b/packages/web-runtime/src/store/navigation.js
@@ -45,7 +45,7 @@ const mutations = {
   },
   SET_CLOSED(state, closed) {
     state.closed = closed
-  },
+  }
 }
 
 const getters = {
@@ -89,7 +89,7 @@ const actions = {
   },
   closeNavigation({ commit }) {
     commit('SET_CLOSED', true)
-  },
+  }
 }
 export default {
   state,
diff --git a/packages/web-runtime/tests/unit/components/__snapshots__/ApplicationsMenu.spec.js.snap b/packages/web-runtime/tests/unit/components/__snapshots__/ApplicationsMenu.spec.js.snap
index d5e2734274c..4a3da9d7d13 100644
--- a/packages/web-runtime/tests/unit/components/__snapshots__/ApplicationsMenu.spec.js.snap
+++ b/packages/web-runtime/tests/unit/components/__snapshots__/ApplicationsMenu.spec.js.snap
@@ -8,10 +8,10 @@ exports[`ApplicationsMenu component shoud set aria-label prop on switcher button
 
 exports[`ApplicationsMenu component should show app menus 1`] = `
 <oc-drop-stub dropid="app-switcher-dropdown" toggle="#_appSwitcherButton" position="bottom-start" mode="click" closeonclick="true" paddingsize="small" options="[object Object]" class="uk-width-large">
-  <ul uk-grid="" class="uk-grid-small uk-text-center">
-    <li class="uk-width-1-3">
-      <router-link-stub to="/files" tag="a" ariacurrentvalue="page" event="click">
-        <oc-icon-stub name="folder" accessiblelabel="" type="span" size="xlarge" variation="passive"></oc-icon-stub> <span class="uk-display-block">Files</span>
+  <ul class="oc-p-xs">
+    <li class="oc-pt-s oc-pb-s" style="list-style: none;">
+      <router-link-stub to="/files" tag="a" ariacurrentvalue="page" event="click" style="display: inline-flex; vertical-align: top; gap: 10px;">
+        <oc-icon-stub name="folder" accessiblelabel="" type="span" size="medium" variation="passive"></oc-icon-stub> <span>Files</span>
       </router-link-stub>
     </li>
     <li class="oc-pt-s oc-pb-s" style="list-style: none;"><a target="_blank" href="http://some.org" style="display: inline-flex; vertical-align: top; gap: 10px;">
diff --git a/tests/acceptance/pageObjects/webPage.js b/tests/acceptance/pageObjects/webPage.js
index 28f0a9f0d36..8ab7944fb1d 100644
--- a/tests/acceptance/pageObjects/webPage.js
+++ b/tests/acceptance/pageObjects/webPage.js
@@ -278,7 +278,7 @@ module.exports = {
       selector: '.oc-app-navigation-toggle'
     },
     menuItem: {
-      selector: '//nav[contains(@class, "oc-sidebar-nav")]/ul/li/a[contains(text(),"%s")]',
+      selector: '//nav[contains(@class, "oc-sidebar-nav")]/ul/li/a/span[contains(text(),"%s")]',
       locateStrategy: 'xpath'
     },
     logoutMenuItem: {
diff --git a/tests/e2e/cucumber/step_definitions/app.files.ts b/tests/e2e/cucumber/step_definitions/app.files.ts
index b1a87df3267..02b7c98d9cf 100644
--- a/tests/e2e/cucumber/step_definitions/app.files.ts
+++ b/tests/e2e/cucumber/step_definitions/app.files.ts
@@ -74,6 +74,7 @@ When(
   ) {
     const actor = this.actorsEnvironment.getActor({ id: stepUser })
     const { allFiles: allFilesPage } = new FilesPage({ actor })
+    // await allFilesPage.navigate()
 
     const shareInfo = stepTable.hashes().reduce((acc, stepRow) => {
       const { user, resource, role } = stepRow
@@ -234,9 +235,8 @@ Then(
     const { allFiles: allFilesPage } = new FilesPage({ actor })
     const resources = stepTable.raw().map((f) => f[0])
 
-    await allFilesPage.navigate()
-
     for (const resource of resources) {
+      await allFilesPage.navigate()
       const resourceExist = await allFilesPage.resourceExist({ name: resource })
 
       if (actionType === 'exist' && !resourceExist) {
@@ -244,9 +244,8 @@ Then(
       } else if (actionType === 'does not exist' && resourceExist) {
         throw new Error(`resource was found: "${resource}"`)
       }
-
-      await allFilesPage.navigate()
     }
+    await allFilesPage.navigate()
   }
 )
 
diff --git a/tests/e2e/support/page/files/allFiles.ts b/tests/e2e/support/page/files/allFiles.ts
index 70978fadc6e..bc5624c7bb3 100644
--- a/tests/e2e/support/page/files/allFiles.ts
+++ b/tests/e2e/support/page/files/allFiles.ts
@@ -13,8 +13,7 @@ export class AllFilesPage {
   async navigate(): Promise<void> {
     const { page } = this.actor
 
-    const allFilesBtn = page.locator('a[href="#/files/list/all"]')
-    await allFilesBtn.click()
+    await page.locator('a[href="#/files/list/all"] .text').click()
   }
 
   async createFolder({ name }: { name: string }): Promise<void> {

From a3fb367ca4a337d32e965077d16619c7509c6b00 Mon Sep 17 00:00:00 2001
From: pwengerter <pascal@wengerter.info>
Date: Fri, 24 Dec 2021 12:17:48 +0100
Subject: [PATCH 09/15] Bump ODS to 12.0.0-alpha4

---
 packages/web-runtime/package.json |  2 +-
 yarn.lock                         | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/web-runtime/package.json b/packages/web-runtime/package.json
index 987027de7a3..668c6f7acbd 100644
--- a/packages/web-runtime/package.json
+++ b/packages/web-runtime/package.json
@@ -14,7 +14,7 @@
     "lodash-es": "^4.17.21",
     "luxon": "^2.0.0",
     "oidc-client": "1.11.5",
-    "owncloud-design-system": "12.0.0-alpha3",
+    "owncloud-design-system": "12.0.0-alpha4",
     "owncloud-sdk": "1.0.0-2296",
     "p-queue": "^6.1.1",
     "popper-max-size-modifier": "^0.2.0",
diff --git a/yarn.lock b/yarn.lock
index eb14dfc9863..f9e188bafbc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10878,9 +10878,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"owncloud-design-system@npm:12.0.0-alpha3":
-  version: 12.0.0-alpha3
-  resolution: "owncloud-design-system@npm:12.0.0-alpha3"
+"owncloud-design-system@npm:12.0.0-alpha4":
+  version: 12.0.0-alpha4
+  resolution: "owncloud-design-system@npm:12.0.0-alpha4"
   peerDependencies:
     "@popperjs/core": ^2.4.0
     filesize: ^8.0.0
@@ -10897,7 +10897,7 @@ __metadata:
     vue-inline-svg: ^2.0.0
     vue-select: ^3.12.0
     webfontloader: ^1.6.28
-  checksum: 1fa02a2851bf0b8d11e1efe435fae4943d0afe1828255dbe96d6e50dc2a4bb77294d25fbc37bbe3118669ea96e0d86a6e26bf41fe19baa0e6f6f12d8e8ccd4d3
+  checksum: 162a6f59b72aa2a2bbf033df0663cb43ab570948bba8ae42f8d3cf66e7a99dc4e591d9a32c7bebac86cb64994e14f5190a88a256aff78769523095f286a71601
   languageName: node
   linkType: hard
 
@@ -15359,7 +15359,7 @@ typescript@^4.3.2:
     lodash-es: ^4.17.21
     luxon: ^2.0.0
     oidc-client: 1.11.5
-    owncloud-design-system: 12.0.0-alpha3
+    owncloud-design-system: 12.0.0-alpha4
     owncloud-sdk: 1.0.0-2296
     p-queue: ^6.1.1
     popper-max-size-modifier: ^0.2.0

From 775e6f656f835bc99730a349b1996944eb2f25c7 Mon Sep 17 00:00:00 2001
From: pwengerter <pascal@wengerter.info>
Date: Fri, 24 Dec 2021 13:08:04 +0100
Subject: [PATCH 10/15] Remove unused OcAppContent component

---
 .../src/components/OcAppContent.vue           | 15 -----------
 .../unit/components/OcAppContent.spec.js      | 25 -------------------
 2 files changed, 40 deletions(-)
 delete mode 100644 packages/web-runtime/src/components/OcAppContent.vue
 delete mode 100644 packages/web-runtime/tests/unit/components/OcAppContent.spec.js

diff --git a/packages/web-runtime/src/components/OcAppContent.vue b/packages/web-runtime/src/components/OcAppContent.vue
deleted file mode 100644
index 839047f3d1c..00000000000
--- a/packages/web-runtime/src/components/OcAppContent.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <div class="oc-app-content">
-    <slot name="content"></slot>
-  </div>
-</template>
-<script>
-export default {
-  data: () => ({})
-}
-</script>
-<style scoped>
-.oc-app-content {
-  overflow-y: scroll;
-}
-</style>
diff --git a/packages/web-runtime/tests/unit/components/OcAppContent.spec.js b/packages/web-runtime/tests/unit/components/OcAppContent.spec.js
deleted file mode 100644
index f618204a448..00000000000
--- a/packages/web-runtime/tests/unit/components/OcAppContent.spec.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { shallowMount } from '@vue/test-utils'
-import OcAppContent from 'web-runtime/src/components/OcAppContent.vue'
-
-const selectors = {
-  appContent: '.oc-app-content'
-}
-
-describe('OcAppContent component', () => {
-  it('should render provided element in the slot', () => {
-    const wrapper = getShallowWrapper()
-    const appContent = wrapper.find(selectors.appContent)
-    const slotEl = appContent.find('p')
-
-    expect(slotEl.exists()).toBeTruthy()
-    expect(slotEl.text()).toEqual('Some content')
-  })
-})
-
-function getShallowWrapper() {
-  return shallowMount(OcAppContent, {
-    slots: {
-      content: '<p>Some content</p>'
-    }
-  })
-}

From 0b286fe6b007ca1d8f5cbc14ba49304248eeae5a Mon Sep 17 00:00:00 2001
From: pwengerter <pascal@wengerter.info>
Date: Mon, 27 Dec 2021 10:39:53 +0100
Subject: [PATCH 11/15] Remove vue2-touch-events dependency

---
 changelog/unreleased/enhancement-redesign-main-layout | 3 ++-
 packages/web-runtime/package.json                     | 1 -
 packages/web-runtime/src/App.vue                      | 1 -
 packages/web-runtime/src/defaults/vue.js              | 2 --
 yarn.lock                                             | 8 --------
 5 files changed, 2 insertions(+), 13 deletions(-)

diff --git a/changelog/unreleased/enhancement-redesign-main-layout b/changelog/unreleased/enhancement-redesign-main-layout
index 206a609def3..9d82fc97bba 100644
--- a/changelog/unreleased/enhancement-redesign-main-layout
+++ b/changelog/unreleased/enhancement-redesign-main-layout
@@ -2,6 +2,7 @@ Enhancement: Redesign main layout
 
 We've started to implement the redesign by adjusting the sidebar,
 topbar and appswitcher.
+While doing so, we also removed the `vue2-touch-events` dependency.
 
 https://github.com/owncloud/web/issues/6036
-https://github.com/owncloud/web/pull/6086
\ No newline at end of file
+https://github.com/owncloud/web/pull/6086
diff --git a/packages/web-runtime/package.json b/packages/web-runtime/package.json
index 668c6f7acbd..d51276d0713 100644
--- a/packages/web-runtime/package.json
+++ b/packages/web-runtime/package.json
@@ -38,7 +38,6 @@
     "vue-router": "^3.1.3",
     "vue-scrollto": "^2.15.0",
     "vue-select": "^3.13.2",
-    "vue2-touch-events": "^3.2.2",
     "vuex": "^3.6.2",
     "vuex-extensions": "^1.1.5",
     "vuex-persist": "3.1.3",
diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
index 765e74bcc72..77da8fe07f8 100644
--- a/packages/web-runtime/src/App.vue
+++ b/packages/web-runtime/src/App.vue
@@ -22,7 +22,6 @@
           <sidebar-nav
             v-show="isSidebarVisible"
             id="web-nav-sidebar"
-            v-touch:swipe.left="handleNavSwipe"
             class="oc-app-navigation"
             :accessible-label-header="$gettext('Sidebar header')"
             :accessible-label-nav="$gettext('Sidebar navigation menu')"
diff --git a/packages/web-runtime/src/defaults/vue.js b/packages/web-runtime/src/defaults/vue.js
index 6c41cf880d0..fa86623564f 100644
--- a/packages/web-runtime/src/defaults/vue.js
+++ b/packages/web-runtime/src/defaults/vue.js
@@ -11,7 +11,6 @@ import VueEvents from 'vue-events'
 import VueScrollTo from 'vue-scrollto'
 import VueResize from 'vue-resize'
 import VueMeta from 'vue-meta'
-import Vue2TouchEvents from 'vue2-touch-events'
 import PortalVue from 'portal-vue'
 import AsyncComputed from 'vue-async-computed'
 import { Drag, Drop } from 'vue-drag-drop'
@@ -31,7 +30,6 @@ Vue.use(VueMeta, {
   refreshOnceOnNavigation: true
 })
 Vue.use(ChunkedUpload)
-Vue.use(Vue2TouchEvents)
 Vue.use(PortalVue)
 Vue.use(AsyncComputed)
 
diff --git a/yarn.lock b/yarn.lock
index f9e188bafbc..52592f936e1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15244,13 +15244,6 @@ typescript@^4.3.2:
   languageName: node
   linkType: hard
 
-"vue2-touch-events@npm:^3.2.2":
-  version: 3.2.2
-  resolution: "vue2-touch-events@npm:3.2.2"
-  checksum: 6816a5edc6ffcbcbdf64d271bbee90f9674e31e2b94b96350b0e144f14cff3450ce106acb2c59a8c8d7c118cabe0e87327ee2e69307735a808a5f7be049b68e1
-  languageName: node
-  linkType: hard
-
 "vue@npm:^2.6.10":
   version: 2.6.14
   resolution: "vue@npm:2.6.14"
@@ -15383,7 +15376,6 @@ typescript@^4.3.2:
     vue-router: ^3.1.3
     vue-scrollto: ^2.15.0
     vue-select: ^3.13.2
-    vue2-touch-events: ^3.2.2
     vuex: ^3.6.2
     vuex-extensions: ^1.1.5
     vuex-persist: 3.1.3

From 7d4f84aff84ba0ca0efdde438342ab6797e88a2d Mon Sep 17 00:00:00 2001
From: pwengerter <pascal@wengerter.info>
Date: Tue, 28 Dec 2021 17:32:58 +0100
Subject: [PATCH 12/15] Simplify new SidebarNav structure & usage

---
 __fixtures__/sidebarNavItems.js               |  48 +++
 packages/web-app-files/src/App.vue            |   2 -
 packages/web-runtime/src/App.vue              | 376 ++----------------
 .../src/components/FeedbackLink.vue           |   2 +-
 .../src/components/SidebarNav/SidebarNav.vue  | 152 +++----
 .../components/SidebarNav/SidebarNavItem.vue  | 126 +++---
 .../web-runtime/src/components/TopBar.vue     |  29 +-
 .../web-runtime/src/components/UserMenu.vue   |  18 +-
 .../components/SidebarNav/SidebarNav.spec.js  |  71 ++++
 .../SidebarNav/SidebarNavItem.spec.js         |  48 +++
 .../__snapshots__/SidebarNav.spec.js.snap     |  49 +++
 .../__snapshots__/SidebarNavItem.spec.js.snap |  13 +
 .../__snapshots__/FeedbackLink.spec.js.snap   |   2 +-
 .../__snapshots__/TopBar.spec.js.snap         |  10 +-
 tests/acceptance/pageObjects/webPage.js       |   2 +-
 .../stepDefinitions/visualContext.js          |   2 +-
 16 files changed, 411 insertions(+), 539 deletions(-)
 create mode 100644 __fixtures__/sidebarNavItems.js
 create mode 100644 packages/web-runtime/tests/unit/components/SidebarNav/SidebarNav.spec.js
 create mode 100644 packages/web-runtime/tests/unit/components/SidebarNav/SidebarNavItem.spec.js
 create mode 100644 packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.js.snap
 create mode 100644 packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.js.snap

diff --git a/__fixtures__/sidebarNavItems.js b/__fixtures__/sidebarNavItems.js
new file mode 100644
index 00000000000..9975744fac1
--- /dev/null
+++ b/__fixtures__/sidebarNavItems.js
@@ -0,0 +1,48 @@
+export default [
+  {
+    name: "All files",
+    iconMaterial: "folder",
+    route: {
+      name: "files-personal",
+      path: "/files/list/all"
+    },
+    active: true
+  },
+  {
+    name: "Shared with me",
+    iconMaterial: "shared-with-me",
+    route: {
+      name: "files-shared-with-me",
+      path: "/files/list/shared-with-me"
+    },
+    active: false
+  },
+  {
+    name: "Shared with others",
+    iconMaterial: "shared-with-others",
+    route: {
+      name: "files-shared-with-others",
+      path: "/files/list/shared-with-others"
+    },
+    active: false
+  },
+  {
+    name: "Shared via link",
+    iconMaterial: "link",
+    route: {
+      name: "files-shared-via-link",
+      path: "/files/list/shared-via-link"
+    },
+    active: false
+  },
+  {
+    name: "Deleted files",
+    iconMaterial: "delete",
+    route: {
+      name: "files-trashbin",
+      path: "/files/list/trash-bin"
+    },
+    active: false
+  }
+]
+
diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index 566fb697067..3f175361e0e 100644
--- a/packages/web-app-files/src/App.vue
+++ b/packages/web-app-files/src/App.vue
@@ -110,8 +110,6 @@ main {
 }
 
 .files-list-wrapper {
-  height: 100%;
-  max-height: 100%;
   overflow-y: auto;
   display: grid;
   grid-template-columns: 1fr;
diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
index 77da8fe07f8..4a32eebe61d 100644
--- a/packages/web-runtime/src/App.vue
+++ b/packages/web-runtime/src/App.vue
@@ -16,87 +16,21 @@
     <template v-else-if="!showHeader">
       <router-view name="fullscreen" />
     </template>
-    <div v-else id="web-content" key="core-content" class="uk-flex uk-flex-stretch">
-      <transition :name="appNavigationAnimation">
-        <focus-trap v-if="isSidebarVisible" :active="isSidebarFixed && appNavigationVisible">
-          <sidebar-nav
-            v-show="isSidebarVisible"
-            id="web-nav-sidebar"
-            class="oc-app-navigation"
-            :accessible-label-header="$gettext('Sidebar header')"
-            :accessible-label-nav="$gettext('Sidebar navigation menu')"
-            :accessible-label-footer="$gettext('Sidebar footer')"
-            :class="sidebarClasses"
-          >
-            <template #header>
-              <div class="uk-text-center">
-                <oc-button
-                  v-if="isSidebarFixed"
-                  variation="inverse"
-                  appearance="raw"
-                  class="web-sidebar-btn-close"
-                  :aria-label="$gettext('Close sidebar')"
-                  @click="toggleAppNavigationVisibility"
-                >
-                  <oc-icon name="close" />
-                </oc-button>
-              </div>
-            </template>
-            <template #nav>
-              <oc-list>
-                <sidebar-nav-item :class="toggleSidebarButtonClass">
-                  <oc-button
-                    variation="inverse"
-                    appearance="raw"
-                    class="toggle-sidebar-button"
-                    :aria-label="$gettext('Toggle sidebar')"
-                    @click="toggleSidebarButtonClick"
-                  >
-                    <oc-icon size="large" :name="toggleSidebarButtonIcon" />
-                  </oc-button>
-                </sidebar-nav-item>
-                <sidebar-nav-item
-                  v-for="(link, index) in sidebarNavItems"
-                  :id="`nav-item-${index}`"
-                  :key="link.route.path"
-                  :target="link.route.path"
-                  :active="link.active"
-                  :icon="link.icon || link.iconMaterial"
-                  :collapsed="navigation.closed"
-                >
-                  <span :class="{ text: true, 'text-invisible': navigation.closed }">
-                    {{ link.name }}
-                  </span>
-                  <span class="hover-blob" />
-                  <span
-                    v-if="index === 0"
-                    class="active-blob"
-                    :style="activeBlobStyle"
-                    @click.prevent.stop
-                  />
-                </sidebar-nav-item>
-              </oc-list>
-            </template>
-            <template v-if="sidebar.sidebarFooterContentComponent" #footer>
-              <component :is="sidebar.sidebarFooterContentComponent" />
-            </template>
-          </sidebar-nav>
-        </focus-trap>
-      </transition>
-      <div class="uk-width-expand web-content-container">
-        <top-bar
-          v-if="!publicPage() && !$route.meta.verbose"
-          id="oc-topbar"
-          class="uk-width-expand"
-          :applications-list="applicationsList"
-          :active-notifications="activeNotifications"
-          :user-id="user.username || user.id"
-          :user-display-name="user.displayname"
-          @toggleAppNavigationVisibility="toggleAppNavigationVisibility"
-        />
-        <div id="main">
-          <message-bar :active-messages="activeMessages" @deleteMessage="$_deleteMessage" />
-          <router-view class="oc-app-container" name="app" />
+    <div v-else id="web-content">
+      <top-bar
+        v-if="!publicPage() && !$route.meta.verbose"
+        :applications-list="applicationsList"
+        :active-notifications="activeNotifications"
+        :user-id="user.username || user.id"
+        :user-display-name="user.displayname"
+      />
+      <div id="main">
+        <message-bar :active-messages="activeMessages" @deleteMessage="$_deleteMessage" />
+        <div id="main-app-area" class="oc-my-m oc-mx-s uk-flex">
+          <transition>
+            <sidebar-nav :nav-items="sidebarNavItems" />
+          </transition>
+          <router-view class="oc-app-container uk-width-1-1 oc-py-s oc-ps-s" name="app" />
         </div>
       </div>
     </div>
@@ -134,23 +68,18 @@ import { mapGetters, mapState, mapActions } from 'vuex'
 import TopBar from './components/TopBar.vue'
 import MessageBar from './components/MessageBar.vue'
 import SkipTo from './components/SkipTo.vue'
-import { FocusTrap } from 'focus-trap-vue'
 import { getBackendVersion, getWebVersion } from './container/versions'
 import SidebarNav from './components/SidebarNav/SidebarNav.vue'
-import SidebarNavItem from './components/SidebarNav/SidebarNavItem.vue'
 
 export default {
   components: {
     MessageBar,
     TopBar,
     SkipTo,
-    FocusTrap,
-    SidebarNav,
-    SidebarNavItem
+    SidebarNav
   },
   data() {
     return {
-      appNavigationVisible: false,
       $_notificationsInterval: null,
       windowWidth: 0,
       announcement: '',
@@ -158,7 +87,7 @@ export default {
     }
   },
   computed: {
-    ...mapState(['route', 'user', 'modal', 'sidebar', 'navigation']),
+    ...mapState(['route', 'user', 'modal', 'sidebar']),
     ...mapGetters([
       'configuration',
       'activeNotifications',
@@ -219,7 +148,6 @@ export default {
 
         return item.enabled(this.capabilities)
       })
-
       return items.map((item) => ({
         ...item,
         name: this.$gettext(item.name),
@@ -227,37 +155,8 @@ export default {
       }))
     },
 
-    sidebarClasses() {
-      if (this.appNavigationVisible) {
-        return ''
-      }
-      if (this.navigation.closed) {
-        return 'uk-visible@l oc-app-navigation-collapsed'
-      }
-      return 'uk-visible@l'
-    },
-
-    isSidebarFixed() {
-      return this.windowWidth <= 960
-    },
-
     isSidebarVisible() {
-      if (this.sidebarNavItems.length === 0) {
-        return false
-      }
-      return this.windowWidth >= 1200 || this.appNavigationVisible
-    },
-
-    appNavigationAnimation() {
-      if (this.windowWidth > 1200) {
-        return null
-      }
-
-      if (this.windowWidth > 960) {
-        return 'push-right'
-      }
-
-      return 'fade'
+      return this.sidebarNavItems.length && this.windowWidth >= 1200
     },
 
     selectedLanguage() {
@@ -266,16 +165,6 @@ export default {
         bundle: 'profile',
         setting: 'language'
       })
-    },
-
-    toggleSidebarButtonClass() {
-      return this.navigation.closed
-        ? 'web-sidebar-btn-toggle-collapsed'
-        : 'web-sidebar-btn-toggle-expanded oc-pr-s'
-    },
-
-    toggleSidebarButtonIcon() {
-      return this.navigation.closed ? 'chevron_right' : 'chevron_left'
     }
   },
   watch: {
@@ -284,19 +173,6 @@ export default {
       handler: function (to) {
         this.announceRouteChange(to)
         document.title = this.extractPageTitleFromRoute(to)
-        this.appNavigationVisible = false
-      }
-    },
-    sidebarNavItems: {
-      immediate: true,
-      deep: true,
-      handler: function (sidebarNavItems) {
-        sidebarNavItems.forEach((item, index) => {
-          if (!item.active) return
-          const isRendered = Object.keys(this.activeBlobStyle).length !== 0
-          if (isRendered) return this.animateBlob(index)
-          this.updateNavigationHighlight(sidebarNavItems)
-        })
       }
     },
     capabilities: {
@@ -363,20 +239,7 @@ export default {
   },
 
   methods: {
-    ...mapActions(['fetchNotifications', 'deleteMessage', 'openNavigation', 'closeNavigation']),
-
-    updateNavigationHighlight(sidebarNavItems) {
-      sidebarNavItems.forEach((item, index) => {
-        if (!item.active) return
-        setTimeout(() => {
-          this.animateBlob(index, 0)
-        }, 1)
-      })
-    },
-    toggleSidebarButtonClick() {
-      if (this.navigation.closed) return this.openNavigation()
-      return this.closeNavigation()
-    },
+    ...mapActions(['fetchNotifications', 'deleteMessage']),
 
     focusModal(component, event) {
       this.focus({
@@ -384,20 +247,6 @@ export default {
       })
     },
 
-    hideAppNavigation() {
-      this.appNavigationVisible = false
-    },
-
-    toggleAppNavigationVisibility() {
-      this.appNavigationVisible = !this.appNavigationVisible
-
-      if (this.appNavigationVisible) {
-        this.$nextTick(() => {
-          this.$refs.navigationSidebarLogo.$el.focus()
-        })
-      }
-    },
-
     $_updateNotifications() {
       this.fetchNotifications(this.$client).catch((error) => {
         console.error('Error while loading notifications: ', error)
@@ -410,22 +259,7 @@ export default {
     },
 
     onResize() {
-      const width = window.innerWidth
-
-      // Reset navigation visibility in case of switching back to permanently visible sidebar
-      if (width >= 1200) {
-        this.appNavigationVisible = false
-      }
-
-      this.windowWidth = width
-    },
-
-    handleNavSwipe() {
-      if (this.windowWidth <= 960 || this.windowWidth > 1200) {
-        return
-      }
-
-      this.appNavigationVisible = false
+      this.windowWidth = window.innerWidth
     },
 
     announceRouteChange(route) {
@@ -455,35 +289,6 @@ export default {
       }
 
       return titleSegments.join(' - ')
-    },
-
-    animateBlob(index, duration = 0.26) {
-      const currentElement = this.getNavigationElement(0)
-      const targetElement = this.getNavigationElement(index)
-      const distance = this.getDistanceBetweenElements(currentElement, targetElement)
-
-      this.activeBlobStyle.opacity = 1
-      this.activeBlobStyle.transform = `translateY(${distance}px)`
-      this.activeBlobStyle['transition-duration'] = `${duration}s`
-      this.$forceUpdate()
-    },
-
-    getNavigationElement(index) {
-      return document.getElementById(`nav-item-${index}`)
-    },
-
-    getPositionAtCenter(element) {
-      const { top, left, width, height } = element.getBoundingClientRect()
-      return {
-        x: left + width / 2,
-        y: top + height / 2
-      }
-    },
-
-    getDistanceBetweenElements(a, b) {
-      const aPosition = this.getPositionAtCenter(a)
-      const bPosition = this.getPositionAtCenter(b)
-      return Math.hypot(aPosition.x - bPosition.x, aPosition.y - bPosition.y)
     }
   }
 }
@@ -498,110 +303,18 @@ body,
 }
 
 #web {
-  background-color: var(--oc-color-background-default);
-}
-
-#web-nav-sidebar {
-  transition: all 0.35s cubic-bezier(0.34, 0.11, 0, 1.12);
-  .oc-icon {
-    z-index: 2;
-  }
-  .text {
-    z-index: 2;
-    opacity: 1;
-    transition: all 0.35s ease-out;
-    overflow: hidden;
-  }
-  .text-invisible {
-    opacity: 0 !important;
-    transition: 0s;
-    margin-left: var(--oc-space-medium) !important;
-  }
-  .toggle-sidebar-button {
-    padding: 4px;
-    border-radius: 5px;
-    transition: all 0.2s ease-out;
-    &:hover {
-      background: #383838;
-    }
-  }
-  .active-blob {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border: 0;
-    opacity: 0;
-    background: linear-gradient(90deg, #0869de 0%, #4e85c8 100%);
-    z-index: 1;
-    transition: transform 0.3s cubic-bezier(0.51, 0.06, 0.42, 1.26);
-    border-radius: 5px;
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      width: 44px;
-      box-shadow: 2px 0px 6px rgba(0, 0, 0, 0.14);
-    }
-  }
-  .hover-blob {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border: 0;
-    z-index: 0;
-    transition: all 0.2s ease-out;
-  }
-  .hover-blob:hover,
-  .text:hover + .hover-blob,
-  .oc-icon:hover ~ .hover-blob {
-    background-color: #202020;
-    border-radius: 5px;
-  }
-  .icon-expanded {
-    margin-right: var(--oc-space-medium);
-  }
-}
-
-#oc-topbar {
-  position: sticky;
-  top: 0;
-  height: 60px;
-  z-index: 2;
   background-color: #202020;
-  margin-left: 0px !important;
 }
 
-.web-content-container {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: max-content 1fr;
-  gap: 0px 0px;
-  grid-template-areas:
-    'header'
-    'main';
+.oc-app-container {
+  min-height: 85vh;
+  max-height: 85vh !important;
+  overflow-y: scroll;
 }
 
-#main {
-  position: relative;
-  grid-area: main;
-  overflow-y: auto;
-  margin-top: 64px;
-}
-
-.oc-app-navigation-collapsed {
-  width: 75px !important;
-}
-
-.oc-app-navigation {
-  position: sticky;
-  top: 0;
-  z-index: 1;
+#main-app-area {
+  background-color: var(--oc-color-background-default);
+  border-radius: 15px;
 }
 
 .loading-overlay {
@@ -620,39 +333,4 @@ body,
     }
   }
 }
-
-@media only screen and (max-width: 960px) {
-  #web-nav-sidebar {
-    height: 100%;
-    left: 0;
-    position: fixed;
-    top: 0;
-    width: 100%;
-    z-index: 3;
-  }
-}
-
-.web-sidebar-btn-close {
-  position: absolute;
-  right: var(--oc-space-medium);
-  top: var(--oc-space-medium);
-  z-index: 3;
-}
-
-.web-sidebar-btn-apps {
-  position: absolute;
-  left: var(--oc-space-medium);
-  top: calc(var(--oc-space-medium) + 9px);
-  z-index: 3;
-  margin-left: var(--oc-space-small);
-}
-.web-sidebar-btn-toggle-expanded {
-  text-align: right;
-  float: right;
-  width: 100%;
-  display: block;
-}
-.web-sidebar-btn-toggle-collapsed {
-  text-align: center;
-}
 </style>
diff --git a/packages/web-runtime/src/components/FeedbackLink.vue b/packages/web-runtime/src/components/FeedbackLink.vue
index 19c0005a39a..0f3db20a3cc 100644
--- a/packages/web-runtime/src/components/FeedbackLink.vue
+++ b/packages/web-runtime/src/components/FeedbackLink.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="uk-flex uk-flex-middle uk-visible@m">
+  <div class="uk-flex uk-visible@m">
     <oc-button
       v-oc-tooltip="description"
       type="a"
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
index d6b2a3ec95e..8a30ec005c4 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
@@ -1,97 +1,109 @@
-<template functional>
-  <div
-    :ref="data.ref"
-    class="oc-sidebar"
-    :class="[data.staticClass, data.class]"
-    v-bind="data.attrs"
-  >
-    <header
-      v-if="slots().header"
-      class="oc-sidebar-header uk-flex uk-flex-middle"
-      :aria-label="props.accessibleLabelHeader"
+<template>
+  <div id="web-nav-sidebar" :class="sidebarClasses">
+    <oc-button
+      variation="inverse"
+      appearance="raw"
+      :class="toggleSidebarButtonClass"
+      class="toggle-sidebar-button oc-py-s"
+      :aria-label="$gettext('Toggle sidebar')"
+      @click="toggleSidebarButtonClick"
     >
-      <!-- @slot Header of the sidebar -->
-      <slot name="header" />
-    </header>
-    <nav v-if="slots().nav" class="oc-sidebar-nav" :aria-label="props.accessibleLabelNav">
-      <!-- @slot Main content of the sidebar -->
-      <slot name="nav" />
-    </nav>
-    <footer
-      v-if="slots().footer"
-      class="oc-sidebar-footer"
-      :aria-label="props.accessibleLabelFooter"
+      <oc-icon size="large" :name="toggleSidebarButtonIcon" />
+    </oc-button>
+    <nav
+      class="oc-sidebar-nav oc-my-l oc-px-xs"
+      :aria-label="$gettext('Sidebar top navigation menu')"
     >
-      <!-- @slot Footer of the sidebar -->
-      <slot name="footer" />
-    </footer>
+      <oc-list>
+        <sidebar-nav-item
+          v-for="(link, index) in navItems"
+          :id="`nav-item-${index}`"
+          :key="link.route.path"
+          :target="link.route.path"
+          :active="link.active"
+          :icon="link.icon || link.iconMaterial"
+          :name="link.name"
+          :collapsed="navigation.closed"
+        />
+      </oc-list>
+    </nav>
+    <!-- @slot bottom content of the sidebar -->
+    <slot name="bottom" />
   </div>
 </template>
 
 <script>
+import { mapState, mapActions } from 'vuex'
+import SidebarNavItem from './SidebarNavItem.vue'
+
 export default {
+  components: {
+    SidebarNavItem
+  },
   props: {
-    /**
-     * Accessible label for the header inside the sidebar
-     */
-    accessibleLabelHeader: {
-      type: String,
+    navItems: {
+      type: Array,
       required: true
+    }
+  },
+  computed: {
+    ...mapState(['sidebar', 'navigation']),
+
+    sidebarClasses() {
+      if (this.navigation.closed) {
+        return 'uk-visible@l oc-app-navigation-collapsed'
+      }
+      return 'uk-visible@l'
     },
-    /**
-     * Accessible label for the navigation inside the sidebar
-     */
-    accessibleLabelNav: {
-      type: String,
-      required: true
+
+    toggleSidebarButtonClass() {
+      return this.navigation.closed
+        ? 'toggle-sidebar-button-collapsed'
+        : 'toggle-sidebar-button-expanded oc-pr-s'
     },
-    /**
-     * Accessible label for the footer inside the sidebar
-     */
-    accessibleLabelFooter: {
-      type: String,
-      required: true
+
+    toggleSidebarButtonIcon() {
+      return this.navigation.closed ? 'chevron_right' : 'chevron_left'
+    }
+  },
+  methods: {
+    ...mapActions(['openNavigation', 'closeNavigation']),
+
+    toggleSidebarButtonClick() {
+      if (this.navigation.closed) return this.openNavigation()
+      return this.closeNavigation()
     }
   }
 }
 </script>
 
 <style lang="scss">
-.oc-sidebar {
-  background-color: var(--oc-color-swatch-brand-default);
-  box-sizing: border-box;
+#web-nav-sidebar {
+  background-color: #2d2d2d;
+  border-top-left-radius: 15px;
+  border-bottom-left-radius: 15px;
+  // box-shadow: 5px 0px 25px rgba(0, 0, 0, 0.3);
   color: var(--oc-color-text-inverse);
   display: flex;
   flex-direction: column;
-  overflow: hidden auto;
+  position: sticky;
+  top: 0;
+  transition: all 0.35s cubic-bezier(0.34, 0.11, 0, 1.12);
   width: var(--oc-size-width-medium);
-  background-color: #202020;
-  overflow: visible;
-  z-index: var(--oc-z-index-modal);
 
-  &-header {
-    padding: 0 var(--oc-space-medium);
-    height: 64px;
-    flex-shrink: 0;
+  .toggle-sidebar-button {
+    transition: all 0.2s ease-out;
+    &:hover {
+      border-top-left-radius: 15px;
+      background: #383838;
+    }
   }
-
-  &-nav {
-    flex: auto;
-    margin-bottom: var(--oc-space-large);
-    background-color: #2d2d2d;
-    border-radius: 15px;
-    padding-top: var(--oc-space-large);
-    margin-left: var(--oc-space-small);
-    box-shadow: 5px 0px 25px rgba(0, 0, 0, 0.3);
+  .toggle-sidebar-button-expanded {
+    justify-content: flex-end !important;
   }
+}
 
-  &-footer {
-    padding: 0 var(--oc-space-medium);
-
-    p {
-      color: inherit;
-      margin-bottom: 0;
-    }
-  }
+.oc-app-navigation-collapsed {
+  width: 75px !important;
 }
 </style>
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
index 51a0f84bea2..62f467ade9c 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
@@ -1,44 +1,24 @@
-<template functional>
-  <li
-    v-bind="data.attrs"
-    :ref="data.ref"
-    :class="[
-      'oc-sidebar-nav-item',
-      'oc-pb-xs',
-      'oc-pl-s',
-      'oc-pr-s',
-      { 'oc-sidebar-nav-item-isolated': props.isolate },
-      { 'oc-sidebar-nav-item-parent': slots().subnav },
-      data.staticClass,
-      data.class
-    ]"
-    :aria-current="props.active ? 'page' : null"
-  >
+<template>
+  <li class="oc-sidebar-nav-item oc-pb-xs oc-px-s" :aria-current="active ? 'page' : null">
     <router-link
-      v-if="props.target"
-      :id="props.id"
-      :class="['oc-sidebar-nav-item-link', { active: props.active }]"
-      :to="props.target"
+      :id="id"
+      v-oc-tooltip="toolTip"
+      :class="['oc-sidebar-nav-item-link', { active: active }]"
+      :to="target"
     >
-      <oc-icon
-        :class="{ 'oc-sidebar-nav-item-icon': !props.collapsed }"
-        :name="props.icon"
-        variation="inverse"
-        aria-hidden="true"
-      />
-      <slot name="default" />
+      <oc-icon :name="icon" variation="inverse" aria-hidden="true" />
+      <span class="oc-ml-m text" :class="{ 'text-invisible': collapsed }" v-text="name" />
     </router-link>
-    <oc-button v-else appearance="raw" @click="$emit('click', $event)">
-      <slot name="default" />
-    </oc-button>
-    <oc-list v-if="slots().subnav" class="oc-sidebar-nav-item-list">
-      <slot name="subnav" />
-    </oc-list>
   </li>
 </template>
 <script>
 export default {
   props: {
+    name: {
+      type: String,
+      required: false,
+      default: ''
+    },
     active: {
       type: Boolean,
       required: false,
@@ -54,11 +34,6 @@ export default {
       required: true,
       default: ''
     },
-    isolate: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
     collapsed: {
       type: Boolean,
       required: false,
@@ -69,58 +44,49 @@ export default {
       required: false,
       default: ''
     }
+  },
+  computed: {
+    toolTip() {
+      if (this.collapsed) {
+        return this.$gettext(`Navigate to ${this.name} page`)
+      } else {
+        return ''
+      }
+    }
   }
 }
 </script>
 
 <style lang="scss">
-.oc-sidebar-nav-item {
-  &-link {
-    position: relative;
-    align-items: center;
-    -webkit-user-drag: none;
-    color: var(--oc-color-border);
-    display: flex;
-    font-weight: 400;
-    padding: var(--oc-space-small) var(--oc-space-small);
-    border-radius: 5px;
-    white-space: nowrap;
-    user-select: none;
-
-    &.active {
-      color: var(--oc-color-text-inverse);
-      border: 0px;
-    }
+.oc-sidebar-nav-item-link {
+  align-items: center;
+  color: var(--oc-color-border);
+  display: flex;
+  font-weight: 400;
+  padding: var(--oc-space-small) var(--oc-space-small);
+  border-radius: 5px;
+  white-space: nowrap;
+  user-select: none;
 
-    .oc-icon > svg {
-      fill: var(--oc-color-border) !important;
-    }
-
-    &.active > .oc-icon > svg {
-      fill: var(--oc-color-text-inverse) !important;
-    }
-
-    &:hover {
-      text-decoration: none;
-      color: var(--oc-color-text-inverse);
-    }
-
-    &.active {
-      cursor: default;
-    }
+  .text {
+    opacity: 1;
+    transition: all 0.35s ease-out;
   }
-
-  &-icon {
-    margin-right: var(--oc-space-medium);
+  .text-invisible {
+    opacity: 0 !important;
+    transition: 0s;
   }
 
-  &-isolated {
-    margin-top: var(--oc-space-medium);
+  &.active {
+    background: linear-gradient(90deg, #0869de 0%, #4e85c8 100%);
+    cursor: default;
   }
-
-  &-list &-link {
-    font-size: 0.875rem;
-    padding-left: var(--oc-space-large);
+  &:hover {
+    color: var(--oc-color-text-inverse);
+    text-decoration: none;
+  }
+  &:not(.active):hover {
+    background: #383838;
   }
 }
 </style>
diff --git a/packages/web-runtime/src/components/TopBar.vue b/packages/web-runtime/src/components/TopBar.vue
index 524d3db6c3a..24ae8307993 100644
--- a/packages/web-runtime/src/components/TopBar.vue
+++ b/packages/web-runtime/src/components/TopBar.vue
@@ -1,23 +1,19 @@
 <template>
   <header
     id="oc-topbar"
-    class="uk-flex uk-flex-middle uk-flex-between oc-mx-m"
+    class="uk-flex uk-flex-middle uk-flex-between oc-px-m"
     :aria-label="$gettext('Top bar')"
   >
-    <div class="gap-15 uk-flex uk-flex-middle uk-flex-between">
-      <applications-menu
-        v-if="applicationsList.length > 0"
-        class="application-menu"
-        :applications-list="applicationsList"
-      />
-      <router-link ref="navigationSidebarLogo" to="/" class="oc-ml-m">
+    <div class="gap-30 uk-flex uk-flex-middle uk-flex-between">
+      <applications-menu v-if="applicationsList.length > 0" :applications-list="applicationsList" />
+      <router-link ref="navigationSidebarLogo" to="/">
         <oc-img :src="logoImage" :alt="sidebarLogoAlt" />
       </router-link>
     </div>
     <div class="portal-wrapper">
       <portal-target name="app.runtime.header" multiple></portal-target>
     </div>
-    <div class="gap-15 uk-flex uk-flex-middle uk-flex-between">
+    <div class="gap-30 uk-flex uk-flex-middle uk-flex-between">
       <feedback-link v-if="isFeedbackLinkEnabled" />
       <notifications v-if="activeNotifications.length" />
       <user-menu
@@ -84,16 +80,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.gap-15 {
-  gap: 15px;
+.gap-30 {
+  gap: 30px;
 }
 #oc-topbar {
-  position: absolute;
-  height: 64px;
-  left: 0;
-  z-index: 9999;
+  height: 60px;
+  position: sticky;
+  z-index: 2;
   img {
-    margin: 0 !important;
     height: 42px;
     image-rendering: auto;
     image-rendering: crisp-edges;
@@ -102,7 +96,4 @@ export default {
     user-select: none;
   }
 }
-.application-menu {
-  margin-left: 25px;
-}
 </style>
diff --git a/packages/web-runtime/src/components/UserMenu.vue b/packages/web-runtime/src/components/UserMenu.vue
index fd03659eb57..38c6d31c64d 100644
--- a/packages/web-runtime/src/components/UserMenu.vue
+++ b/packages/web-runtime/src/components/UserMenu.vue
@@ -3,20 +3,18 @@
     <oc-button
       id="_userMenuButton"
       ref="menuButton"
-      class="oc-topbar-personal uk-height-1-1 oc-pr-xs oc-mr-m"
+      class="oc-topbar-personal uk-height-1-1"
       appearance="raw"
       variation="inverse"
       :aria-label="$gettext('User Menu')"
     >
-      <oc-grid flex>
-        <avatar-image
-          class="oc-topbar-personal-avatar uk-flex-inline uk-flex-center uk-flex-middle oc-px-s"
-          :width="24"
-          :userid="userId"
-          :user-name="userDisplayName"
-        />
-        <div class="oc-topbar-personal-label oc-text-bold oc-ml-rm" v-text="userDisplayName" />
-      </oc-grid>
+      <avatar-image
+        class="oc-topbar-personal-avatar uk-flex-inline uk-flex-center uk-flex-middle"
+        :width="24"
+        :userid="userId"
+        :user-name="userDisplayName"
+      />
+      <div class="oc-topbar-personal-label oc-text-bold" v-text="userDisplayName" />
     </oc-button>
     <oc-drop
       ref="menu"
diff --git a/packages/web-runtime/tests/unit/components/SidebarNav/SidebarNav.spec.js b/packages/web-runtime/tests/unit/components/SidebarNav/SidebarNav.spec.js
new file mode 100644
index 00000000000..cb736711793
--- /dev/null
+++ b/packages/web-runtime/tests/unit/components/SidebarNav/SidebarNav.spec.js
@@ -0,0 +1,71 @@
+import { mount, createLocalVue } from '@vue/test-utils'
+import Vuex from 'vuex'
+import DesignSystem from 'owncloud-design-system'
+
+import SidebarNav from 'web-runtime/src/components/SidebarNav/SidebarNav.vue'
+
+import stubs from '../../../../../../tests/unit/stubs'
+import sidebarNavItemFixtures from '../../../../../../__fixtures__/sidebarNavItems'
+
+const localVue = createLocalVue()
+localVue.use(Vuex)
+localVue.use(DesignSystem)
+
+const slots = {
+  bottom: '<span class="footer">Footer</span>'
+}
+
+describe('OcSidebarNav', () => {
+  const wrapper = mount(SidebarNav, {
+    store: new Vuex.Store({
+      state: {
+        navigation: {
+          closed: false
+        }
+      },
+      mutations: {
+        SET_CLOSED(state, value) {
+          state.navigation.closed = value
+        }
+      },
+      actions: {
+        openNavigation({ commit }) {
+          commit('SET_CLOSED', false)
+        },
+        closeNavigation({ commit }) {
+          commit('SET_CLOSED', true)
+        }
+      }
+    }),
+    localVue,
+    stubs: {
+      ...stubs,
+      'sidebar-nav-item': true,
+      'oc-button': false
+    },
+    slots,
+    propsData: {
+      navItems: sidebarNavItemFixtures
+    }
+  })
+
+  it('displays a bottom slot if given', () => {
+    expect(wrapper.findAll('.footer').length).toBe(1)
+  })
+
+  it('renders navItems into a list', () => {
+    expect(wrapper).toMatchSnapshot()
+  })
+
+  it('toggles into closed state upon button click', async () => {
+    await wrapper.find('.toggle-sidebar-button').trigger('click')
+    await wrapper.vm.$nextTick()
+    expect(wrapper).toMatchSnapshot()
+  })
+
+  it('toggles back into open state upon button click', async () => {
+    await wrapper.find('.toggle-sidebar-button').trigger('click')
+    await wrapper.vm.$nextTick()
+    expect(wrapper).toMatchSnapshot()
+  })
+})
diff --git a/packages/web-runtime/tests/unit/components/SidebarNav/SidebarNavItem.spec.js b/packages/web-runtime/tests/unit/components/SidebarNav/SidebarNavItem.spec.js
new file mode 100644
index 00000000000..eea22665724
--- /dev/null
+++ b/packages/web-runtime/tests/unit/components/SidebarNav/SidebarNavItem.spec.js
@@ -0,0 +1,48 @@
+import { mount, createLocalVue } from '@vue/test-utils'
+import Vuex from 'vuex'
+import DesignSystem from 'owncloud-design-system'
+
+import SidebarNavItem from 'web-runtime/src/components/SidebarNav/SidebarNavItem.vue'
+import sidebarNavItemFixtures from '../../../../../../__fixtures__/sidebarNavItems'
+
+const localVue = createLocalVue()
+localVue.use(Vuex)
+localVue.use(DesignSystem)
+
+const exampleNavItem = sidebarNavItemFixtures[0]
+
+const propsData = {
+  name: exampleNavItem.name,
+  active: false,
+  target: exampleNavItem.route.path,
+  icon: exampleNavItem.iconMaterial,
+  id: '123'
+}
+
+describe('OcSidebarNav', () => {
+  it('renders navItem without toolTip if expanded', () => {
+    const wrapper = mount(SidebarNavItem, {
+      store: new Vuex.Store({}),
+      localVue,
+      stubs: { 'router-link': true },
+      propsData: {
+        ...propsData,
+        collapsed: false
+      }
+    })
+    expect(wrapper).toMatchSnapshot()
+  })
+
+  it('renders navItem with toolTip if collapsed', () => {
+    const wrapper = mount(SidebarNavItem, {
+      store: new Vuex.Store({}),
+      localVue,
+      stubs: { 'router-link': true },
+      propsData: {
+        ...propsData,
+        collapsed: true
+      }
+    })
+    expect(wrapper).toMatchSnapshot()
+  })
+})
diff --git a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.js.snap b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.js.snap
new file mode 100644
index 00000000000..a8ca45e91bf
--- /dev/null
+++ b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.js.snap
@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OcSidebarNav renders navItems into a list 1`] = `
+<div id="web-nav-sidebar" class="uk-visible@l"><button aria-label="Toggle sidebar" class="toggle-sidebar-button oc-py-s oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw toggle-sidebar-button-expanded oc-pr-s">
+    <oc-icon-stub name="chevron_left" accessiblelabel="" type="span" size="large" variation="passive"></oc-icon-stub>
+  </button>
+  <nav aria-label="Sidebar top navigation menu" class="oc-sidebar-nav oc-my-l oc-px-xs">
+    <oc-list-stub>
+      <sidebar-nav-item-stub name="All files" active="true" target="/files/list/all" icon="folder" id="nav-item-0"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shared with me" target="/files/list/shared-with-me" icon="shared-with-me" id="nav-item-1"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shared with others" target="/files/list/shared-with-others" icon="shared-with-others" id="nav-item-2"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shared via link" target="/files/list/shared-via-link" icon="link" id="nav-item-3"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Deleted files" target="/files/list/trash-bin" icon="delete" id="nav-item-4"></sidebar-nav-item-stub>
+    </oc-list-stub>
+  </nav> <span class="footer">Footer</span>
+</div>
+`;
+
+exports[`OcSidebarNav toggles back into open state upon button click 1`] = `
+<div id="web-nav-sidebar" class="uk-visible@l"><button aria-label="Toggle sidebar" class="toggle-sidebar-button oc-py-s oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw toggle-sidebar-button-expanded oc-pr-s">
+    <oc-icon-stub name="chevron_left" accessiblelabel="" type="span" size="large" variation="passive"></oc-icon-stub>
+  </button>
+  <nav aria-label="Sidebar top navigation menu" class="oc-sidebar-nav oc-my-l oc-px-xs">
+    <oc-list-stub>
+      <sidebar-nav-item-stub name="All files" active="true" target="/files/list/all" icon="folder" id="nav-item-0"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shared with me" target="/files/list/shared-with-me" icon="shared-with-me" id="nav-item-1"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shared with others" target="/files/list/shared-with-others" icon="shared-with-others" id="nav-item-2"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shared via link" target="/files/list/shared-via-link" icon="link" id="nav-item-3"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Deleted files" target="/files/list/trash-bin" icon="delete" id="nav-item-4"></sidebar-nav-item-stub>
+    </oc-list-stub>
+  </nav> <span class="footer">Footer</span>
+</div>
+`;
+
+exports[`OcSidebarNav toggles into closed state upon button click 1`] = `
+<div id="web-nav-sidebar" class="uk-visible@l oc-app-navigation-collapsed"><button aria-label="Toggle sidebar" class="toggle-sidebar-button oc-py-s oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw toggle-sidebar-button-collapsed">
+    <oc-icon-stub name="chevron_right" accessiblelabel="" type="span" size="large" variation="passive"></oc-icon-stub>
+  </button>
+  <nav aria-label="Sidebar top navigation menu" class="oc-sidebar-nav oc-my-l oc-px-xs">
+    <oc-list-stub>
+      <sidebar-nav-item-stub name="All files" active="true" target="/files/list/all" icon="folder" id="nav-item-0" collapsed="true"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shared with me" target="/files/list/shared-with-me" icon="shared-with-me" id="nav-item-1" collapsed="true"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shared with others" target="/files/list/shared-with-others" icon="shared-with-others" id="nav-item-2" collapsed="true"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shared via link" target="/files/list/shared-via-link" icon="link" id="nav-item-3" collapsed="true"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Deleted files" target="/files/list/trash-bin" icon="delete" id="nav-item-4" collapsed="true"></sidebar-nav-item-stub>
+    </oc-list-stub>
+  </nav> <span class="footer">Footer</span>
+</div>
+`;
diff --git a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.js.snap b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.js.snap
new file mode 100644
index 00000000000..abf2e1021e0
--- /dev/null
+++ b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.js.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OcSidebarNav renders navItem with toolTip if collapsed 1`] = `
+<li class="oc-sidebar-nav-item oc-pb-xs oc-px-s">
+  <router-link-stub id="123" to="/files/list/all" class="oc-sidebar-nav-item-link"><span class="oc-icon oc-icon-m oc-icon-inverse" aria-hidden="true"><!----></span> <span class="oc-ml-m text text-invisible">All files</span></router-link-stub>
+</li>
+`;
+
+exports[`OcSidebarNav renders navItem without toolTip if expanded 1`] = `
+<li class="oc-sidebar-nav-item oc-pb-xs oc-px-s">
+  <router-link-stub id="123" to="/files/list/all" class="oc-sidebar-nav-item-link"><span class="oc-icon oc-icon-m oc-icon-inverse" aria-hidden="true"><!----></span> <span class="oc-ml-m text">All files</span></router-link-stub>
+</li>
+`;
diff --git a/packages/web-runtime/tests/unit/components/__snapshots__/FeedbackLink.spec.js.snap b/packages/web-runtime/tests/unit/components/__snapshots__/FeedbackLink.spec.js.snap
index 15a302c755a..b8fe40afd0a 100644
--- a/packages/web-runtime/tests/unit/components/__snapshots__/FeedbackLink.spec.js.snap
+++ b/packages/web-runtime/tests/unit/components/__snapshots__/FeedbackLink.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`FeedbackLink component has no accessibility violations 1`] = `
-<div class="uk-flex uk-flex-middle uk-visible@m"><a aria-label="ownCloud feedback survey" href="https://owncloud.com/web-design-feedback" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" target="_blank" aria-describedby="oc-feedback-link-description"><span class="oc-icon oc-icon-m oc-icon-inverse"><svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"> <path xmlns="http://www.w3.org/2000/svg" d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 12h-2v-2h2v2zm0-4h-2V6h2v4z"></path> </svg></span></a>
+<div class="uk-flex uk-visible@m"><a aria-label="ownCloud feedback survey" href="https://owncloud.com/web-design-feedback" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" target="_blank" aria-describedby="oc-feedback-link-description"><span class="oc-icon oc-icon-m oc-icon-inverse"><svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"> <path xmlns="http://www.w3.org/2000/svg" d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 12h-2v-2h2v2zm0-4h-2V6h2v4z"></path> </svg></span></a>
   <p id="oc-feedback-link-description" class="oc-invisible-sr">Provide your feedback: We'd like to improve the web design and would be happy to hear your feedback. Thank you! Your ownCloud team.</p>
 </div>
 `;
diff --git a/packages/web-runtime/tests/unit/components/__snapshots__/TopBar.spec.js.snap b/packages/web-runtime/tests/unit/components/__snapshots__/TopBar.spec.js.snap
index 549dbb866b7..1232280a446 100644
--- a/packages/web-runtime/tests/unit/components/__snapshots__/TopBar.spec.js.snap
+++ b/packages/web-runtime/tests/unit/components/__snapshots__/TopBar.spec.js.snap
@@ -1,17 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Top Bar component Displays applications menu 1`] = `
-<header id="oc-topbar" aria-label="Top bar" class="uk-flex uk-flex-middle uk-flex-between oc-mx-m">
-  <div class="gap-15 uk-flex uk-flex-middle uk-flex-between">
-    <applications-menu-stub applicationslist="testApp" class="application-menu"></applications-menu-stub>
-    <router-link-stub to="/" class="oc-ml-m">
+<header id="oc-topbar" aria-label="Top bar" class="uk-flex uk-flex-middle uk-flex-between oc-px-m">
+  <div class="gap-30 uk-flex uk-flex-middle uk-flex-between">
+    <applications-menu-stub applicationslist="testApp"></applications-menu-stub>
+    <router-link-stub to="/">
       <oc-img-stub src=""></oc-img-stub>
     </router-link-stub>
   </div>
   <div class="portal-wrapper">
     <portal-target-stub name="app.runtime.header" multiple=""></portal-target-stub>
   </div>
-  <div class="gap-15 uk-flex uk-flex-middle uk-flex-between">
+  <div class="gap-30 uk-flex uk-flex-middle uk-flex-between">
     <feedback-link-stub></feedback-link-stub>
     <!---->
     <user-menu-stub userid="einstein" userdisplayname="Albert Einstein" applicationslist="testApp"></user-menu-stub>
diff --git a/tests/acceptance/pageObjects/webPage.js b/tests/acceptance/pageObjects/webPage.js
index 8ab7944fb1d..832a4084355 100644
--- a/tests/acceptance/pageObjects/webPage.js
+++ b/tests/acceptance/pageObjects/webPage.js
@@ -308,7 +308,7 @@ module.exports = {
       locateStrategy: 'xpath'
     },
     appNavigation: {
-      selector: '.oc-app-navigation'
+      selector: '#web-nav-sidebar'
     },
     filelink: {
       selector:
diff --git a/tests/acceptance/stepDefinitions/visualContext.js b/tests/acceptance/stepDefinitions/visualContext.js
index e537dc1d2d0..f340032c630 100644
--- a/tests/acceptance/stepDefinitions/visualContext.js
+++ b/tests/acceptance/stepDefinitions/visualContext.js
@@ -10,7 +10,7 @@ const backends = Object.freeze({
 
 const visualElements = Object.freeze({
   topBar: '#oc-topbar',
-  sideBar: '.oc-app-navigation'
+  sideBar: '#web-nav-sidebar'
 })
 
 const getImgPath = function (key) {

From 1d8954a7856afe9c893f23479039987b8926b73b Mon Sep 17 00:00:00 2001
From: pwengerter <pascal@wengerter.info>
Date: Wed, 29 Dec 2021 14:05:16 +0100
Subject: [PATCH 13/15] Address code review, fix acceptance tests

---
 packages/web-app-markdown-editor/src/App.vue  |  2 +-
 packages/web-app-media-viewer/src/App.vue     |  3 --
 packages/web-runtime/src/App.vue              |  2 +-
 .../src/components/FeedbackLink.vue           |  2 +-
 .../src/components/Notifications.vue          |  2 +-
 .../src/components/SidebarNav/SidebarNav.vue  |  3 +-
 .../components/SidebarNav/SidebarNavItem.vue  |  6 ----
 .../web-runtime/src/components/TopBar.vue     | 17 +++++++----
 .../web-runtime/src/components/UserMenu.vue   |  2 +-
 .../__snapshots__/SidebarNav.spec.js.snap     | 30 +++++++++----------
 .../__snapshots__/SidebarNavItem.spec.js.snap |  8 ++---
 .../__snapshots__/FeedbackLink.spec.js.snap   |  2 +-
 .../__snapshots__/TopBar.spec.js.snap         |  4 +--
 tests/acceptance/pageObjects/profilePage.js   | 10 +++----
 14 files changed, 44 insertions(+), 49 deletions(-)

diff --git a/packages/web-app-markdown-editor/src/App.vue b/packages/web-app-markdown-editor/src/App.vue
index 310e50b554b..4266a9053b2 100644
--- a/packages/web-app-markdown-editor/src/App.vue
+++ b/packages/web-app-markdown-editor/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <main id="markdown-editor">
+  <main id="markdown-editor" class="oc-mx-s oc-my-s">
     <markdown-editor-app-bar />
     <oc-notifications>
       <oc-notification-message
diff --git a/packages/web-app-media-viewer/src/App.vue b/packages/web-app-media-viewer/src/App.vue
index a27c38e6c6b..824cee5dfa4 100644
--- a/packages/web-app-media-viewer/src/App.vue
+++ b/packages/web-app-media-viewer/src/App.vue
@@ -359,9 +359,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-#mediaviewer {
-  min-height: 100vh;
-}
 .media-viewer-player {
   max-width: 90vw;
   height: 70vh;
diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
index 4a32eebe61d..1eda9669a4e 100644
--- a/packages/web-runtime/src/App.vue
+++ b/packages/web-runtime/src/App.vue
@@ -28,7 +28,7 @@
         <message-bar :active-messages="activeMessages" @deleteMessage="$_deleteMessage" />
         <div id="main-app-area" class="oc-my-m oc-mx-s uk-flex">
           <transition>
-            <sidebar-nav :nav-items="sidebarNavItems" />
+            <sidebar-nav v-if="isSidebarVisible" :nav-items="sidebarNavItems" />
           </transition>
           <router-view class="oc-app-container uk-width-1-1 oc-py-s oc-ps-s" name="app" />
         </div>
diff --git a/packages/web-runtime/src/components/FeedbackLink.vue b/packages/web-runtime/src/components/FeedbackLink.vue
index 0f3db20a3cc..ac519ab6d2a 100644
--- a/packages/web-runtime/src/components/FeedbackLink.vue
+++ b/packages/web-runtime/src/components/FeedbackLink.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="uk-flex uk-visible@m">
+  <div class="uk-flex">
     <oc-button
       v-oc-tooltip="description"
       type="a"
diff --git a/packages/web-runtime/src/components/Notifications.vue b/packages/web-runtime/src/components/Notifications.vue
index d312dd5886b..86c32d5834b 100644
--- a/packages/web-runtime/src/components/Notifications.vue
+++ b/packages/web-runtime/src/components/Notifications.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="oc-notification" class="uk-flex uk-flex-middle uk-visible@m">
+  <div id="oc-notification" class="uk-flex uk-flex-middle">
     <oc-button
       id="oc-notification-bell"
       v-oc-tooltip="notificationsLabel"
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
index 8a30ec005c4..7356ede7686 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
@@ -16,8 +16,7 @@
     >
       <oc-list>
         <sidebar-nav-item
-          v-for="(link, index) in navItems"
-          :id="`nav-item-${index}`"
+          v-for="link in navItems"
           :key="link.route.path"
           :target="link.route.path"
           :active="link.active"
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
index 62f467ade9c..ec7d078e726 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
@@ -1,7 +1,6 @@
 <template>
   <li class="oc-sidebar-nav-item oc-pb-xs oc-px-s" :aria-current="active ? 'page' : null">
     <router-link
-      :id="id"
       v-oc-tooltip="toolTip"
       :class="['oc-sidebar-nav-item-link', { active: active }]"
       :to="target"
@@ -38,11 +37,6 @@ export default {
       type: Boolean,
       required: false,
       default: false
-    },
-    id: {
-      type: String,
-      required: false,
-      default: ''
     }
   },
   computed: {
diff --git a/packages/web-runtime/src/components/TopBar.vue b/packages/web-runtime/src/components/TopBar.vue
index 24ae8307993..0dd0fbea39d 100644
--- a/packages/web-runtime/src/components/TopBar.vue
+++ b/packages/web-runtime/src/components/TopBar.vue
@@ -4,7 +4,7 @@
     class="uk-flex uk-flex-middle uk-flex-between oc-px-m"
     :aria-label="$gettext('Top bar')"
   >
-    <div class="gap-30 uk-flex uk-flex-middle uk-flex-between">
+    <div class="topbar-gap uk-flex uk-flex-middle uk-flex-between">
       <applications-menu v-if="applicationsList.length > 0" :applications-list="applicationsList" />
       <router-link ref="navigationSidebarLogo" to="/">
         <oc-img :src="logoImage" :alt="sidebarLogoAlt" />
@@ -13,7 +13,7 @@
     <div class="portal-wrapper">
       <portal-target name="app.runtime.header" multiple></portal-target>
     </div>
-    <div class="gap-30 uk-flex uk-flex-middle uk-flex-between">
+    <div class="topbar-gap uk-flex uk-flex-middle uk-flex-between">
       <feedback-link v-if="isFeedbackLinkEnabled" />
       <notifications v-if="activeNotifications.length" />
       <user-menu
@@ -79,10 +79,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-.gap-30 {
-  gap: 30px;
-}
+<style lang="scss">
 #oc-topbar {
   height: 60px;
   position: sticky;
@@ -95,5 +92,13 @@ export default {
     image-rendering: -webkit-optimize-contrast;
     user-select: none;
   }
+  .topbar-gap {
+    gap: 30px;
+  }
+  @media only screen and (max-width: 960px) {
+    .topbar-gap {
+      gap: 0.5rem;
+    }
+  }
 }
 </style>
diff --git a/packages/web-runtime/src/components/UserMenu.vue b/packages/web-runtime/src/components/UserMenu.vue
index 38c6d31c64d..09ef8f6a3f9 100644
--- a/packages/web-runtime/src/components/UserMenu.vue
+++ b/packages/web-runtime/src/components/UserMenu.vue
@@ -14,7 +14,7 @@
         :userid="userId"
         :user-name="userDisplayName"
       />
-      <div class="oc-topbar-personal-label oc-text-bold" v-text="userDisplayName" />
+      <div class="oc-topbar-personal-label oc-text-bold oc-visible@s" v-text="userDisplayName" />
     </oc-button>
     <oc-drop
       ref="menu"
diff --git a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.js.snap b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.js.snap
index a8ca45e91bf..7423dbc6753 100644
--- a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.js.snap
+++ b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.js.snap
@@ -6,11 +6,11 @@ exports[`OcSidebarNav renders navItems into a list 1`] = `
   </button>
   <nav aria-label="Sidebar top navigation menu" class="oc-sidebar-nav oc-my-l oc-px-xs">
     <oc-list-stub>
-      <sidebar-nav-item-stub name="All files" active="true" target="/files/list/all" icon="folder" id="nav-item-0"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Shared with me" target="/files/list/shared-with-me" icon="shared-with-me" id="nav-item-1"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Shared with others" target="/files/list/shared-with-others" icon="shared-with-others" id="nav-item-2"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Shared via link" target="/files/list/shared-via-link" icon="link" id="nav-item-3"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Deleted files" target="/files/list/trash-bin" icon="delete" id="nav-item-4"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="All files" active="true" target="/files/list/all" icon="folder"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shared with me" target="/files/list/shared-with-me" icon="shared-with-me"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shared with others" target="/files/list/shared-with-others" icon="shared-with-others"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shared via link" target="/files/list/shared-via-link" icon="link"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Deleted files" target="/files/list/trash-bin" icon="delete"></sidebar-nav-item-stub>
     </oc-list-stub>
   </nav> <span class="footer">Footer</span>
 </div>
@@ -22,11 +22,11 @@ exports[`OcSidebarNav toggles back into open state upon button click 1`] = `
   </button>
   <nav aria-label="Sidebar top navigation menu" class="oc-sidebar-nav oc-my-l oc-px-xs">
     <oc-list-stub>
-      <sidebar-nav-item-stub name="All files" active="true" target="/files/list/all" icon="folder" id="nav-item-0"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Shared with me" target="/files/list/shared-with-me" icon="shared-with-me" id="nav-item-1"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Shared with others" target="/files/list/shared-with-others" icon="shared-with-others" id="nav-item-2"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Shared via link" target="/files/list/shared-via-link" icon="link" id="nav-item-3"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Deleted files" target="/files/list/trash-bin" icon="delete" id="nav-item-4"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="All files" active="true" target="/files/list/all" icon="folder"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shared with me" target="/files/list/shared-with-me" icon="shared-with-me"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shared with others" target="/files/list/shared-with-others" icon="shared-with-others"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shared via link" target="/files/list/shared-via-link" icon="link"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Deleted files" target="/files/list/trash-bin" icon="delete"></sidebar-nav-item-stub>
     </oc-list-stub>
   </nav> <span class="footer">Footer</span>
 </div>
@@ -38,11 +38,11 @@ exports[`OcSidebarNav toggles into closed state upon button click 1`] = `
   </button>
   <nav aria-label="Sidebar top navigation menu" class="oc-sidebar-nav oc-my-l oc-px-xs">
     <oc-list-stub>
-      <sidebar-nav-item-stub name="All files" active="true" target="/files/list/all" icon="folder" id="nav-item-0" collapsed="true"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Shared with me" target="/files/list/shared-with-me" icon="shared-with-me" id="nav-item-1" collapsed="true"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Shared with others" target="/files/list/shared-with-others" icon="shared-with-others" id="nav-item-2" collapsed="true"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Shared via link" target="/files/list/shared-via-link" icon="link" id="nav-item-3" collapsed="true"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Deleted files" target="/files/list/trash-bin" icon="delete" id="nav-item-4" collapsed="true"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="All files" active="true" target="/files/list/all" icon="folder" collapsed="true"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shared with me" target="/files/list/shared-with-me" icon="shared-with-me" collapsed="true"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shared with others" target="/files/list/shared-with-others" icon="shared-with-others" collapsed="true"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shared via link" target="/files/list/shared-via-link" icon="link" collapsed="true"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Deleted files" target="/files/list/trash-bin" icon="delete" collapsed="true"></sidebar-nav-item-stub>
     </oc-list-stub>
   </nav> <span class="footer">Footer</span>
 </div>
diff --git a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.js.snap b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.js.snap
index abf2e1021e0..b9aa6b3cafe 100644
--- a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.js.snap
+++ b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.js.snap
@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`OcSidebarNav renders navItem with toolTip if collapsed 1`] = `
-<li class="oc-sidebar-nav-item oc-pb-xs oc-px-s">
-  <router-link-stub id="123" to="/files/list/all" class="oc-sidebar-nav-item-link"><span class="oc-icon oc-icon-m oc-icon-inverse" aria-hidden="true"><!----></span> <span class="oc-ml-m text text-invisible">All files</span></router-link-stub>
+<li class="oc-sidebar-nav-item oc-pb-xs oc-px-s" id="123">
+  <router-link-stub to="/files/list/all" class="oc-sidebar-nav-item-link"><span class="oc-icon oc-icon-m oc-icon-inverse" aria-hidden="true"><!----></span> <span class="oc-ml-m text text-invisible">All files</span></router-link-stub>
 </li>
 `;
 
 exports[`OcSidebarNav renders navItem without toolTip if expanded 1`] = `
-<li class="oc-sidebar-nav-item oc-pb-xs oc-px-s">
-  <router-link-stub id="123" to="/files/list/all" class="oc-sidebar-nav-item-link"><span class="oc-icon oc-icon-m oc-icon-inverse" aria-hidden="true"><!----></span> <span class="oc-ml-m text">All files</span></router-link-stub>
+<li class="oc-sidebar-nav-item oc-pb-xs oc-px-s" id="123">
+  <router-link-stub to="/files/list/all" class="oc-sidebar-nav-item-link"><span class="oc-icon oc-icon-m oc-icon-inverse" aria-hidden="true"><!----></span> <span class="oc-ml-m text">All files</span></router-link-stub>
 </li>
 `;
diff --git a/packages/web-runtime/tests/unit/components/__snapshots__/FeedbackLink.spec.js.snap b/packages/web-runtime/tests/unit/components/__snapshots__/FeedbackLink.spec.js.snap
index b8fe40afd0a..bf50430de7c 100644
--- a/packages/web-runtime/tests/unit/components/__snapshots__/FeedbackLink.spec.js.snap
+++ b/packages/web-runtime/tests/unit/components/__snapshots__/FeedbackLink.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`FeedbackLink component has no accessibility violations 1`] = `
-<div class="uk-flex uk-visible@m"><a aria-label="ownCloud feedback survey" href="https://owncloud.com/web-design-feedback" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" target="_blank" aria-describedby="oc-feedback-link-description"><span class="oc-icon oc-icon-m oc-icon-inverse"><svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"> <path xmlns="http://www.w3.org/2000/svg" d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 12h-2v-2h2v2zm0-4h-2V6h2v4z"></path> </svg></span></a>
+<div class="uk-flex"><a aria-label="ownCloud feedback survey" href="https://owncloud.com/web-design-feedback" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" target="_blank" aria-describedby="oc-feedback-link-description"><span class="oc-icon oc-icon-m oc-icon-inverse"><svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"> <path xmlns="http://www.w3.org/2000/svg" d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 12h-2v-2h2v2zm0-4h-2V6h2v4z"></path> </svg></span></a>
   <p id="oc-feedback-link-description" class="oc-invisible-sr">Provide your feedback: We'd like to improve the web design and would be happy to hear your feedback. Thank you! Your ownCloud team.</p>
 </div>
 `;
diff --git a/packages/web-runtime/tests/unit/components/__snapshots__/TopBar.spec.js.snap b/packages/web-runtime/tests/unit/components/__snapshots__/TopBar.spec.js.snap
index 1232280a446..78d49657681 100644
--- a/packages/web-runtime/tests/unit/components/__snapshots__/TopBar.spec.js.snap
+++ b/packages/web-runtime/tests/unit/components/__snapshots__/TopBar.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Top Bar component Displays applications menu 1`] = `
 <header id="oc-topbar" aria-label="Top bar" class="uk-flex uk-flex-middle uk-flex-between oc-px-m">
-  <div class="gap-30 uk-flex uk-flex-middle uk-flex-between">
+  <div class="topbar-gap uk-flex uk-flex-middle uk-flex-between">
     <applications-menu-stub applicationslist="testApp"></applications-menu-stub>
     <router-link-stub to="/">
       <oc-img-stub src=""></oc-img-stub>
@@ -11,7 +11,7 @@ exports[`Top Bar component Displays applications menu 1`] = `
   <div class="portal-wrapper">
     <portal-target-stub name="app.runtime.header" multiple=""></portal-target-stub>
   </div>
-  <div class="gap-30 uk-flex uk-flex-middle uk-flex-between">
+  <div class="topbar-gap uk-flex uk-flex-middle uk-flex-between">
     <feedback-link-stub></feedback-link-stub>
     <!---->
     <user-menu-stub userid="einstein" userdisplayname="Albert Einstein" applicationslist="testApp"></user-menu-stub>
diff --git a/tests/acceptance/pageObjects/profilePage.js b/tests/acceptance/pageObjects/profilePage.js
index 50175fc4e3a..9e45164ac45 100644
--- a/tests/acceptance/pageObjects/profilePage.js
+++ b/tests/acceptance/pageObjects/profilePage.js
@@ -1,9 +1,9 @@
 module.exports = {
   commands: {
-    getUserProfileName: async function () {
+    getUserProfileAvatar: async function () {
       let userInfo
-      await this.waitForElementVisible('@userProfileName').api.element(
-        '@userProfileName',
+      await this.waitForElementVisible('@userProfileAvatar').api.element(
+        '@userProfileAvatar',
         (result) => {
           this.api.elementIdText(result.value.ELEMENT, (text) => {
             userInfo = text.value
@@ -17,8 +17,8 @@ module.exports = {
     }
   },
   elements: {
-    userProfileName: {
-      selector: '.oc-topbar-personal-label'
+    userProfileAvatar: {
+      selector: '.oc-topbar-personal-avatar'
     },
     manageAccount: {
       selector: '#oc-topbar-account-manage'

From 92b2af56434d1224a599693162cee633fca996ba Mon Sep 17 00:00:00 2001
From: pwengerter <pascal@wengerter.info>
Date: Wed, 29 Dec 2021 14:55:50 +0100
Subject: [PATCH 14/15] Remove acceptance test checking for UserMenu user name
 string

---
 tests/acceptance/features/webUIAccount/userProfile.feature | 2 --
 1 file changed, 2 deletions(-)

diff --git a/tests/acceptance/features/webUIAccount/userProfile.feature b/tests/acceptance/features/webUIAccount/userProfile.feature
index 6bbde44a7f0..4409e5b58ca 100644
--- a/tests/acceptance/features/webUIAccount/userProfile.feature
+++ b/tests/acceptance/features/webUIAccount/userProfile.feature
@@ -10,8 +10,6 @@ Feature: view profile
   Scenario: view user profile for the logged in user
     When user "Alice" logs in using the webUI
     Then the user profile should be visible on the webUI
-    When the user opens the user profile
-    Then username "Alice Hansen" should be visible on the webUI
 
 
   Scenario: browse to account page to manage user account

From 54c2af0c7837d76a461de8cfd1c8955905bc4f6b Mon Sep 17 00:00:00 2001
From: pwengerter <pascal@wengerter.info>
Date: Thu, 30 Dec 2021 12:18:41 +0100
Subject: [PATCH 15/15] Address code review, add ODS bump changelog item

---
 changelog/unreleased/enhancement-update-ods     | 17 +++++++++++++++++
 .../src/components/SidebarNav/SidebarNav.vue    | 16 +++++-----------
 .../components/SidebarNav/SidebarNavItem.vue    | 12 +++---------
 packages/web-runtime/src/components/TopBar.vue  |  9 +++++----
 packages/web-runtime/src/store/index.js         |  5 ++---
 .../__snapshots__/TopBar.spec.js.snap           |  2 +-
 .../e2e/cucumber/step_definitions/app.files.ts  |  1 -
 7 files changed, 33 insertions(+), 29 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-update-ods

diff --git a/changelog/unreleased/enhancement-update-ods b/changelog/unreleased/enhancement-update-ods
new file mode 100644
index 00000000000..26d9e0b8d8a
--- /dev/null
+++ b/changelog/unreleased/enhancement-update-ods
@@ -0,0 +1,17 @@
+Enhancement: Update ODS to v12.0.0-alpha5
+
+We updated the ownCloud Design System to version 12.0.0-alpha5. Please refer to the full changelog in the ODS release (linked) for more details. Summary:
+
+- Change - Do not sort in OcTable: https://github.com/owncloud/owncloud-design-system/pull/1825
+- Change - Remove OcAppSideBar component: https://github.com/owncloud/owncloud-design-system/pull/1810
+- Change - Remove OcAppBar component: https://github.com/owncloud/owncloud-design-system/pull/1810
+- Change - Remove oc-table-files from ods: https://github.com/owncloud/owncloud-design-system/pull/1817
+- Change - Move OcSidebarNav and OcSidebarNavItem to web: https://github.com/owncloud/owncloud-design-system/pull/6036
+- Change - Remove unused props for unstyled components: https://github.com/owncloud/owncloud-design-system/pull/1795
+- Enhancement - Fix OcAvatar line-height: https://github.com/owncloud/owncloud-design-system/pull/1810
+- Enhancement - Adjust OcSearchBar to new design: https://github.com/owncloud/owncloud-design-system/pull/1810
+- Enhancement - Add svg icon for spaces: https://github.com/owncloud/owncloud-design-system/pull/1846
+- Bugfix - Rename GhostElement: https://github.com/owncloud/owncloud-design-system/pull/1845
+
+https://github.com/owncloud/web/pull/6086
+https://github.com/owncloud/owncloud-design-system/releases/tag/v12.0.0-alpha5
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
index 7356ede7686..5600a6e3d09 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
@@ -1,5 +1,8 @@
 <template>
-  <div id="web-nav-sidebar" :class="sidebarClasses">
+  <div
+    id="web-nav-sidebar"
+    :class="['uk-visible@l', { 'oc-app-navigation-collapsed': navigation.closed }]"
+  >
     <oc-button
       variation="inverse"
       appearance="raw"
@@ -48,13 +51,6 @@ export default {
   computed: {
     ...mapState(['sidebar', 'navigation']),
 
-    sidebarClasses() {
-      if (this.navigation.closed) {
-        return 'uk-visible@l oc-app-navigation-collapsed'
-      }
-      return 'uk-visible@l'
-    },
-
     toggleSidebarButtonClass() {
       return this.navigation.closed
         ? 'toggle-sidebar-button-collapsed'
@@ -69,8 +65,7 @@ export default {
     ...mapActions(['openNavigation', 'closeNavigation']),
 
     toggleSidebarButtonClick() {
-      if (this.navigation.closed) return this.openNavigation()
-      return this.closeNavigation()
+      return this.navigation.closed ? this.openNavigation() : this.closeNavigation()
     }
   }
 }
@@ -81,7 +76,6 @@ export default {
   background-color: #2d2d2d;
   border-top-left-radius: 15px;
   border-bottom-left-radius: 15px;
-  // box-shadow: 5px 0px 25px rgba(0, 0, 0, 0.3);
   color: var(--oc-color-text-inverse);
   display: flex;
   flex-direction: column;
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
index ec7d078e726..0087ac75522 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
@@ -15,8 +15,7 @@ export default {
   props: {
     name: {
       type: String,
-      required: false,
-      default: ''
+      required: true
     },
     active: {
       type: Boolean,
@@ -30,8 +29,7 @@ export default {
     },
     icon: {
       type: String,
-      required: true,
-      default: ''
+      required: true
     },
     collapsed: {
       type: Boolean,
@@ -41,11 +39,7 @@ export default {
   },
   computed: {
     toolTip() {
-      if (this.collapsed) {
-        return this.$gettext(`Navigate to ${this.name} page`)
-      } else {
-        return ''
-      }
+      return this.collapsed ? this.$gettext(`Navigate to ${this.name} page`) : ''
     }
   }
 }
diff --git a/packages/web-runtime/src/components/TopBar.vue b/packages/web-runtime/src/components/TopBar.vue
index 0dd0fbea39d..ba06e1bc598 100644
--- a/packages/web-runtime/src/components/TopBar.vue
+++ b/packages/web-runtime/src/components/TopBar.vue
@@ -5,7 +5,7 @@
     :aria-label="$gettext('Top bar')"
   >
     <div class="topbar-gap uk-flex uk-flex-middle uk-flex-between">
-      <applications-menu v-if="applicationsList.length > 0" :applications-list="applicationsList" />
+      <applications-menu v-if="applicationsList.length" :applications-list="applicationsList" />
       <router-link ref="navigationSidebarLogo" to="/">
         <oc-img :src="logoImage" :alt="sidebarLogoAlt" />
       </router-link>
@@ -41,9 +41,6 @@ export default {
     UserMenu
   },
   props: {
-    sidebarLogoAlt() {
-      return this.$gettext('Navigate to all files page')
-    },
     userId: {
       type: String,
       required: false,
@@ -68,6 +65,10 @@ export default {
   computed: {
     ...mapGetters(['configuration']),
 
+    sidebarLogoAlt() {
+      return this.$gettext('Navigate to all files page')
+    },
+
     logoImage() {
       return this.configuration.theme.logo.sidebar
     },
diff --git a/packages/web-runtime/src/store/index.js b/packages/web-runtime/src/store/index.js
index bb26f294746..895362c8ac9 100644
--- a/packages/web-runtime/src/store/index.js
+++ b/packages/web-runtime/src/store/index.js
@@ -17,12 +17,11 @@ const vuexPersistInSession = new VuexPersistence({
   // Browser tab independent storage which gets deleted after the tab is closed
   storage: window.sessionStorage,
   reducer: (state) => {
-    const { userReady, ...user } = state.user
-    const navigation = state.navigation
+    const { user, navigation, router } = state
     return {
       user,
       navigation,
-      router: state.router
+      router
     }
   }
 })
diff --git a/packages/web-runtime/tests/unit/components/__snapshots__/TopBar.spec.js.snap b/packages/web-runtime/tests/unit/components/__snapshots__/TopBar.spec.js.snap
index 78d49657681..6891a76cc47 100644
--- a/packages/web-runtime/tests/unit/components/__snapshots__/TopBar.spec.js.snap
+++ b/packages/web-runtime/tests/unit/components/__snapshots__/TopBar.spec.js.snap
@@ -5,7 +5,7 @@ exports[`Top Bar component Displays applications menu 1`] = `
   <div class="topbar-gap uk-flex uk-flex-middle uk-flex-between">
     <applications-menu-stub applicationslist="testApp"></applications-menu-stub>
     <router-link-stub to="/">
-      <oc-img-stub src=""></oc-img-stub>
+      <oc-img-stub src="" alt="Navigate to all files page"></oc-img-stub>
     </router-link-stub>
   </div>
   <div class="portal-wrapper">
diff --git a/tests/e2e/cucumber/step_definitions/app.files.ts b/tests/e2e/cucumber/step_definitions/app.files.ts
index 02b7c98d9cf..2bc7f5c9332 100644
--- a/tests/e2e/cucumber/step_definitions/app.files.ts
+++ b/tests/e2e/cucumber/step_definitions/app.files.ts
@@ -74,7 +74,6 @@ When(
   ) {
     const actor = this.actorsEnvironment.getActor({ id: stepUser })
     const { allFiles: allFilesPage } = new FilesPage({ actor })
-    // await allFilesPage.navigate()
 
     const shareInfo = stepTable.hashes().reduce((acc, stepRow) => {
       const { user, resource, role } = stepRow