@extends('base')
@section('body-class', 'tri-layout')
+@section('content-components', 'tri-layout')
@section('content')
- <div class="toolbar px-xl">
- @yield('toolbar')
+ <div class="tri-layout-mobile-tabs print-hidden">
+ <div class="grid half no-break no-gap">
+ <button type="button"
+ refs="tri-layout@tab"
+ data-tab="info"
+ aria-label="{{ trans('common.tab_info_label') }}"
+ class="tri-layout-mobile-tab px-m py-m text-primary">
+ {{ trans('common.tab_info') }}
+ </button>
+ <button type="button"
+ refs="tri-layout@tab"
+ data-tab="content"
+ aria-label="{{ trans('common.tab_content_label') }}"
+ aria-selected="true"
+ class="tri-layout-mobile-tab px-m py-m text-primary active">
+ {{ trans('common.tab_content') }}
+ </button>
+ </div>
</div>
- <div class="tri-layout-container @yield('container-classes')" tri-layout @yield('container-attrs') >
+ <div refs="tri-layout@container" class="tri-layout-container" @yield('container-attrs') >
- <div class="tri-layout-left print-hidden " id="sidebar">
- <div class="tri-layout-left-contents">
+ <div class="tri-layout-left print-hidden pt-m" id="sidebar">
+ <aside class="tri-layout-left-contents">
@yield('left')
- </div>
+ </aside>
</div>
<div class="@yield('body-wrap-classes') tri-layout-middle">
- @yield('body')
+ <div class="tri-layout-middle-contents">
+ @yield('body')
+ </div>
</div>
- <div class="tri-layout-right print-hidden">
- <div class="tri-layout-right-contents">
+ <div class="tri-layout-right print-hidden pt-m">
+ <aside class="tri-layout-right-contents">
@yield('right')
- </div>
+ </aside>
</div>
</div>