Permanently visible left sidebar

apps/files/src/components/FileOpenActions.vue

@@ -80,3 +80,15 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.oc-file-actions.uk-open > .uk-offcanvas-bar {
+  width: calc(100vw - 300px);
+}
+
+@media screen and (max-width: 960px) {
+  .oc-file-actions.uk-open > .uk-offcanvas-bar {
+    width: 100vw;
+  }
+}
+</style>

changelog/unreleased/branded-sidebar

@@ -0,0 +1,6 @@
+Change: Permanently visible branded left navigation sidebar
+
+We've made left navigation sidebar permanently visible and moved branding (logo and brand color) into it.
+
+https://github.com/owncloud/phoenix/issues/3395
+https://github.com/owncloud/phoenix/pull/3442

package.json

@@ -87,7 +87,7 @@
     "node-fs-extra": "^0.8.2",
     "npm-run-all": "^4.1.5",
     "oidc-client": "^1.9.1",
-    "owncloud-design-system": "^1.3.0",
+    "owncloud-design-system": "^1.5.0",
     "owncloud-sdk": "^1.0.0-608",
     "p-limit": "^2.2.1",
     "p-queue": "^6.1.1",
@@ -110,6 +110,7 @@
     "vue-router": "^3.1.3",
     "vue-scrollto": "^2.15.0",
     "vue-template-compiler": "^2.6.10",
+    "vue2-touch-events": "^2.2.1",
     "vuex": "^3.1.1",
     "vuex-persist": "2.0.1",
     "vuex-router-sync": "^5.0.0",
@@ -141,7 +142,7 @@
       "git add"
     ]
   },
-  "engines": { 
-    "node": ">=10 <13" 
+  "engines": {
+    "node": ">=10 <13"
   }
 }

src/Phoenix.vue

@@ -1,52 +1,60 @@
 <template>
-  <div>
+  <div class="uk-height-1-1">
     <skip-to target="main">Skip to main</skip-to>
     <div id="Phoenix" class="uk-height-1-1">
       <template v-if="!showHeader">
-        <router-view name="fullscreen"></router-view>
-      </template>
-      <template v-else>
-        <message-bar :active-messages="activeMessages" @deleteMessage="$_deleteMessage" />
-        <top-bar
-          :applications-list="$_applicationsList"
-          :active-notifications="activeNotifications"
-          :user-id="user.id"
-          :user-display-name="user.displayname"
-          :has-app-navigation="appNavigationEntries.length > 1"
-          @toggleAppNavigationVisibility="toggleAppNavigationVisibility"
-        />
-        <side-menu
-          v-if="appNavigationEntries.length > 1"
-          :visible="appNavigationVisible"
-          :entries="appNavigationEntries"
-          @closed="hideAppNavigation"
-        />
-        <main id="main">
-          <router-view id="oc-app-container" name="app" class="uk-height-1-1"></router-view>
-        </main>
+        <router-view name="fullscreen" />
       </template>
+      <div v-else key="core-content" class="uk-height-1-1 uk-flex uk-flex-row uk-flex-row">
+        <transition :name="appNavigationAnimation">
+          <oc-sidebar
+            v-if="isSidebarVisible"
+            v-touch:swipe.left="handleNavSwipe"
+            class="oc-app-navigation"
+            :logo-img="logoImage"
+            :product-name="productName"
+            :nav-items="navItems"
+            :class="sidebarClasses"
+            :fixed="isSidebarFixed"
+            @close="toggleAppNavigationVisibility"
+          />
+        </transition>
+        <div class="uk-width-expand">
+          <top-bar
+            class="uk-width-expand"
+            :applications-list="$_applicationsList"
+            :active-notifications="activeNotifications"
+            :user-id="user.id"
+            :user-display-name="user.displayname"
+            @toggleAppNavigationVisibility="toggleAppNavigationVisibility"
+          />
+          <main id="main">
+            <message-bar :active-messages="activeMessages" @deleteMessage="$_deleteMessage" />
+            <router-view id="oc-app-container" name="app" class="uk-height-1-1" />
+          </main>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 <script>
 import 'inert-polyfill'
 import { mapGetters, mapState, mapActions } from 'vuex'
 import TopBar from './components/Top-Bar.vue'
-import Menu from './components/Menu.vue'
 import MessageBar from './components/MessageBar.vue'
 import SkipTo from './components/SkipTo.vue'
 
 export default {
   components: {
     MessageBar,
-    'side-menu': Menu,
     TopBar,
     SkipTo
   },
   data() {
     return {
       appNavigationVisible: false,
-      $_notificationsInterval: null
+      $_notificationsInterval: null,
+      windowWidth: 0
     }
   },
   computed: {
@@ -73,7 +81,22 @@ export default {
       return list.flat()
     },
 
-    appNavigationEntries() {
+    showHeader() {
+      return this.$route.meta.hideHeadbar !== true
+    },
+    favicon() {
+      return this.configuration.theme.logo.favicon
+    },
+
+    logoImage() {
+      return `/themes/${this.configuration.theme.name}/assets/logo.png`
+    },
+
+    productName() {
+      return this.configuration.theme.general.name
+    },
+
+    navItems() {
       if (this.publicPage()) {
         return []
       }
@@ -85,24 +108,52 @@ export default {
         return []
       }
 
-      return items.filter(item => {
-        if (item.enabled === undefined) {
-          return true
-        }
-
+      items.filter(item => {
         if (this.capabilities === undefined) {
           return false
         }
 
+        if (item.enabled === undefined) {
+          return true
+        }
+
         return item.enabled(this.capabilities)
       })
+
+      return items.map(item => {
+        item.name = this.$gettext(item.name)
+        item.active = this.$route.name === item.route.name
+
+        return item
+      })
     },
 
-    showHeader() {
-      return this.$route.meta.hideHeadbar !== true
+    sidebarClasses() {
+      if (this.appNavigationVisible) {
+        return ''
+      }
+
+      return 'uk-visible@l'
     },
-    favicon() {
-      return this.configuration.theme.logo.favicon
+
+    isSidebarFixed() {
+      return this.windowWidth <= 960
+    },
+
+    isSidebarVisible() {
+      return this.windowWidth >= 1200 || this.appNavigationVisible
+    },
+
+    appNavigationAnimation() {
+      if (this.windowWidth > 1200) {
+        return null
+      }
+
+      if (this.windowWidth > 960) {
+        return 'push-right'
+      }
+
+      return 'fade'
     }
   },
   watch: {
@@ -126,11 +177,17 @@ export default {
       }
     }
   },
+
+  beforeDestroy() {
+    window.removeEventListener('resize', this.onResize)
+  },
+
   destroyed() {
     if (this.$_notificationsInterval) {
       clearInterval(this.$_notificationsInterval)
     }
   },
+
   metaInfo() {
     const metaInfo = {
       title: this.configuration.theme.general.name
@@ -140,9 +197,18 @@ export default {
     }
     return metaInfo
   },
+
+  mounted() {
+    this.$nextTick(() => {
+      window.addEventListener('resize', this.onResize)
+      this.onResize()
+    })
+  },
+
   beforeMount() {
     this.initAuth()
   },
+
   methods: {
     ...mapActions(['initAuth', 'fetchNotifications', 'deleteMessage']),
 
@@ -163,6 +229,25 @@ export default {
 
     $_deleteMessage(item) {
       this.deleteMessage(item)
+    },
+
+    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
     }
   }
 }

src/components/ApplicationsMenu.vue

@@ -1,13 +1,14 @@
 <template>
-  <div v-if="!!applicationsList.length">
+  <div>
     <oc-button
       id="_appSwitcherButton"
       ref="menubutton"
-      icon="apps"
-      variation="primary"
-      class="oc-topbar-menu-burger uk-height-1-1"
+      variation="raw"
+      class="oc-topbar-menu-burger"
       :aria-label="$gettext('Application Switcher')"
-    />
+    >
+      <oc-icon name="apps" aria-hidden="true" class="uk-flex" />
+    </oc-button>
     <oc-drop
       ref="menu"
       drop-id="app-switcher-dropdown"