KingMcDonalds
51 lines
2.0 KiB
HTML
51 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>XMenu</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<div id="app" v-show="visible">
|
|
<div id="menu_base" class="middle-right">
|
|
<div id="menu_header" v-bind:style="{ 'background-color': HeaderColor }">
|
|
{{ MenuName }}
|
|
</div>
|
|
<div id="menu_body">
|
|
<div v-for="(comp, compIndex) in MenuComponents">
|
|
|
|
<!-- List -->
|
|
<div :id="compIndex" v-if="comp.type == 'list'" class="menu_button" v-bind:class="{ 'menu_button_hovered': compIndex == MenuOption }">
|
|
<i class="fa fa-arrow-left fa-2x menu_list_icon_left"></i>
|
|
{{ comp.list[comp.listIndex - 1] }}
|
|
<i class="fa fa-arrow-right fa-2x menu_list_icon_right"></i>
|
|
</div>
|
|
|
|
<!-- Checkbox -->
|
|
<div :id="compIndex" v-else-if="comp.type == 'checkbox'" class="menu_checkbox" v-bind:class="{ 'menu_checkbox_hovered': compIndex == MenuOption, 'menu_checkbox_icon_hovered': compIndex == MenuOption }">
|
|
{{ comp.name }}
|
|
<i v-if="comp.state" class="fa fa-check-square fa-2x menu_checkbox_icon"></i>
|
|
<i v-else class="fa fa-square fa-2x menu_checkbox_icon"></i>
|
|
</div>
|
|
|
|
<!-- Button -->
|
|
<div :id="compIndex" v-else class="menu_button" v-bind:class="{ 'menu_button_hovered': compIndex == MenuOption }">
|
|
{{ comp.name }}
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://use.fontawesome.com/4802736edb.js"></script>
|
|
<script src="https://use.fontawesome.com/4802736edb.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- DEVELOPMENT -->
|
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
|
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> --> <!-- PRODUCTION -->
|
|
<script src="events.js"></script>
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html> |