<?php
/*
* Plugin-Name: Product Designer App
* Plugin-URI: https://productdesignerapp.com
* Author: productdesignerapp
* Template
*/

if (!defined('ABSPATH'))
{
    exit;
}
?>
<div class="pdapp-menus list-group border-none gap-2 placeholder-glow p-1">
    <button type="button" class="list-group-item list-group-item-action d-flex align-items-center gap-1 p-2 ps-1 pe-1 rounded-2 border d-flex flex-column placeholder bg-secondary active" :class="{'pdapp-w80 pdapp-h70': responsiveLayout.screenSize == 'desktop', 'pdapp-w50 pdapp-h50': responsiveLayout.screenSize == 'mobile', 'pdapp-w70 pdapp-h60': responsiveLayout.screenSize == 'tablet'}">&nbsp;</button>
    <button type="button" class="list-group-item list-group-item-action d-flex align-items-center gap-1 p-2 ps-1 pe-1 rounded-2 border d-flex flex-column placeholder bg-secondary" :class="{'pdapp-w80 pdapp-h70': responsiveLayout.screenSize == 'desktop', 'pdapp-w50 pdapp-h50': responsiveLayout.screenSize == 'mobile', 'pdapp-w70 pdapp-h60': responsiveLayout.screenSize == 'tablet'}">&nbsp;</button>
    <button type="button" class="list-group-item list-group-item-action d-flex align-items-center gap-1 p-2 ps-1 pe-1 rounded-2 border d-flex flex-column placeholder bg-secondary" :class="{'pdapp-w80 pdapp-h70': responsiveLayout.screenSize == 'desktop', 'pdapp-w50 pdapp-h50': responsiveLayout.screenSize == 'mobile', 'pdapp-w70 pdapp-h60': responsiveLayout.screenSize == 'tablet'}">&nbsp;</button>
    <button type="button" class="list-group-item list-group-item-action d-flex align-items-center gap-1 p-2 ps-1 pe-1 rounded-2 border d-flex flex-column placeholder bg-secondary" :class="{'pdapp-w80 pdapp-h70': responsiveLayout.screenSize == 'desktop', 'pdapp-w50 pdapp-h50': responsiveLayout.screenSize == 'mobile', 'pdapp-w70 pdapp-h60': responsiveLayout.screenSize == 'tablet'}">&nbsp;</button>
    <button type="button" class="list-group-item list-group-item-action d-flex align-items-center gap-1 p-2 ps-1 pe-1 rounded-2 border d-flex flex-column placeholder bg-secondary" :class="{'pdapp-w80 pdapp-h70': responsiveLayout.screenSize == 'desktop', 'pdapp-w50 pdapp-h50': responsiveLayout.screenSize == 'mobile', 'pdapp-w70 pdapp-h60': responsiveLayout.screenSize == 'tablet'}">&nbsp;</button>
    <button type="button" class="list-group-item list-group-item-action d-flex align-items-center gap-1 p-2 ps-1 pe-1 rounded-2 border d-flex flex-column placeholder bg-secondary" :class="{'pdapp-w80 pdapp-h70': responsiveLayout.screenSize == 'desktop', 'pdapp-w50 pdapp-h50': responsiveLayout.screenSize == 'mobile', 'pdapp-w70 pdapp-h60': responsiveLayout.screenSize == 'tablet'}">&nbsp;</button>
    <button type="button" class="list-group-item list-group-item-action d-flex align-items-center gap-1 p-2 ps-1 pe-1 rounded-2 border d-flex flex-column placeholder bg-secondary" :class="{'pdapp-w80 pdapp-h70': responsiveLayout.screenSize == 'desktop', 'pdapp-w50 pdapp-h50': responsiveLayout.screenSize == 'mobile', 'pdapp-w70 pdapp-h60': responsiveLayout.screenSize == 'tablet'}">&nbsp;</button>
</div>
<div class="pdapp-menu-options flex-column align-items-center gap-2 border-start d-lg-flex d-none">
    <div class="d-block w-100 placeholder-glow px-1">
        <div class="bg-secondary placeholder pdapp-w80 pdapp-h20"></div>
    </div>
    <div class="pdapp-menu-options-content d-flex flex-column align-items-center gap-2 px-1 overflow-y-auto overflow-x-hidden">
        <div class="d-flex flex-column gap-2 placeholder-glow w-100 mb-1">
            <div class="bg-secondary placeholder pdapp-w80 pdapp-h20"></div>
            <div class="bg-secondary placeholder w-100 pdapp-h40 rounded-2"></div>
            <div class="bg-secondary placeholder w-100 pdapp-h30 rounded-2"></div>
        </div>

        <div class="d-flex flex-column gap-2 placeholder-glow w-100 mb-1">
            <div class="bg-secondary placeholder pdapp-w80 pdapp-h20"></div>
            <div class="bg-secondary placeholder w-100 pdapp-h50 rounded-2"></div>
            <div class="bg-secondary placeholder w-100 pdapp-h50 rounded-2"></div>
        </div>

        <div class="d-flex flex-column gap-2 placeholder-glow w-100">
            <div class="bg-secondary placeholder pdapp-w80 pdapp-h20"></div>
            <div class="bg-secondary placeholder w-100 pdapp-h40 rounded-2"></div>
            <div class="bg-secondary placeholder w-100 pdapp-h40 rounded-2"></div>
            <div class="bg-secondary placeholder w-100 pdapp-h40 rounded-2"></div>
            <div class="bg-secondary placeholder w-100 pdapp-h40 rounded-2"></div>
            <div class="bg-secondary placeholder w-100 pdapp-h40 rounded-2"></div>
        </div>
    </div>
</div>