Added tag to left sidebar

remove padding

Adjust tag height

Add changelog item

lowercase beta tag

Change bg color for tag

Update snapshots

Adjustments according to PR review

Update changelog/unreleased/enhancement-sidebar-nav-tags

Co-authored-by: Jannik Stehle <50302941+JammingBen@users.noreply.github.com>

Fix linter

changelog/unreleased/enhancement-sidebar-nav-tags

@@ -0,0 +1,6 @@
+Enhancement: Side bar nav tags
+
+We have implemented a way to show a tag next to the sidebar navigation item link text
+
+https://github.com/owncloud/web/pull/6540
+https://github.com/owncloud/web/issues/6259

packages/web-app-files/src/index.js

@@ -80,6 +80,7 @@ const navItems = [
  {
  name: $gettext('Spaces'),
  icon: 'layout-grid',
+ tag: $gettext('beta'),
  route: {
  path: `/${appInfo.id}/spaces/projects`
  },

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

@@ -27,6 +27,7 @@
  :fill-type="link.fillType"
  :name="link.name"
  :collapsed="navigation.closed"
+ :tag="link.tag"
  />
  </oc-list>
  </nav>

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

@@ -10,8 +10,11 @@
  :data-nav-id="index"
  :data-nav-name="navName"
  >
- <oc-icon :name="icon" :fill-type="fillType" />
- <span class="oc-ml-m text" :class="{ 'text-invisible': collapsed }" v-text="name" />
+ <span class="oc-flex">
+ <oc-icon :name="icon" :fill-type="fillType" />
+ <span class="oc-ml-m text" :class="{ 'text-invisible': collapsed }" v-text="name" />
+ </span>
+ <oc-tag v-if="tag" class="oc-py-rm">{{ tag }}</oc-tag>
  <sidebar-nav-item-highlight :index="index" :active="active" />
  </oc-button>
  </li>
@@ -56,6 +59,11 @@ export default {
  type: Boolean,
  required: false,
  default: false
+ },
+ tag: {
+ type: String,
+ required: false,
+ default: null
  }
  },
  computed: {
@@ -83,12 +91,17 @@ export default {
  position: relative;
  align-items: center !important;
  display: flex !important;
- justify-content: flex-start !important;
+ justify-content: space-between !important;
  padding: var(--oc-space-small) !important;
  border-radius: 5px;
  white-space: nowrap;
  user-select: none;
 
+ .oc-tag {
+ color: var(--oc-color-text-default);
+ background-color: var(--oc-color-background-highlight);
+ min-height: 24px !important;
+ }
  .text {
  opacity: 1;
  transition: all 0s;

packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.js.snap

@@ -2,15 +2,17 @@
 
 exports[`OcSidebarNav renders navItem with toolTip if collapsed 1`] = `
 <li class="oc-sidebar-nav-item oc-pb-xs oc-px-s" id="123">
- <router-link-stub to="/files/list/all" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-sidebar-nav-item-link" data-nav-id="5"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span> <span class="oc-ml-m text text-invisible">All files</span>
+ <router-link-stub to="/files/list/all" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-sidebar-nav-item-link" data-nav-id="5"><span class="oc-flex"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span> <span class="oc-ml-m text text-invisible">All files</span></span>
+ <!---->
  <!---->
  </router-link-stub>
 </li>
 `;
 
 exports[`OcSidebarNav renders navItem without toolTip if expanded 1`] = `
 <li class="oc-sidebar-nav-item oc-pb-xs oc-px-s" id="123">
- <router-link-stub to="/files/list/all" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-sidebar-nav-item-link" data-nav-id="5"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span> <span class="oc-ml-m text">All files</span>
+ <router-link-stub to="/files/list/all" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-sidebar-nav-item-link" data-nav-id="5"><span class="oc-flex"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span> <span class="oc-ml-m text">All files</span></span>
+ <!---->
  <!---->
  </router-link-stub>
 </li>