From 88db534b48a551454bf084124ff7ed9867fae001 Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lukashirt@mail.com>
Date: Thu, 13 May 2021 17:18:13 +0200
Subject: [PATCH 1/3] feat: use slots in sidebar

---
 packages/web-runtime/src/App.vue | 73 +++++++++++++++++++++++++++-----
 1 file changed, 62 insertions(+), 11 deletions(-)

diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
index 0e608b86a85..4c635a28582 100644
--- a/packages/web-runtime/src/App.vue
+++ b/packages/web-runtime/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div id="web">
     <oc-hidden-announcer :announcement="announcement" level="polite" />
     <skip-to target="main">
       <translate>Skip to main</translate>
@@ -17,24 +17,50 @@
       <template v-else-if="!showHeader">
         <router-view name="fullscreen" />
       </template>
-      <div v-else key="core-content" class="uk-flex uk-flex-stretch">
+      <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
+            <oc-sidebar-nav
+              v-show="isSidebarVisible"
+              id="web-nav-sidebar"
               v-touch:swipe.left="handleNavSwipe"
               class="oc-app-navigation"
-              :logo-img="logoImage"
-              :logo-alt="sidebarLogoAlt"
-              :nav-items="sidebarNavItems"
+              :accessible-label="$gettext('Application navigation')"
               :class="sidebarClasses"
-              :fixed="isSidebarFixed"
-              :accessible-label="accessibleLabel"
-              @close="toggleAppNavigationVisibility"
             >
-              <template v-if="sidebar.sidebarFooterContentComponent" v-slot:footer>
+              <template #header>
+                <div class="uk-text-center">
+                  <oc-button
+                    v-if="isSidebarFixed"
+                    variation="inverse"
+                    appearance="raw"
+                    :aria-label="$gettext('Close sidebar navigation')"
+                    @click="toggleAppNavigationVisibility"
+                  >
+                    <oc-icon name="close" aria-hidden="true" />
+                  </oc-button>
+                  <router-link ref="navigationSidebarLogo" to="/">
+                    <oc-logo :src="logoImage" alt="ownCloud" />
+                  </router-link>
+                </div>
+              </template>
+              <template #nav>
+                <oc-list>
+                  <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"
+                  >
+                    {{ link.name }}
+                  </oc-sidebar-nav-item>
+                </oc-list>
+              </template>
+              <template v-if="sidebar.sidebarFooterContentComponent" #footer>
                 <component :is="sidebar.sidebarFooterContentComponent" />
               </template>
-            </oc-sidebar>
+            </oc-sidebar-nav>
           </focus-trap>
         </transition>
         <div class="uk-width-expand web-content-container">
@@ -312,6 +338,12 @@ export default {
 
     toggleAppNavigationVisibility() {
       this.appNavigationVisible = !this.appNavigationVisible
+
+      if (this.appNavigationVisible) {
+        this.$nextTick(() => {
+          this.$refs.navigationSidebarLogo.$el.focus()
+        })
+      }
     },
 
     $_updateNotifications() {
@@ -376,6 +408,14 @@ export default {
 }
 </script>
 <style>
+html,
+body,
+#web,
+#web-container,
+#web-content {
+  height: 100%;
+}
+
 #web-container {
   background-color: var(--oc-color-background-default);
 }
@@ -432,4 +472,15 @@ export default {
   border: 10px solid;
   border-bottom: 10px solid transparent;
 }
+
+@media only screen and (max-width: 960px) {
+  #web-nav-sidebar {
+    height: 100%;
+    left: 0;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 3;
+  }
+}
 </style>

From 22001ae348fb9b2206e18da5cc234b49ccf0214d Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lukashirt@mail.com>
Date: Tue, 18 May 2021 16:33:07 +0200
Subject: [PATCH 2/3] fix: use correct position for the sidebar close btn

---
 changelog/unreleased/change-use-slots-in-sidebar | 5 +++++
 packages/web-runtime/src/App.vue                 | 8 ++++++++
 2 files changed, 13 insertions(+)
 create mode 100644 changelog/unreleased/change-use-slots-in-sidebar

diff --git a/changelog/unreleased/change-use-slots-in-sidebar b/changelog/unreleased/change-use-slots-in-sidebar
new file mode 100644
index 00000000000..7ffcf92eec9
--- /dev/null
+++ b/changelog/unreleased/change-use-slots-in-sidebar
@@ -0,0 +1,5 @@
+Change: Use slots in the navigation sidebar
+
+In the new sidebar content is defined solely via slots. We've moved all the content into those slots so that the sidebar still gets displayed correctly.
+
+https://github.com/owncloud/web/pull/5105
\ No newline at end of file
diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
index 4c635a28582..2887dc4c341 100644
--- a/packages/web-runtime/src/App.vue
+++ b/packages/web-runtime/src/App.vue
@@ -34,6 +34,7 @@
                     v-if="isSidebarFixed"
                     variation="inverse"
                     appearance="raw"
+                    class="web-sidebar-btn-close"
                     :aria-label="$gettext('Close sidebar navigation')"
                     @click="toggleAppNavigationVisibility"
                   >
@@ -483,4 +484,11 @@ body,
     z-index: 3;
   }
 }
+
+.web-sidebar-btn-close {
+  position: absolute;
+  right: var(--oc-space-medium);
+  top: var(--oc-space-medium);
+  z-index: 3;
+}
 </style>

From c092cb11ffbbcd44c0394cfd8237b47dff849162 Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lukashirt@mail.com>
Date: Wed, 19 May 2021 11:52:47 +0200
Subject: [PATCH 3/3] refactor: remove unused code and adjust aria labels

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

diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
index 2887dc4c341..456ae25077a 100644
--- a/packages/web-runtime/src/App.vue
+++ b/packages/web-runtime/src/App.vue
@@ -25,7 +25,7 @@
               id="web-nav-sidebar"
               v-touch:swipe.left="handleNavSwipe"
               class="oc-app-navigation"
-              :accessible-label="$gettext('Application navigation')"
+              :accessible-label="$gettext('Navigation menu')"
               :class="sidebarClasses"
             >
               <template #header>
@@ -35,13 +35,13 @@
                     variation="inverse"
                     appearance="raw"
                     class="web-sidebar-btn-close"
-                    :aria-label="$gettext('Close sidebar navigation')"
+                    :aria-label="$gettext('Close navigation menu')"
                     @click="toggleAppNavigationVisibility"
                   >
-                    <oc-icon name="close" aria-hidden="true" />
+                    <oc-icon name="close" />
                   </oc-button>
                   <router-link ref="navigationSidebarLogo" to="/">
-                    <oc-logo :src="logoImage" alt="ownCloud" />
+                    <oc-logo :src="logoImage" :alt="sidebarLogoAlt" />
                   </router-link>
                 </div>
               </template>
@@ -181,10 +181,6 @@ export default {
       return this.configuration.theme.logo.sidebar
     },
 
-    accessibleLabel() {
-      return this.$gettext('Sidebar navigation menu')
-    },
-
     sidebarLogoAlt() {
       return this.$gettext('Navigate to all files page')
     },