Add versions to the left sidebar bottom

changelog/unreleased/enhancement-add-versions-to-the-left-sidebar-bottom

@@ -0,0 +1,6 @@
+Enhancement: Add versions to the left sidebar bottom
+
+We have added the versions to the left sidebar bottom to make it easier for users to find the versions of the server and web UI.
+
+https://github.com/owncloud/web/pull/11561
+https://github.com/owncloud/enterprise/issues/6814

packages/web-runtime/src/components/SidebarNav/SidebarNav.vue

@@ -44,12 +44,18 @@
       </oc-list>
     </nav>
     <!-- @slot bottom content of the sidebar -->
-    <slot name="bottom" />
+    <slot name="bottom">
+      <div v-if="!closed" class="versions oc-pb-s oc-pl-s oc-text-small oc-text-muted">
+        <span v-text="backendVersion" />
+        <span v-text="webVersion" />
+      </div>
+    </slot>
   </div>
 </template>
 
 <script lang="ts">
 import {
+  computed,
   defineComponent,
   nextTick,
   onBeforeUnmount,
@@ -62,6 +68,9 @@ import {
 import * as uuid from 'uuid'
 import SidebarNavItem from './SidebarNavItem.vue'
 import { NavItem } from '../../helpers/navItems'
+import { getBackendVersion, getWebVersion } from '../../container/versions'
+import { useCapabilityStore } from '@ownclouders/web-pkg'
+import sideBarToggle from '../Topbar/SideBarToggle.vue'
 
 type NavItemRef = InstanceType<typeof SidebarNavItem>
 
@@ -81,6 +90,10 @@ export default defineComponent({
     let resizeObserver: ResizeObserver
     const navItemRefs = ref<Record<string, NavItemRef>>({})
     const highlighterAttrs = ref<Record<string, unknown>>({})
+    const capabilityStore = useCapabilityStore()
+
+    const webVersion = computed(() => getWebVersion())
+    const backendVersion = computed(() => getBackendVersion({ capabilityStore }))
 
     onMounted(() => {
       const navBar = document.getElementById('web-nav-sidebar')
@@ -128,9 +141,12 @@ export default defineComponent({
       { deep: true, immediate: true }
     )
 
-    return { highlighterAttrs, navItemRefs }
+    return { highlighterAttrs, navItemRefs, backendVersion, webVersion }
   },
   computed: {
+    sideBarToggle() {
+      return sideBarToggle
+    },
     toggleSidebarButtonClass() {
       return this.closed
         ? 'toggle-sidebar-button-collapsed'
@@ -187,6 +203,14 @@ export default defineComponent({
     justify-content: flex-end !important;
   }
 
+  .versions {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-end;
+    flex-grow: 1;
+  }
+
   .oc-sidebar-nav li a:not(.active),
   .oc-sidebar-nav li button:not(.active) {
     &:hover,