Permanently visible left sidebar

Check if the navigation is visible in tests

Use left swipe to close nav

Added transition

Updated ODS

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

@@ -86,7 +86,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",
@@ -109,6 +109,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",
@@ -140,7 +141,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,48 @@ 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 > 960) {
+ return 'push-right'
+ }
+
+ return 'fade'
  }
  },
  watch: {
@@ -126,11 +173,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 +193,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 +225,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"

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