aico-image-editor/src/components/configuratorTabsMobile/configuratorTabsMobile.html

Combine multiple image into and create single combined image

<ul x-data class="nav nav-tabs editor-interface__tab__mobile d-lg-none rounded-5 overflow-hidden" role="tablist"
    :class="productBlockVisibleMobile ? '':'selected'">
    <li class="nav-item" @click="() => {
            productBlockVisibleMobile = false;
            setActiveTab('picture')
        }">
        <button type="button" class="nav-link" data-bs-toggle="tab" role="tab" id="canvas-picture-tab-mobile"
            data-bs-target="#canvas-picture"
            :class="activeTab === 'picture'? 'active' : ''"
            :aria-selected="activeTab === 'picture'? true : false">
            <span class="editor-interface__tab__icon">
                <span class="bugano-mobile-tab-1-icon fa-lg"></span>
            </span>
            <span class="fs-sm fw-medium" x-text="getTranslatedHTML('pictures')"></span>
        </button>
    </li>
    <li class="nav-item" @click="() => {
            productBlockVisibleMobile = false;
            setActiveTab('motive')
        }">
        <button type="button" class="nav-link  " data-bs-toggle="tab" role="tab" id="own-shape-tab-mobile"
            data-bs-target="#own-shape"
            :class="activeTab === 'motive'? 'active' : ''"
            :aria-selected="activeTab === 'motive'? true : false">
            <span class="editor-interface__tab__icon">
                <span class="bugano-mobile-tab-2-icon fa-lg"></span>
            </span>
            <span class="fs-sm fw-medium lh-sm" x-html="getTranslatedHTML('motiveTabTitle')"></span>
        </button>
    </li>
    <li class="nav-item" @click="() => {
            productBlockVisibleMobile = false;
            setActiveTab('label')
        }">
        <button type="button" class="nav-link" data-bs-toggle="tab" role="tab" id="labelling-tab-mobile"
            data-bs-target="#labelling"
            :class="activeTab === 'label'? 'active' : ''"
            :aria-selected="activeTab === 'label'? true : false">
            <span class="editor-interface__tab__icon">
                <span class="bugano-mobile-tab-3-icon fa-lg"></span>
            </span>
            <span class="fs-sm fw-medium" x-text="getTranslatedHTML('textTabTitle')"></span>
        </button>
    </li>
    <li class="nav-item" @click="() => {
            productBlockVisibleMobile = false;
            setActiveTab('layer')
        }">
        <button type="button" class="nav-link" data-bs-toggle="tab" role="tab" id="layering-tab-mobile"
            data-bs-target="#layering"
            :class="activeTab === 'layer'? 'active' : ''"
            :aria-selected="activeTab === 'layer'? true : false">
            <span class="editor-interface__tab__icon">
                <span class="fa-solid fa-layer-group fa-lg"></span>
            </span>
            <span class="fs-sm fw-medium" x-text="getTranslatedHTML('layersTabTitle')"></span>
        </button>
    </li>
</ul>