Permanently visible left sidebar

Check if the navigation is visible in tests

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

src/components/Top-Bar.vue

@@ -1,34 +1,22 @@
 <template>
- <oc-navbar id="oc-topbar" tag="header" class="oc-topbar uk-position-relative uk-navbar">
- <oc-navbar-item position="left">
- <oc-button
- v-if="hasAppNavigation"
- key="extension-navigation-button"
- ref="menubutton"
- icon="menu"
- variation="primary"
- class="oc-topbar-menu-burger uk-height-1-1"
- :aria-label="$gettext('Menu')"
- @click="toggleAppNavigationVisibility"
- >
- <span v-translate class="oc-topbar-menu-burger-label">Menu</span>
- </oc-button>
- <span
- v-else
- key="extension-title"
- class="topbar-current-extension-title uk-margin-left"
- v-text="currentExtensionName"
- />
- </oc-navbar-item>
- <oc-navbar-item position="center">
- <router-link to="/" class="oc-topbar-icon">ownCloud X</router-link>
- </oc-navbar-item>
- <oc-navbar-item v-if="!isPublicPage" position="right">
+ <header
+ id="oc-topbar"
+ class="uk-flex uk-flex-middle uk-flex-wrap oc-border-bottom uk-padding-small"
+ >
+ <oc-button
+ variation="raw"
+ class="oc-app-navigation-toggle uk-hidden@l"
+ :aria-label="$gettext('Open navigation menu')"
+ @click="toggleAppNavigationVisibility"
+ >
+ <oc-icon name="menu" class="uk-flex" aria-hidden="true" />
+ </oc-button>
+ <oc-grid v-if="!isPublicPage" flex gutter="small" class="uk-width-expand uk-flex-right">
  <notifications v-if="activeNotifications.length" />
- <applications-menu :applications-list="applicationsList" />
+ <applications-menu v-if="applicationsList.length > 0" :applications-list="applicationsList" />
  <user-menu :user-id="userId" :user-display-name="userDisplayName" />
- </oc-navbar-item>
- </oc-navbar>
+ </oc-grid>
+ </header>
 </template>
 
 <script>
@@ -94,9 +82,13 @@ export default {
 }
 </script>
 
-TODO: Move to ODS and enable theming
 <style scoped>
+/* TODO: Move to ODS and enable theming */
 .topbar-current-extension-title {
  color: white;
 }
+
+#oc-topbar {
+ background: white;
+}
 </style>