add scroll buttons

packages/design-system/src/components/N8nTabs/Tabs.vue

@@ -1,5 +1,8 @@
 <template>
-	<div :class="$style.tabs">
+	<div :class="$style.container">
+		<div :class="$style.back" v-if="scrollPosition > 0" @click="scrollLeft"><</div>
+		<div :class="$style.next" v-if="canScrollRight" @click="scrollRight">></div>
+		<div ref="tabs" :class="$style.tabs">
 			<div  v-for="option in options" :key="option.value" :class="{ [$style.alignRight]: option.align === 'right' }">
 				<a
 					v-if="option.href"
@@ -24,6 +27,7 @@
 				</div>
 			</div>
 		</div>
+	</div>
 </template>
 
 <script lang="ts">
@@ -35,6 +39,27 @@ export default Vue.extend({
 	components: {
 		N8nIcon,
 	},
+	mounted() {
+		const container = this.$refs.tabs;
+		if (container) {
+			container.addEventListener('scroll', (e) => {
+				const width = container.clientWidth;
+				const scrollWidth = container.scrollWidth;
+				this.scrollPosition = e.srcElement.scrollLeft;
+				this.canScrollRight = scrollWidth - width > this.scrollPosition;
+			});
+
+			const width = container.clientWidth;
+			const scrollWidth = container.scrollWidth;
+			this.canScrollRight = scrollWidth - width > this.scrollPosition;
+		}
+	},
+	data() {
+		return {
+			scrollPosition: 0,
+			canScrollRight: false,
+		};
+	},
 	props: {
 		value: {
 		},
@@ -45,17 +70,47 @@ export default Vue.extend({
 		handleTabClick(tab: string) {
 			this.$emit('input', tab);
 		},
+		scrollLeft() {
+			this.scroll(-50);
+		},
+		scrollRight() {
+			this.scroll(50);
+		},
+		scroll(left: number) {
+			const container = this.$refs.tabs;
+			if (container) {
+				container.scrollBy({ left, top: 0, behavior: 'smooth' });
+			}
+		},
 	},
 });
 </script>
 
 
 <style lang="scss" module>
+.container {
+	position: relative;
+	height: 24px;
+	min-height: 24px;
+	width: 100%;
+}
+
 .tabs {
 	color: var(--color-text-base);
 	font-weight: var(--font-weight-bold);
 	display: flex;
 	width: 100%;
+	position: absolute;
+	overflow-x: scroll;
+
+	/* Hide scrollbar for Chrome, Safari and Opera */
+	&::-webkit-scrollbar {
+		display: none;
+	}
+
+	/* Hide scrollbar for IE, Edge and Firefox */
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
 }
 
 .tab {
@@ -96,4 +151,27 @@ export default Vue.extend({
 	display: none;
 }
 
+.button {
+	position: absolute;
+	background-color: var(--color-background-light);
+	z-index: 1;
+	height: 24px;
+	width: 10px;
+	display: flex;
+	align-items: center;
+	font-weight: var(--font-weight-bold);
+}
+
+.back {
+	composes: tab;
+	composes: button;
+	left: 0;
+}
+
+.next {
+	composes: tab;
+	composes: button;
+	right: 0;
+}
+
 </style>