File: /var/www/html/wp-content/plugins/jet-menu/templates/admin/menu-settings-nav.php
<?php
/**
* Main dashboard template
*/
// phpcs:disable
?><div id="jet-menu-settings-nav">
<transition name="popup">
<cx-vui-popup
class="nav-settings-popup"
:class="{'editor-mode':editorVisible}"
v-model="itemSettingItem"
:footer="false"
body-width="false"
@on-cancel="navSettingPopupClose"
>
<div class="cx-vui-popup__content-inner" slot="content">
<div class="nav-settings-loader" v-if="editorVisible"><?php include jet_menu()->get_template( 'public/mega-content-loader.php' ); ?></div>
<cx-vui-tabs
class="nav-settings-tabs"
:class="{ 'loading-state':getItemDataState }"
:in-panel="false"
:value="defaultActiveTab"
layout="vertical"
v-if="!editorVisible"
>
<cx-vui-tabs-panel
name="mega-menu-tab"
label="<?php _e( 'Mega Content', 'jet-menu' ); ?>"
key="mega-menu-tab"
>
<div class="cx-vui-tabs-panel__inner" v-if="!getItemDataState">
<!--<div class="cx-vui-alert info-type" v-if="!isTopItem">
<div class="cx-vui-alert__icon">
<svg width="18" height="21" viewBox="0 0 18 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 20.5C10.3672 20.5 11.4609 19.4062 11.4609 18H6.5C6.5 19.4062 7.59375 20.5 9 20.5ZM17.3984 14.6797C16.6562 13.8594 15.2109 12.6484 15.2109 8.625C15.2109 5.61719 13.1016 3.19531 10.2109 2.57031V1.75C10.2109 1.08594 9.66406 0.5 9 0.5C8.29688 0.5 7.75 1.08594 7.75 1.75V2.57031C4.85938 3.19531 2.75 5.61719 2.75 8.625C2.75 12.6484 1.30469 13.8594 0.5625 14.6797C0.328125 14.9141 0.210938 15.2266 0.25 15.5C0.25 16.1641 0.71875 16.75 1.5 16.75H16.4609C17.2422 16.75 17.7109 16.1641 17.75 15.5C17.75 15.2266 17.6328 14.9141 17.3984 14.6797Z"/>
</svg>
</div>
<div class="cx-vui-alert__message"><?php
/* _e( 'Content for sub-menu items available only for mobile view at this moment', 'jet-menu' );
*/?></div>
</div>-->
<cx-vui-switcher
name="enabled"
label="<?php _e( 'Use Mega content', 'jet-menu' ); ?>"
:wrapper-css="[ 'equalwidth' ]"
return-true="true"
return-false="false"
v-model="controlData['enabled']['value']">
</cx-vui-switcher>
<cx-vui-select
name="content_type"
label="<?php _e( 'Mega content type', 'jet-menu' ); ?>"
:wrapper-css="[ 'equalwidth' ]"
size="fullwidth"
:options-list="controlData['content_type']['options']"
v-model="controlData['content_type']['value']"
>
</cx-vui-select>
<div class="cx-vui-component cx-vui-component--equalwidth">
<div class="cx-vui-component__meta">
<label class="cx-vui-component__label"><?php _e( 'Mega content', 'jet-menu' ); ?></label>
</div>
<div class="cx-vui-component__control">
<cx-vui-button
button-style="accent-border"
size="mini"
@click="openEditor"
>
<span slot="label"><?php _e( 'Edit Mega content', 'jet-menu' ); ?></span>
</cx-vui-button>
</div>
</div>
<cx-vui-select
name="custom_mega_menu_position"
label="<?php _e( 'Mega content position', 'jet-menu' ); ?>"
description="<?php _e( 'Mega container position relative to item', 'jet-menu' ); ?>"
:wrapper-css="[ 'equalwidth' ]"
size="fullwidth"
:options-list="controlData['custom_mega_menu_position']['options']"
v-model="controlData['custom_mega_menu_position']['value']"
>
</cx-vui-select>
<cx-vui-input
name="custom_mega_menu_width"
label="<?php _e( 'Custom mega content width', 'jet-menu' ); ?>"
description="<?php _e( 'Set custom mega content width for container(px).', 'jet-menu' ); ?>"
:wrapper-css="[ 'equalwidth' ]"
size="fullwidth"
type="number"
:min="200"
:max="2000"
:step="100"
v-model="controlData['custom_mega_menu_width']['value']"
>
</cx-vui-input>
<div class="save-control">
<cx-vui-button
button-style="accent-border"
size="mini"
@click="saveItemSettings"
:loading="itemSavingState"
>
<span slot="label"><?php _e( 'Save', 'jet-menu' ); ?></span>
</cx-vui-button>
</div>
</div>
</cx-vui-tabs-panel>
<cx-vui-tabs-panel
name="icon-tab"
label="<?php _e( 'Item Icon', 'jet-menu' ); ?>"
key="icon-tab"
>
<div class="cx-vui-tabs-panel__inner" v-if="!getItemDataState">
<cx-vui-wp-media
label="<?php _e( 'SVG Icon', 'jet-menu' ); ?>"
name="menu_svg"
return-type="string"
:multiple="false"
:wrapper-css="[ 'equalwidth' ]"
v-model="controlData['menu_svg']['value']"
></cx-vui-wp-media>
<cx-vui-colorpicker
name="icon_color"
label="<?php _e( 'Icon color', 'jet-menu' ); ?>"
:wrapper-css="[ 'equalwidth' ]"
type="hex"
v-model="controlData['icon_color']['value']"
></cx-vui-colorpicker>
<cx-vui-input
name="icon_size"
label="<?php _e( 'Icon size', 'jet-menu' ); ?>"
description="<?php _e( 'Set icon size for this item(px)', 'jet-menu' ); ?>"
:wrapper-css="[ 'equalwidth' ]"
size="fullwidth"
type="number"
:min="8"
:max="300"
:step="1"
v-model="controlData['icon_size']['value']">
</cx-vui-input>
<div class="save-control">
<cx-vui-button
button-style="accent-border"
size="mini"
@click="saveItemSettings"
:loading="itemSavingState"
>
<span slot="label"><?php _e( 'Save', 'jet-menu' ); ?></span>
</cx-vui-button>
</div>
</div>
</cx-vui-tabs-panel>
<cx-vui-tabs-panel
name="badge-tab"
label="<?php _e( 'Item Badge', 'jet-menu' ); ?>"
key="badge-tab"
>
<div class="cx-vui-tabs-panel__inner" v-if="!getItemDataState">
<cx-vui-select
name="menu_badge_type"
label="<?php _e( 'Type', 'jet-menu' ); ?>"
:wrapper-css="[ 'equalwidth' ]"
size="fullwidth"
:options-list="controlData['menu_badge_type']['options']"
v-model="controlData['menu_badge_type']['value']"
>
</cx-vui-select>
<div v-if="'text' === controlData['menu_badge_type']['value']">
<cx-vui-input
name="menu_badge"
label="<?php _e( 'Item badge', 'jet-menu' ); ?>"
:wrapper-css="[ 'equalwidth' ]"
size="fullwidth"
type="text"
v-model="controlData['menu_badge']['value']">
</cx-vui-input>
<cx-vui-colorpicker
name="badge_color"
label="<?php _e( 'Badge color', 'jet-menu' ); ?>"
:wrapper-css="[ 'equalwidth' ]"
type="hex"
v-model="controlData['badge_color']['value']"
></cx-vui-colorpicker>
</div>
<div v-if="'svg' === controlData['menu_badge_type']['value']">
<cx-vui-wp-media
label="<?php _e( 'SVG Icon', 'jet-menu' ); ?>"
name="badge_svg"
return-type="string"
:multiple="false"
:wrapper-css="[ 'equalwidth' ]"
v-model="controlData['badge_svg']['value']"
></cx-vui-wp-media>
<cx-vui-input
name="badge_svg_size"
label="<?php _e( 'Badge size', 'jet-menu' ); ?>"
description="<?php _e( 'Set badge size for this item(px)', 'jet-menu' ); ?>"
:wrapper-css="[ 'equalwidth' ]"
size="fullwidth"
type="number"
:min="8"
:max="300"
:step="1"
v-model="controlData['badge_svg_size']['value']">
</cx-vui-input>
</div>
<cx-vui-colorpicker
name="badge_bg_color"
label="<?php _e( 'Badge background color', 'jet-menu' ); ?>"
:wrapper-css="[ 'equalwidth' ]"
type="hex"
v-model="controlData['badge_bg_color']['value']"
></cx-vui-colorpicker>
<cx-vui-input
name="badge_offset_x"
label="<?php _e( 'Badge offset X', 'jet-menu' ); ?>"
description="<?php _e( 'Set badge horizontal offset for this item(px)', 'jet-menu' ); ?>"
:wrapper-css="[ 'equalwidth' ]"
size="fullwidth"
type="number"
:min="8"
:max="300"
:step="1"
v-model="controlData['badge_offset_x']['value']">
</cx-vui-input>
<cx-vui-input
name="badge_offset_y"
label="<?php _e( 'Badge offset Y', 'jet-menu' ); ?>"
description="<?php _e( 'Set badge vertical offset for this item(px)', 'jet-menu' ); ?>"
:wrapper-css="[ 'equalwidth' ]"
size="fullwidth"
type="number"
:min="8"
:max="300"
:step="1"
v-model="controlData['badge_offset_y']['value']">
</cx-vui-input>
<div class="save-control">
<cx-vui-button
button-style="accent-border"
size="mini"
@click="saveItemSettings"
:loading="itemSavingState"
>
<span slot="label"><?php _e( 'Save', 'jet-menu' ); ?></span>
</cx-vui-button>
</div>
</div>
</cx-vui-tabs-panel>
<cx-vui-tabs-panel
name="advanced-tab"
label="<?php _e( 'Advanced', 'jet-menu' ); ?>"
key="advanced-tab"
>
<div class="cx-vui-tabs-panel__inner" v-if="!getItemDataState">
<cx-vui-switcher
name="hide_item_text"
label="<?php _e( 'Hide item navigation label', 'jet-menu' ); ?>"
:wrapper-css="[ 'equalwidth' ]"
return-true="true"
return-false="false"
v-model="controlData['hide_item_text']['value']">
</cx-vui-switcher>
<cx-vui-dimensions
name="item_padding"
label="<?php _e( 'Item custom padding', 'jet-menu' ); ?>"
:wrapper-css="[ 'equalwidth' ]"
:units="[
{
unit: 'px',
min: 0,
max: 100,
step: 1
}
]"
v-model="controlData['item_padding']['value']"
>
</cx-vui-dimensions>
<div class="save-control">
<cx-vui-button
button-style="accent-border"
size="mini"
@click="saveItemSettings"
:loading="itemSavingState"
>
<span slot="label"><?php _e( 'Save', 'jet-menu' ); ?></span>
</cx-vui-button>
</div>
</div>
</cx-vui-tabs-panel>
</cx-vui-tabs>
<iframe
v-if="editorVisible"
:src="currentEditorUrl"
width="100%"
class="jet-edit-frame"
></iframe>
</div>
</cx-vui-popup>
</transition>
</div>
<?php // phpcs:enable ?>