* zin: add collapse for tabs.

lib/zin/func.php

@@ -907,6 +907,7 @@ function modalDialog(): modalDialog
  * Tabs widget.
  *
  * ?string direction='h'
+ * ?bool   collapse=false
  */
 function tabs(): tabs
 {

lib/zin/wg/tabs/css/v1.css

@@ -4,4 +4,3 @@
 .nav-tabs>.nav-item.active>a {color: var(--color-primary-500);}
 .nav-tabs>.nav-item.active>a:after {border-bottom-color: var(--color-primary-500) !important; border-bottom-width: 2px;}
 .nav-tabs>.nav-item.active:after {width: calc(100% - 32px); margin-left: 16px; border-bottom-color: var(--color-primary-500) !important; border-bottom-width: 2px;}
-.nav-tabs {border-bottom: 1px solid #E6EAF1;}

lib/zin/wg/tabs/v1.php

@@ -16,6 +16,7 @@ class tabs extends wg
     protected static $defineProps = array(
         /* Tabs direction: h - horizontal, v - vertical */
         'direction?:string="h"',
+        'collapse?: bool=false',
     );
 
     public static function getPageCSS(): string|false
@@ -88,9 +89,39 @@ class tabs extends wg
         }
     }
 
+    private function buildCollapseBtn()
+    {
+        $collapse = $this->prop('collapse');
+        if(!$collapse) return null;
+
+        return btn
+        (
+            setClass('btn-link'),
+            setStyle(array(
+                'position' => 'absolute',
+                'right' => '24px',
+                'top' => '16px'
+            )),
+            set::icon('angle-down'),
+            on::click
+            (
+                <<<FUNC
+                    const btn = event.target;
+                    const icon = btn.querySelector('.icon');
+                    const tabs = btn.closest('.tabs');
+                    const tabContent = tabs.querySelector('.tab-content');
+                    if(tabContent) tabContent.classList.toggle('hidden');
+                    icon.classList.toggle('icon-angle-down');
+                    icon.classList.toggle('icon-angle-top');
+                FUNC
+            )
+        );
+    }
+
     protected function build(): wg
     {
         $isVertical = $this->prop('direction') === 'v';
+        $collapse   = $this->prop('collapse');
 
         $this->filterChildren();
 
@@ -104,11 +135,12 @@ class tabs extends wg
 
         return div
         (
-            setClass('tabs', $isVertical ? 'flex' : null),
+            setClass('tabs', $isVertical ? 'flex' : null, $collapse ? 'relative' : null),
             set($this->props->skip(array_keys(static::getDefinedProps()))),
 
             $this->buildTabHeader($titleViews),
             $this->buildTabBody($contentViews),
+            $this->buildCollapseBtn(),
             $this->children
         );
     }