From 5c13e7fd8e15642606d754285aa5ca0a0f2a9fbc Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 25 Apr 2022 10:54:03 +0200
Subject: [PATCH 1/7] Make OcBreadcrumb overflow to the left and hide overflown
 items

---
 .../OcBreadcrumb/OcBreadcrumb.spec.js         |   2 +-
 .../molecules/OcBreadcrumb/OcBreadcrumb.vue   | 166 +++++++++-------
 .../__snapshots__/OcBreadcrumb.spec.js.snap   | 188 +++++++++---------
 3 files changed, 187 insertions(+), 169 deletions(-)

diff --git a/src/components/molecules/OcBreadcrumb/OcBreadcrumb.spec.js b/src/components/molecules/OcBreadcrumb/OcBreadcrumb.spec.js
index 6d4e78ea4..38d87fb89 100644
--- a/src/components/molecules/OcBreadcrumb/OcBreadcrumb.spec.js
+++ b/src/components/molecules/OcBreadcrumb/OcBreadcrumb.spec.js
@@ -18,7 +18,7 @@ describe("OcBreadcrumb", () => {
     })
 
     expect(wrapper.props().variation).toMatch("lead")
-    expect(wrapper.classes()).toContain("oc-breadcrumb-lead")
+    expect(wrapper.html()).toContain("oc-breadcrumb oc-breadcrumb-lead")
     expect(wrapper).toMatchSnapshot()
   })
   it("displays all items", () => {
diff --git a/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue b/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue
index bfaf840ee..81ad5a347 100644
--- a/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue
+++ b/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue
@@ -1,88 +1,90 @@
 <template>
-  <nav :class="`oc-breadcrumb oc-breadcrumb-${variation}`">
-    <ol class="oc-breadcrumb-list oc-mb-s">
-      <li v-for="(item, index) in items" :key="index" class="oc-breadcrumb-list-item">
-        <router-link v-if="item.to" :aria-current="getAriaCurrent(index)" :to="item.to">
-          <span>{{ item.text }}</span>
-        </router-link>
-        <oc-icon
-          v-if="item.to"
-          color="var(--oc-color-text-default)"
-          name="arrow-right-s"
-          fill-type="line"
-        />
-        <oc-button
-          v-else-if="item.onClick"
-          :aria-current="getAriaCurrent(index)"
-          appearance="raw"
-          @click="item.onClick"
-        >
-          <span>{{ item.text }}</span>
-        </oc-button>
-        <span v-else :aria-current="getAriaCurrent(index)" tabindex="-1" v-text="item.text" />
-        <template v-if="showContextMenu && index === items.length - 1">
+  <div class="oc-breadcrumb-wrapper">
+    <nav :class="`oc-breadcrumb oc-breadcrumb-${variation}`">
+      <ol id="test" class="oc-breadcrumb-list oc-mb-s">
+        <li v-for="(item, index) in items" :key="index" class="oc-breadcrumb-list-item">
+          <router-link v-if="item.to" :aria-current="getAriaCurrent(index)" :to="item.to">
+            <span>{{ item.text }}</span>
+          </router-link>
+          <oc-icon
+            v-if="item.to"
+            color="var(--oc-color-text-default)"
+            name="arrow-right-s"
+            fill-type="line"
+          />
           <oc-button
-            id="oc-breadcrumb-contextmenu-trigger"
-            v-oc-tooltip="contextMenuLabel"
-            :aria-label="contextMenuLabel"
+            v-else-if="item.onClick"
+            :aria-current="getAriaCurrent(index)"
             appearance="raw"
+            @click="item.onClick"
           >
-            <oc-icon name="more-2" color="var(--oc-color-text-default)" />
+            <span>{{ item.text }}</span>
           </oc-button>
-          <oc-drop
-            drop-id="oc-breadcrumb-contextmenu"
-            toggle="#oc-breadcrumb-contextmenu-trigger"
-            mode="click"
-            close-on-click
-            :padding-size="contextMenuPadding"
-            @click.native.stop.prevent
-          >
-            <!-- @slot Add context actions that open in a dropdown when clicking on the "three dots" button -->
-            <slot name="contextMenu" />
-          </oc-drop>
-        </template>
-      </li>
-    </ol>
-    <div class="oc-breadcrumb-drop">
-      <label
-        ref="mobileDropdown"
-        tabindex="0"
-        class="oc-breadcrumb-drop-label"
-        @keydown.enter="$refs.mobileDropdown.click()"
-      >
-        <span
-          v-if="currentFolder"
-          class="oc-breadcrumb-drop-label-text"
-          aria-current="page"
-          v-text="currentFolder.text"
-        />
-        <oc-icon
-          class="oc-breadcrumb-drop-label-icon"
-          name="arrow-down-s"
-          :accessible-label="$gettext('Expand more')"
-        />
-      </label>
-      <oc-drop v-if="dropdownItems">
-        <ol>
-          <li v-for="(item, index) in dropdownItems" :key="index">
-            <router-link v-if="item.to" :aria-current="getAriaCurrent(index)" :to="item.to">
-              {{ item.text }}
-            </router-link>
+          <span v-else :aria-current="getAriaCurrent(index)" tabindex="-1" v-text="item.text" />
+          <template v-if="showContextMenu && index === items.length - 1">
             <oc-button
-              v-else-if="item.onClick"
-              justify-content="left"
+              id="oc-breadcrumb-contextmenu-trigger"
+              v-oc-tooltip="contextMenuLabel"
+              :aria-label="contextMenuLabel"
               appearance="raw"
-              :aria-current="getAriaCurrent(index)"
-              @click="item.onClick"
             >
-              {{ item.text }}
+              <oc-icon name="more-2" color="var(--oc-color-text-default)" />
             </oc-button>
-            <span v-else :aria-current="getAriaCurrent(index)" v-text="item.text" />
-          </li>
-        </ol>
-      </oc-drop>
-    </div>
-  </nav>
+            <oc-drop
+              drop-id="oc-breadcrumb-contextmenu"
+              toggle="#oc-breadcrumb-contextmenu-trigger"
+              mode="click"
+              close-on-click
+              :padding-size="contextMenuPadding"
+              @click.native.stop.prevent
+            >
+              <!-- @slot Add context actions that open in a dropdown when clicking on the "three dots" button -->
+              <slot name="contextMenu" />
+            </oc-drop>
+          </template>
+        </li>
+      </ol>
+      <div class="oc-breadcrumb-drop">
+        <label
+          ref="mobileDropdown"
+          tabindex="0"
+          class="oc-breadcrumb-drop-label"
+          @keydown.enter="$refs.mobileDropdown.click()"
+        >
+          <span
+            v-if="currentFolder"
+            class="oc-breadcrumb-drop-label-text"
+            aria-current="page"
+            v-text="currentFolder.text"
+          />
+          <oc-icon
+            class="oc-breadcrumb-drop-label-icon"
+            name="arrow-down-s"
+            :accessible-label="$gettext('Expand more')"
+          />
+        </label>
+        <oc-drop v-if="dropdownItems">
+          <ol>
+            <li v-for="(item, index) in dropdownItems" :key="index">
+              <router-link v-if="item.to" :aria-current="getAriaCurrent(index)" :to="item.to">
+                {{ item.text }}
+              </router-link>
+              <oc-button
+                v-else-if="item.onClick"
+                justify-content="left"
+                appearance="raw"
+                :aria-current="getAriaCurrent(index)"
+                @click="item.onClick"
+              >
+                {{ item.text }}
+              </oc-button>
+              <span v-else :aria-current="getAriaCurrent(index)" v-text="item.text" />
+            </li>
+          </ol>
+        </oc-drop>
+      </div>
+    </nav>
+  </div>
 </template>
 
 <script>
@@ -168,6 +170,18 @@ export default {
 <style lang="scss">
 .oc-breadcrumb {
   overflow: hidden;
+  flex-shrink: 0;
+  width: auto;
+  right: 0;
+  position: absolute;
+  white-space: nowrap;
+
+  &-wrapper {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    display: flex;
+  }
 
   &-list {
     @extend .oc-visible\@s;
diff --git a/src/components/molecules/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.js.snap b/src/components/molecules/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.js.snap
index 54b70d1db..2dc8bc3b2 100644
--- a/src/components/molecules/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.js.snap
+++ b/src/components/molecules/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.js.snap
@@ -1,99 +1,103 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`OcBreadcrumb displays all items 1`] = `
-<nav class="oc-breadcrumb oc-breadcrumb-default">
-  <ol class="oc-breadcrumb-list oc-mb-s">
-    <li class="oc-breadcrumb-list-item">
-      <router-link-stub tag="a" to="[object Object]"><span>First folder</span></router-link-stub>
-      <oc-icon-stub name="arrow-right-s" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="var(--oc-color-text-default)"></oc-icon-stub>
-      <!---->
-    </li>
-    <li class="oc-breadcrumb-list-item">
-      <!---->
-      <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium"><span>Subfolder</span></oc-button-stub>
-      <!---->
-    </li>
-    <li class="oc-breadcrumb-list-item">
-      <router-link-stub tag="a" to="[object Object]"><span>Deep</span></router-link-stub>
-      <oc-icon-stub name="arrow-right-s" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="var(--oc-color-text-default)"></oc-icon-stub>
-      <!---->
-    </li>
-    <li class="oc-breadcrumb-list-item">
-      <!----> <span aria-current="page" tabindex="-1">Deeper ellipsize in responsive mode</span>
-      <!---->
-    </li>
-  </ol>
-  <div class="oc-breadcrumb-drop"><label tabindex="0" class="oc-breadcrumb-drop-label"><span aria-current="page" class="oc-breadcrumb-drop-label-text">Deeper ellipsize in responsive mode</span>
-      <oc-icon-stub name="arrow-down-s" filltype="fill" accessiblelabel="Expand more" type="span" size="medium" variation="passive" color="" class="oc-breadcrumb-drop-label-icon"></oc-icon-stub>
-    </label>
-    <oc-drop-stub dropid="oc-drop-2" toggle="" position="bottom-start" mode="click" paddingsize="medium">
-      <ol>
-        <li>
-          <router-link-stub tag="a" to="[object Object]">
-            Deep
-          </router-link-stub>
-        </li>
-        <li>
-          <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
-            Subfolder
-          </oc-button-stub>
-        </li>
-        <li>
-          <router-link-stub tag="a" to="[object Object]">
-            First folder
-          </router-link-stub>
-        </li>
-      </ol>
-    </oc-drop-stub>
-  </div>
-</nav>
+<div class="oc-breadcrumb-wrapper">
+  <nav class="oc-breadcrumb oc-breadcrumb-default">
+    <ol id="test" class="oc-breadcrumb-list oc-mb-s">
+      <li class="oc-breadcrumb-list-item">
+        <router-link-stub tag="a" to="[object Object]"><span>First folder</span></router-link-stub>
+        <oc-icon-stub name="arrow-right-s" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="var(--oc-color-text-default)"></oc-icon-stub>
+        <!---->
+      </li>
+      <li class="oc-breadcrumb-list-item">
+        <!---->
+        <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium"><span>Subfolder</span></oc-button-stub>
+        <!---->
+      </li>
+      <li class="oc-breadcrumb-list-item">
+        <router-link-stub tag="a" to="[object Object]"><span>Deep</span></router-link-stub>
+        <oc-icon-stub name="arrow-right-s" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="var(--oc-color-text-default)"></oc-icon-stub>
+        <!---->
+      </li>
+      <li class="oc-breadcrumb-list-item">
+        <!----> <span aria-current="page" tabindex="-1">Deeper ellipsize in responsive mode</span>
+        <!---->
+      </li>
+    </ol>
+    <div class="oc-breadcrumb-drop"><label tabindex="0" class="oc-breadcrumb-drop-label"><span aria-current="page" class="oc-breadcrumb-drop-label-text">Deeper ellipsize in responsive mode</span>
+        <oc-icon-stub name="arrow-down-s" filltype="fill" accessiblelabel="Expand more" type="span" size="medium" variation="passive" color="" class="oc-breadcrumb-drop-label-icon"></oc-icon-stub>
+      </label>
+      <oc-drop-stub dropid="oc-drop-2" toggle="" position="bottom-start" mode="click" paddingsize="medium">
+        <ol>
+          <li>
+            <router-link-stub tag="a" to="[object Object]">
+              Deep
+            </router-link-stub>
+          </li>
+          <li>
+            <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
+              Subfolder
+            </oc-button-stub>
+          </li>
+          <li>
+            <router-link-stub tag="a" to="[object Object]">
+              First folder
+            </router-link-stub>
+          </li>
+        </ol>
+      </oc-drop-stub>
+    </div>
+  </nav>
+</div>
 `;
 
 exports[`OcBreadcrumb sets correct variation 1`] = `
-<nav class="oc-breadcrumb oc-breadcrumb-lead">
-  <ol class="oc-breadcrumb-list oc-mb-s">
-    <li class="oc-breadcrumb-list-item">
-      <router-link-stub tag="a" to="[object Object]"><span>First folder</span></router-link-stub>
-      <oc-icon-stub name="arrow-right-s" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="var(--oc-color-text-default)"></oc-icon-stub>
-      <!---->
-    </li>
-    <li class="oc-breadcrumb-list-item">
-      <!---->
-      <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium"><span>Subfolder</span></oc-button-stub>
-      <!---->
-    </li>
-    <li class="oc-breadcrumb-list-item">
-      <router-link-stub tag="a" to="[object Object]"><span>Deep</span></router-link-stub>
-      <oc-icon-stub name="arrow-right-s" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="var(--oc-color-text-default)"></oc-icon-stub>
-      <!---->
-    </li>
-    <li class="oc-breadcrumb-list-item">
-      <!----> <span aria-current="page" tabindex="-1">Deeper ellipsize in responsive mode</span>
-      <!---->
-    </li>
-  </ol>
-  <div class="oc-breadcrumb-drop"><label tabindex="0" class="oc-breadcrumb-drop-label"><span aria-current="page" class="oc-breadcrumb-drop-label-text">Deeper ellipsize in responsive mode</span>
-      <oc-icon-stub name="arrow-down-s" filltype="fill" accessiblelabel="Expand more" type="span" size="medium" variation="passive" color="" class="oc-breadcrumb-drop-label-icon"></oc-icon-stub>
-    </label>
-    <oc-drop-stub dropid="oc-drop-1" toggle="" position="bottom-start" mode="click" paddingsize="medium">
-      <ol>
-        <li>
-          <router-link-stub tag="a" to="[object Object]">
-            Deep
-          </router-link-stub>
-        </li>
-        <li>
-          <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
-            Subfolder
-          </oc-button-stub>
-        </li>
-        <li>
-          <router-link-stub tag="a" to="[object Object]">
-            First folder
-          </router-link-stub>
-        </li>
-      </ol>
-    </oc-drop-stub>
-  </div>
-</nav>
+<div class="oc-breadcrumb-wrapper">
+  <nav class="oc-breadcrumb oc-breadcrumb-lead">
+    <ol id="test" class="oc-breadcrumb-list oc-mb-s">
+      <li class="oc-breadcrumb-list-item">
+        <router-link-stub tag="a" to="[object Object]"><span>First folder</span></router-link-stub>
+        <oc-icon-stub name="arrow-right-s" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="var(--oc-color-text-default)"></oc-icon-stub>
+        <!---->
+      </li>
+      <li class="oc-breadcrumb-list-item">
+        <!---->
+        <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium"><span>Subfolder</span></oc-button-stub>
+        <!---->
+      </li>
+      <li class="oc-breadcrumb-list-item">
+        <router-link-stub tag="a" to="[object Object]"><span>Deep</span></router-link-stub>
+        <oc-icon-stub name="arrow-right-s" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="var(--oc-color-text-default)"></oc-icon-stub>
+        <!---->
+      </li>
+      <li class="oc-breadcrumb-list-item">
+        <!----> <span aria-current="page" tabindex="-1">Deeper ellipsize in responsive mode</span>
+        <!---->
+      </li>
+    </ol>
+    <div class="oc-breadcrumb-drop"><label tabindex="0" class="oc-breadcrumb-drop-label"><span aria-current="page" class="oc-breadcrumb-drop-label-text">Deeper ellipsize in responsive mode</span>
+        <oc-icon-stub name="arrow-down-s" filltype="fill" accessiblelabel="Expand more" type="span" size="medium" variation="passive" color="" class="oc-breadcrumb-drop-label-icon"></oc-icon-stub>
+      </label>
+      <oc-drop-stub dropid="oc-drop-1" toggle="" position="bottom-start" mode="click" paddingsize="medium">
+        <ol>
+          <li>
+            <router-link-stub tag="a" to="[object Object]">
+              Deep
+            </router-link-stub>
+          </li>
+          <li>
+            <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
+              Subfolder
+            </oc-button-stub>
+          </li>
+          <li>
+            <router-link-stub tag="a" to="[object Object]">
+              First folder
+            </router-link-stub>
+          </li>
+        </ol>
+      </oc-drop-stub>
+    </div>
+  </nav>
+</div>
 `;

From e30e160261ca7828b39fe221a259f1c442da8bc3 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 25 Apr 2022 15:27:52 +0200
Subject: [PATCH 2/7] WIP

---
 package.json                                  |  3 +++
 .../molecules/OcBreadcrumb/OcBreadcrumb.vue   | 27 ++++++++++++++++---
 src/system.js                                 |  5 +++-
 yarn.lock                                     |  5 ++++
 4 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 36ef31b01..43e72f578 100644
--- a/package.json
+++ b/package.json
@@ -153,5 +153,8 @@
   "engines": {
     "node": ">= 14.0.0",
     "npm": ">= 3.0.0"
+  },
+  "dependencies": {
+    "vue-observe-visibility": "^1.0.0"
   }
 }
diff --git a/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue b/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue
index 81ad5a347..e74d9fe66 100644
--- a/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue
+++ b/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="oc-breadcrumb-wrapper">
-    <nav :class="`oc-breadcrumb oc-breadcrumb-${variation}`">
+    <nav :class="`oc-breadcrumb oc-breadcrumb-${variation}`" :style="collapsedItems.length > 0 ? { 'right': 0 } : { 'left': 0 }">
       <ol id="test" class="oc-breadcrumb-list oc-mb-s">
         <li v-for="(item, index) in items" :key="index" class="oc-breadcrumb-list-item">
-          <router-link v-if="item.to" :aria-current="getAriaCurrent(index)" :to="item.to">
+          <router-link v-observe-visibility="visibilityChanged" v-if="item.to" :data-key="index" :aria-current="getAriaCurrent(index)" :to="item.to">
             <span>{{ item.text }}</span>
           </router-link>
           <oc-icon
@@ -91,7 +91,6 @@
 import OcButton from "../../atoms/OcButton/OcButton.vue"
 import OcDrop from "../../atoms/OcDrop/OcDrop.vue"
 import OcIcon from "../../atoms/OcIcon/OcIcon.vue"
-
 /**
  * Displays a breadcrumb. Each item in the items property has the following elements:
  *
@@ -102,6 +101,11 @@ export default {
   name: "OcBreadcrumb",
   status: "ready",
   release: "1.0.0",
+  data: () => {
+    return {
+      collapsedItems: []
+    }
+  },
 
   components: {
     OcDrop,
@@ -159,10 +163,26 @@ export default {
       return !!this.$slots.contextMenu
     },
   },
+
+  mounted() {
+  },
   methods: {
     getAriaCurrent(index) {
       return this.items.length - 1 === index ? "page" : null
     },
+    visibilityChanged(isVisible, data2) {
+      var key = data2.target.getAttribute("data-key")
+      var item = this.items[key]
+      console.log(item)
+      if(isVisible) {
+        this.collapsedItems.slice(this.collapsedItems.indexOf(item), 1)
+      }else {
+        console.log(item)
+        this.collapsedItems.push(item)
+
+        console.log(this.collapsedItems)
+      }
+    }
   },
 }
 </script>
@@ -172,7 +192,6 @@ export default {
   overflow: hidden;
   flex-shrink: 0;
   width: auto;
-  right: 0;
   position: absolute;
   white-space: nowrap;
 
diff --git a/src/system.js b/src/system.js
index c52fcd482..c2297f345 100644
--- a/src/system.js
+++ b/src/system.js
@@ -4,7 +4,8 @@
  *
  * You should & can add your own dependencies here if needed.
  */
-
+import Vue from 'vue'
+import { ObserveVisibility } from 'vue-observe-visibility'
 import "./styles/styles.scss"
 import { getSizeClass } from "./utils/sizeClasses.js"
 
@@ -46,6 +47,8 @@ const System = {
 
     Object.keys(components).forEach(name => Vue.component(name, components[name]))
     Object.keys(directives).forEach(name => Vue.directive(name, directives[name]))
+
+    Vue.directive('observe-visibility', ObserveVisibility)
   },
 }
 
diff --git a/yarn.lock b/yarn.lock
index 823f5f903..82a362138 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13153,6 +13153,11 @@ vue-loader@^15.9.0:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-observe-visibility@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/vue-observe-visibility/-/vue-observe-visibility-1.0.0.tgz#17cf1b2caf74022f0f3c95371468ddf2b9573152"
+  integrity sha512-s5TFh3s3h3Mhd3jaz3zGzkVHKHnc/0C/gNr30olO99+yw2hl3WBhK3ng3/f9OF+qkW4+l7GkmwfAzDAcY3lCFg==
+
 vue-select@^3.12.0:
   version "3.18.3"
   resolved "https://registry.yarnpkg.com/vue-select/-/vue-select-3.18.3.tgz#31f188d7181a4a86d07b937303c457efe863c4bc"

From 2fdd2ef1d214ac304e6a7c1b4441731fac2f2797 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 25 Apr 2022 17:28:17 +0200
Subject: [PATCH 3/7] WIP

---
 .../molecules/OcBreadcrumb/OcBreadcrumb.vue   | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue b/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue
index e74d9fe66..b7492e1cf 100644
--- a/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue
+++ b/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="oc-breadcrumb-wrapper">
-    <nav :class="`oc-breadcrumb oc-breadcrumb-${variation}`" :style="collapsedItems.length > 0 ? { 'right': 0 } : { 'left': 0 }">
+    <nav :class="`oc-breadcrumb oc-breadcrumb-${variation}`" :style="collapsedItems2.length > 0 ? { 'right': 0 } : { 'left': 0 }">
       <ol id="test" class="oc-breadcrumb-list oc-mb-s">
         <li v-for="(item, index) in items" :key="index" class="oc-breadcrumb-list-item">
           <router-link v-observe-visibility="visibilityChanged" v-if="item.to" :data-key="index" :aria-current="getAriaCurrent(index)" :to="item.to">
@@ -146,6 +146,18 @@ export default {
     },
   },
   computed: {
+    collapsedItems2() {
+      var result = []
+      for(var ci of this.collapsedItems) {
+        for(var i of this.items) {
+          if(i.to === ci.to) {
+            result.push(ci)
+          }
+        }
+      }
+      console.log(result)
+      return result
+    },
     dropdownItems() {
       if (this.items.length <= 1 || !this.items) return false
 
@@ -173,14 +185,14 @@ export default {
     visibilityChanged(isVisible, data2) {
       var key = data2.target.getAttribute("data-key")
       var item = this.items[key]
-      console.log(item)
       if(isVisible) {
-        this.collapsedItems.slice(this.collapsedItems.indexOf(item), 1)
+        var item2 = Object.keys(this.collapsedItems).filter((key) => {
+          return this.collapsedItems[key].to == item.to;
+        })
+        this.collapsedItems.slice(item2, 1)
       }else {
-        console.log(item)
+        //console.log(item)
         this.collapsedItems.push(item)
-
-        console.log(this.collapsedItems)
       }
     }
   },

From c59a6c6c374961eddd86c794402f24897222edb6 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 26 Apr 2022 11:11:47 +0200
Subject: [PATCH 4/7] Reduce Items in visible and invisible data props

---
 .../molecules/OcBreadcrumb/OcBreadcrumb.vue   | 87 ++++++++++++-------
 1 file changed, 55 insertions(+), 32 deletions(-)

diff --git a/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue b/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue
index b7492e1cf..17454aa13 100644
--- a/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue
+++ b/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="oc-breadcrumb-wrapper">
-    <nav :class="`oc-breadcrumb oc-breadcrumb-${variation}`" :style="collapsedItems2.length > 0 ? { 'right': 0 } : { 'left': 0 }">
-      <ol id="test" class="oc-breadcrumb-list oc-mb-s">
-        <li v-for="(item, index) in items" :key="index" class="oc-breadcrumb-list-item">
-          <router-link v-observe-visibility="visibilityChanged" v-if="item.to" :data-key="index" :aria-current="getAriaCurrent(index)" :to="item.to">
+  <div class="oc-breadcrumb-wrapper" ref="wrapper">
+    <nav :class="`oc-breadcrumb oc-breadcrumb-${variation}`">
+      <ol class="oc-breadcrumb-list oc-mb-s" ref="breadcrumb">
+        <li v-for="(item, index) in visibleItems" :key="index" :data-key="index" class="oc-breadcrumb-list-item">
+          <router-link v-if="item.to" :aria-current="getAriaCurrent(index)" :to="item.to">
             <span>{{ item.text }}</span>
           </router-link>
           <oc-icon
@@ -101,12 +101,13 @@ export default {
   name: "OcBreadcrumb",
   status: "ready",
   release: "1.0.0",
+
   data: () => {
     return {
-      collapsedItems: []
+      visibleItems: [],
+      invisibleItems: []
     }
   },
-
   components: {
     OcDrop,
     OcIcon,
@@ -146,18 +147,6 @@ export default {
     },
   },
   computed: {
-    collapsedItems2() {
-      var result = []
-      for(var ci of this.collapsedItems) {
-        for(var i of this.items) {
-          if(i.to === ci.to) {
-            result.push(ci)
-          }
-        }
-      }
-      console.log(result)
-      return result
-    },
     dropdownItems() {
       if (this.items.length <= 1 || !this.items) return false
 
@@ -176,25 +165,58 @@ export default {
     },
   },
 
+
+  watch: {
+    items: {
+      handler: function (to, from) {
+        this.visibleItems = to
+      }
+    }
+  },
+
   mounted() {
+    this.visibleItems = this.items
+    const resizeObserver = new ResizeObserver(() => {
+      let outerWidth = this.$refs.wrapper.clientWidth
+      const { items, invisibleItems } = Array.from(this.$refs.breadcrumb.childNodes).reverse().reduce((acc, item) => {
+        const itemKey = item.getAttribute("data-key")
+        const metaItem = this.visibleItems[itemKey]
+        if((acc.total + item.clientWidth) > outerWidth) {
+          acc.invisibleItems.push(metaItem)
+          return acc
+        }
+        acc.items.push(metaItem)
+        acc.total += item.clientWidth
+        return acc
+      }, {total: 0, items: [], invisibleItems: []})
+
+      this.visibleItems = items.reverse()
+      this.invisibleItems = invisibleItems.reverse()
+      
+      /* THIS IS FOR DEBUG */
+      var visibleTexts = []
+      for(var item of this.visibleItems) {
+        visibleTexts.push(item.text)
+      }
+      console.log("Currently visible items:", visibleTexts, total)
+
+      var invisibleTexts = []
+      for(var item of this.invisibleItems) {
+        invisibleTexts.push(item.text)
+      }
+      console.log("Currently invisible items:", invisibleTexts, total)
+    });
+    
+    resizeObserver.observe(this.$refs.breadcrumb)
+    resizeObserver.observe(this.$refs.wrapper)
+    this.$on('beforeDestroy', () => {
+      resizeObserver.disconnect()
+    });
   },
   methods: {
     getAriaCurrent(index) {
       return this.items.length - 1 === index ? "page" : null
     },
-    visibilityChanged(isVisible, data2) {
-      var key = data2.target.getAttribute("data-key")
-      var item = this.items[key]
-      if(isVisible) {
-        var item2 = Object.keys(this.collapsedItems).filter((key) => {
-          return this.collapsedItems[key].to == item.to;
-        })
-        this.collapsedItems.slice(item2, 1)
-      }else {
-        //console.log(item)
-        this.collapsedItems.push(item)
-      }
-    }
   },
 }
 </script>
@@ -265,6 +287,7 @@ export default {
 
   /* stylelint-disable */
   &-list-item {
+    display: inline-block;
     a,
     button,
     span {

From b5a20aa4cbe6900683060884bacd38231ce30a2b Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 26 Apr 2022 15:26:05 +0200
Subject: [PATCH 5/7] Make Breadcrumb items reappear after resize

---
 .../molecules/OcBreadcrumb/OcBreadcrumb.vue     | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue b/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue
index 17454aa13..ff9263a3c 100644
--- a/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue
+++ b/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue
@@ -178,9 +178,13 @@ export default {
     this.visibleItems = this.items
     const resizeObserver = new ResizeObserver(() => {
       let outerWidth = this.$refs.wrapper.clientWidth
-      const { items, invisibleItems } = Array.from(this.$refs.breadcrumb.childNodes).reverse().reduce((acc, item) => {
+      let breadcrumbWidth = this.$refs.breadcrumb.clientWidth
+      
+
+      const { items, invisibleItems, total } = Array.from(this.$refs.breadcrumb.childNodes).reverse().reduce((acc, item) => {
         const itemKey = item.getAttribute("data-key")
         const metaItem = this.visibleItems[itemKey]
+        metaItem.clientWidth = item.clientWidth
         if((acc.total + item.clientWidth) > outerWidth) {
           acc.invisibleItems.push(metaItem)
           return acc
@@ -193,6 +197,16 @@ export default {
       this.visibleItems = items.reverse()
       this.invisibleItems = invisibleItems.reverse()
       
+      const metaItem = this.visibleItems[0]
+      const currentItem = this.items.findIndex(e => e.to === metaItem.to)
+      if(currentItem > 0) {
+        const nextVisible = this.items[currentItem - 1]
+        if(nextVisible) {
+          if((breadcrumbWidth + nextVisible.clientWidth) < outerWidth) {
+            this.visibleItems = [nextVisible, ...this.visibleItems]
+          }
+        }
+      }
       /* THIS IS FOR DEBUG */
       var visibleTexts = []
       for(var item of this.visibleItems) {
@@ -205,6 +219,7 @@ export default {
         invisibleTexts.push(item.text)
       }
       console.log("Currently invisible items:", invisibleTexts, total)
+      console.log("test", this.visibleItems)
     });
     
     resizeObserver.observe(this.$refs.breadcrumb)

From 1ef6c40d1593a122a58b76c832abc15ea43b2344 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 27 Apr 2022 12:58:54 +0200
Subject: [PATCH 6/7] WIP

---
 .../molecules/OcBreadcrumb/OcBreadcrumb.vue   | 20 ++++++++-----------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue b/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue
index ff9263a3c..7c32a1c1b 100644
--- a/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue
+++ b/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue
@@ -180,23 +180,24 @@ export default {
       let outerWidth = this.$refs.wrapper.clientWidth
       let breadcrumbWidth = this.$refs.breadcrumb.clientWidth
       
-
-      const { items, invisibleItems, total } = Array.from(this.$refs.breadcrumb.childNodes).reverse().reduce((acc, item) => {
+      // Remove items if less space is available
+      const { items, total } = Array.from(this.$refs.breadcrumb.childNodes).reverse().reduce((acc, item) => {
         const itemKey = item.getAttribute("data-key")
         const metaItem = this.visibleItems[itemKey]
         metaItem.clientWidth = item.clientWidth
         if((acc.total + item.clientWidth) > outerWidth) {
-          acc.invisibleItems.push(metaItem)
           return acc
         }
         acc.items.push(metaItem)
         acc.total += item.clientWidth
+        //var index = this.items.findIndex(e => e.to === metaItem.to)
+        //acc.invisibleItems = acc.invisibleItems.splice(index, 1)
         return acc
-      }, {total: 0, items: [], invisibleItems: []})
+      }, {total: 0, items: []})
 
       this.visibleItems = items.reverse()
-      this.invisibleItems = invisibleItems.reverse()
       
+      // Add items if more space is available
       const metaItem = this.visibleItems[0]
       const currentItem = this.items.findIndex(e => e.to === metaItem.to)
       if(currentItem > 0) {
@@ -207,20 +208,15 @@ export default {
           }
         }
       }
-      /* THIS IS FOR DEBUG */
-      var visibleTexts = []
-      for(var item of this.visibleItems) {
-        visibleTexts.push(item.text)
-      }
-      console.log("Currently visible items:", visibleTexts, total)
 
+      /* THIS IS FOR DEBUG */
       var invisibleTexts = []
       for(var item of this.invisibleItems) {
         invisibleTexts.push(item.text)
       }
       console.log("Currently invisible items:", invisibleTexts, total)
       console.log("test", this.visibleItems)
-    });
+    })
     
     resizeObserver.observe(this.$refs.breadcrumb)
     resizeObserver.observe(this.$refs.wrapper)

From f20a0db75a3ec85a60d99a0380c2bd896c1a0368 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 28 Apr 2022 13:34:15 +0200
Subject: [PATCH 7/7] WIP

---
 .../molecules/OcBreadcrumb/OcBreadcrumb.vue   | 40 +++++++++++++------
 1 file changed, 27 insertions(+), 13 deletions(-)

diff --git a/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue b/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue
index 7c32a1c1b..329cc57b3 100644
--- a/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue
+++ b/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue
@@ -2,7 +2,7 @@
   <div class="oc-breadcrumb-wrapper" ref="wrapper">
     <nav :class="`oc-breadcrumb oc-breadcrumb-${variation}`">
       <ol class="oc-breadcrumb-list oc-mb-s" ref="breadcrumb">
-        <li v-for="(item, index) in visibleItems" :key="index" :data-key="index" class="oc-breadcrumb-list-item">
+        <li v-for="(item, index) in visibleItems" :key="index" :data-key="index" :is-visible="addItemSize(index, item.to)" :id="`item-${index}`" class="oc-breadcrumb-list-item">
           <router-link v-if="item.to" :aria-current="getAriaCurrent(index)" :to="item.to">
             <span>{{ item.text }}</span>
           </router-link>
@@ -105,7 +105,8 @@ export default {
   data: () => {
     return {
       visibleItems: [],
-      invisibleItems: []
+      invisibleItems: [],
+      itemWidth: {}
     }
   },
   components: {
@@ -179,9 +180,10 @@ export default {
     const resizeObserver = new ResizeObserver(() => {
       let outerWidth = this.$refs.wrapper.clientWidth
       let breadcrumbWidth = this.$refs.breadcrumb.clientWidth
-      
+      console.log("===== =====")
+      console.log(`outerWidth: ${outerWidth}, innerWidth: ${breadcrumbWidth}`)
       // Remove items if less space is available
-      const { items, total } = Array.from(this.$refs.breadcrumb.childNodes).reverse().reduce((acc, item) => {
+      let { items, total } = Array.from(this.$refs.breadcrumb.childNodes).reverse().reduce((acc, item) => {
         const itemKey = item.getAttribute("data-key")
         const metaItem = this.visibleItems[itemKey]
         metaItem.clientWidth = item.clientWidth
@@ -190,32 +192,35 @@ export default {
         }
         acc.items.push(metaItem)
         acc.total += item.clientWidth
+        breadcrumbWidth += item.clientWidth
         //var index = this.items.findIndex(e => e.to === metaItem.to)
         //acc.invisibleItems = acc.invisibleItems.splice(index, 1)
         return acc
       }, {total: 0, items: []})
-
-      this.visibleItems = items.reverse()
       
       // Add items if more space is available
-      const metaItem = this.visibleItems[0]
+      items = items.reverse()
+      const metaItem = items[0]
       const currentItem = this.items.findIndex(e => e.to === metaItem.to)
       if(currentItem > 0) {
         const nextVisible = this.items[currentItem - 1]
-        if(nextVisible) {
-          if((breadcrumbWidth + nextVisible.clientWidth) < outerWidth) {
-            this.visibleItems = [nextVisible, ...this.visibleItems]
+        if(nextVisible && nextVisible.to) {
+          const clientWidth = this.itemWidth[nextVisible.to]
+          if((breadcrumbWidth + clientWidth) < outerWidth) {
+            console.log(`current: ${metaItem.to}, next ${nextVisible.to}`)
+            console.log(`${total} + ${clientWidth} < ${outerWidth}`)
+            items = [nextVisible, ...items]
           }
         }
       }
-
+      this.visibleItems = items
       /* THIS IS FOR DEBUG */
-      var invisibleTexts = []
+      /*var invisibleTexts = []
       for(var item of this.invisibleItems) {
         invisibleTexts.push(item.text)
       }
       console.log("Currently invisible items:", invisibleTexts, total)
-      console.log("test", this.visibleItems)
+      console.log("test", this.visibleItems)*/
     })
     
     resizeObserver.observe(this.$refs.breadcrumb)
@@ -228,6 +233,15 @@ export default {
     getAriaCurrent(index) {
       return this.items.length - 1 === index ? "page" : null
     },
+    isItemVisible(item) {
+      return this.visibleItems.find(e => e.to === item.to)
+    },
+    addItemSize(index, to) {
+      this.$nextTick(() => {
+        this.itemWidth[to] = document.getElementById(`item-${index}`).clientWidth
+      })
+      return true
+    }
   },
 }
 </script>