ftr: Add left/right arrow buttons on desktop view only

projects/ngx-stories/src/lib/ngx-stories.component.html

@@ -39,5 +39,14 @@ <h5 [style.visibility]="isHolding ? 'hidden' : 'visible'">
   <button class="prev" (click)="navigateStory('previous')">Previous</button>
   }
   <button class="next" (click)="navigateStory('next')">Next</button>
+
+
+  <!-- Next button -->
+  <button class="desktop-navigation next-btn" role="button" tabindex="0" (click)="navigateStory('next')"></button>
+
+  <!-- Previous button -->
+  <button class="desktop-navigation prev-btn" role="button" tabindex="0" (click)="navigateStory('previous')"
+    [ngClass]="{ 'disabled': (currentStoryGroupIndex === 0 && currentStoryIndex === 0) }"></button>
+
 </div>
 }

projects/ngx-stories/src/lib/ngx-stories.component.scss

@@ -1,6 +1,6 @@
 .story-container {
   position: relative;
-  overflow: hidden;
+  // overflow: hidden;
   border-radius: 10px;
   opacity: 0;
   display: none;
@@ -161,13 +161,49 @@ button:nth-child(1) {
   }
 }
 
+// Desktop navigation style
+.desktop-navigation {
+  cursor: pointer;
+  position: absolute;
+  top: 50%;
+  border-radius: 50% !important;
+  background-color: #d5d5d5 !important;
+  width: 48px;
+  height: 48px;
+  visibility: hidden;
+  pointer-events: none;
+  transform: none;
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none"><path stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.4" d="m21.52 16.22 7.75 7.75m-7.75 7.78L29.27 24"/></svg>');
+
+  &.next-btn {
+    right: -4rem;
+  }
+
+  &.prev-btn {
+    left: -4rem;
+    transform: rotate(180deg) !important;
+
+    &.disabled {
+      opacity: 40%;
+      pointer-events: none;
+    }
+  }
+}
+
 .story-style {
   display: flex;
   align-items: center;
   justify-content: center;
   height: inherit;
   width: inherit;
+}
 
+// Navigation visible for desktop only
+@media (min-width: 1024px) {
+  .desktop-navigation {
+    visibility: visible;
+    pointer-events: all;
+  }
 }
 
 @media (min-width: 768px) {