Add vertical tabs

Author: ThomasEnssner

resources/assets/scss/component.scss

@@ -1,6 +1,6 @@
 @import 'component/block';
 @import 'component/timeline';
-// @import "component/card";
+@import "component/card";
 
 .btn-select {
     display: block;

resources/assets/scss/component/card.scss

@@ -1,17 +1,30 @@
-.card-tabs {
-    .card-header {
-        background-color: #cccccc;
-        border-top: #888888 1px solid;
-        border-left: #888888 1px solid;
+.card-tabs-vertical {
+    display: flex;
+
+    .card-header-vertical {
+        background-color: rgba(0, 0, 0, 0.1);
         border-right: #888888 1px solid;
-    }
 
-    .card-header-tabs {
-        .nav-link {
-            color: black;
-        }
-        .nav-link.active {
-            color: black;
+        .nav-pills {
+            .nav-item {
+                .nav-link {
+                    border-bottom: $card-border-width solid $card-border-color;
+                    border-radius: 0;
+                    color: #000000;
+                    border-color: rgba(0, 100, 118, 0.6);
+
+                    &.active {
+                        background-color: #FFFFFF;
+                        border-right: $card-border-width solid #ffffff;
+                        margin-right: -1px;
+                    }
+                }
+            }
         }
     }
+
+    .tab-content {
+        border: 0;
+        border-radius: 0;
+    }
 }

resources/views/tabs-vertical.blade.php

@@ -0,0 +1,37 @@
+@php
+    $id = $id ?? 'tabs-' . mt_rand(0, 9999999999);
+@endphp
+<div class="card card-tabs-vertical {{ $class ?? '' }}" id="{{ $id }}"
+     @isset($style) style="{{ $style }}" @endisset
+>
+    <div class="row no-gutters">
+        <div class="col-2 card-header-vertical">
+            <ul class="nav flex-column nav-pills" role="tablist">
+                @foreach($tabs as $tabId => $tabLabel)
+                    <li class="nav-item">
+                        <a class="nav-link @if($loop->first) active @endif"
+                           id="{{ $tabId }}-tab"
+                           data-toggle="pill"
+                           href="#{{ $tabId }}"
+                           role="tab"
+                           aria-controls="{{ $tabId }}"
+                           aria-expanded="true"
+                        >{!! $tabLabel !!}</a>
+                    </li>
+                @endforeach
+            </ul>
+        </div>
+        <div class="col-10 px-3 {{ $bodyClass ?? '' }} tab-content card-body">
+            {{ $slot }}
+        </div>
+    </div>
+</div>
+<script>
+(function () {
+    var tabs = document.querySelectorAll('#{{ $id }} .tab-pane:not(:first-child)')
+    for (var i = 0; i < tabs.length; i++) {
+        tabs[i].classList.remove('active')
+        tabs[i].classList.remove('show')
+    }
+})()
+</script>

resources/views/tabs.blade.php

@@ -4,7 +4,7 @@
 <div class="card card-tabs {{ $class ?? '' }}" id="{{ $id }}"
      @isset($style) style="{{ $style }}" @endisset
 >
-    <div class="card-header ">
+    <div class="card-header">
         <ul class="nav nav-tabs card-header-tabs" role="tablist">
             @foreach($tabs as $tabId => $tabLabel)
                 <li class="nav-item">