Permanently visible left sidebar

Check if the navigation is visible in tests

apps/files/src/components/FilesAppBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="files-app-bar" class="oc-app-bar">
+  <div id="files-app-bar" class="oc-app-bar uk-padding-small">
     <file-drop
       v-if="!isIE11()"
       :root-path="item"

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

src/Phoenix.vue

@@ -1,52 +1,56 @@
 <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>
+        <router-view name="fullscreen" />
       </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"
+      <div v-else key="core-content" class="uk-height-1-1 uk-flex uk-flex-row uk-flex-row">
+        <oc-sidebar
+          class="oc-app-navigation"
+          :logo-img="logoImage"
+          :product-name="productName"
+          :nav-items="navItems"
+          :class="sidebarClasses"
+          :fixed="isSidebarFixed"
+          @closed="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>
-      </template>
+        <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 +77,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 +104,36 @@ 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
     }
   },
   watch: {
@@ -126,11 +157,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 +177,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 +209,17 @@ 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
     }
   }
 }

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"

src/components/Notifications.vue

@@ -1,10 +1,9 @@
 <template>
-  <div id="oc-notification" class="uk-navbar-item">
+  <div id="oc-notification">
     <oc-icon
       id="oc-notification-bell"
-      class="oc-cursor-pointer"
+      class="oc-cursor-pointer uk-flex uk-flex-middle"
       name="bell"
-      variation="inverted"
       aria-label="Notifications"
     />
     <oc-drop