<template>
    <div>
        <sidebar :menus="menus"></sidebar>
        <div class="relative md:ml-64" style="background: #f0f4f8">
            <admin-navbar />
            <alert />
            <div class="px-4  mx-auto w-full relative z-5">
                <slot></slot>
            </div>
        </div>

        <!--<div v-if="$page.props.flash.success" class="green">
            {{ $page.props.flash.success }}
        </div>
        <div v-if="$page.props.flash.error" class="red">
            {{ $page.props.flash.error }}
        </div>-->
    </div>
</template>

<script>
import AdminNavbar from "@/components/Navbars/AdminNavbar.vue";
import Sidebar from "@/components/Sidebar/Sidebar.vue";
import FooterAdmin from "@/components/Footers/FooterAdmin.vue";
import Alert from "@/components/Alert/Alert.vue";

export default {
    components: {
        AdminNavbar,
        Sidebar,
        FooterAdmin,
        Alert,
    },

    data() {
        return {
            menus: [
                // Admin Utilities Menus
                {
                    lable: "Admin Utilities",
                    sub_menus: [
                        {
                            lable: "Dashboard",
                            icon: "fas fa-tv",
                            route: route("admin.dashboard"),
                        },
                    ],
                },

                {
                    lable: "Catelog",
                    sub_menus: [
                        {
                            lable: "Products",
                            icon: "fad fa-female",
                            route: route("admin.catalog.product.index"),
                        },
                        {
                            lable: "Category",
                            icon: "fad fa-female",
                            route: route("admin.catalog.category.index"),
                        },

                    ]
                },
            ],
        };
    },
};
</script>


<style>
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}
</style>
