<div class="settings-panel">
    <div class="settings-btn">
        <i class="material-icons spin">settings</i>
    </div>
    <div class="settings-options p-4">
        <div class="row">
            <div class="col-12">
                <h3 class="py-3">Menu Style</h3>
                <div class="custom-control custom-switch">
                    <input type="radio" value="default" checked name="menu-switch" class="custom-control-input" id="switch-menu-default">
                    <label class="custom-control-label" for="switch-menu-default">
                        <span>Default</span>
                    </label>
                </div>
                <div class="custom-control custom-switch">
                    <input type="radio" value="mini" name="menu-switch" class="custom-control-input" id="switch-menu-mini">
                    <label class="custom-control-label" for="switch-menu-mini">
                        <span>Mini</span>
                    </label>
                </div>
                <div class="custom-control custom-switch">
                    <input type="radio" value="overlay" name="menu-switch" class="custom-control-input" id="switch-menu-overlay">
                    <label class="custom-control-label" for="switch-menu-overlay">
                        <span>Overlay</span>
                    </label>
                </div>
                <div class="custom-control custom-switch">
                    <input type="radio" value="horizontal" name="menu-switch" class="custom-control-input" id="switch-menu-horizontal">
                    <label class="custom-control-label" for="switch-menu-horizontal">
                        <span>Horizontal</span>
                    </label>
                </div>

                <div class="custom-control custom-switch">
                    <input type="radio" value="horizontal-no-icon" name="menu-switch" class="custom-control-input" id="switch-menu-horizontal-no-icon">
                    <label class="custom-control-label" for="switch-menu-horizontal-no-icon">
                        <span>Horizontal without icon</span>
                    </label>
                </div>
                <h3 class="py-3">Layout</h3>
                <div class="custom-control custom-switch">
                    <input type="radio" value="box" checked name="layout-switch" class="custom-control-input" id="switch-layout-box">
                    <label class="custom-control-label" for="switch-layout-box">
                        <span>Box</span>
                    </label>
                </div>
                <div class="custom-control custom-switch">
                    <input type="radio" value="full-width" name="layout-switch" class="custom-control-input" id="switch-layout-full-width">
                    <label class="custom-control-label" for="switch-layout-full-width">
                        <span>Full width</span>
                    </label>
                </div>
                <h3 class="py-3">Theme Color</h3>
                <div class="color-pellate">
                    <button class="btn btn-default btm-sm btn-circle mb-2 bg-special-pink" data-href="assets/css/special-pink.css">
                    </button>
                    <button class="btn btn-default btm-sm btn-circle mb-2 bg-special-paradise-pink" data-href="assets/css/special-paradise-pink.css">
                    </button>
                    <button class="btn btn-default btm-sm btn-circle mb-2 bg-special-ruby" data-href="assets/css/special-ruby.css">
                    </button>
                    <button class="btn btn-default btm-sm btn-circle mb-2 bg-special-eggplant" data-href="assets/css/special-eggplant.css">
                    </button>
                    <button class="btn btn-default btm-sm btn-circle mb-2 bg-special-sienna" data-href="assets/css/special-sienna.css">
                    </button>
                    <button class="btn btn-default btm-sm btn-circle mb-2 bg-special-jet" data-href="assets/css/special-jet.css">
                    </button>
                    <button class="btn btn-default btm-sm btn-circle mb-2 bg-special-dark" data-href="assets/css/special-dark.css">
                    </button>
                    <button class="btn btn-default btm-sm btn-circle mb-2 bg-special-cedar-chest" data-href="assets/css/special-cedar-chest.css">
                    </button>
                    <button class="btn btn-default btm-sm btn-circle mb-2 bg-special-gunmetal" data-href="assets/css/special-gunmetal.css">
                    </button>
                    <button class="btn btn-default btm-sm btn-circle mb-2 bg-special-blue" data-href="assets/css/special-blue.css">
                    </button>
                    <button class="btn btn-default btm-sm btn-circle mb-2 bg-special-red" data-href="assets/css/special-red.css">
                    </button>
                    <button class="btn btn-default btm-sm btn-circle mb-2 bg-special-orange" data-href="assets/css/special-orange.css">
                    </button>
                    <button class="btn btn-default btm-sm btn-circle mb-2 bg-special-green" data-href="assets/css/special-green.css">
                    </button>
                    <button class="btn btn-default btm-sm btn-circle mb-2 bg-special-lightgreen" data-href="assets/css/special-lightgreen.css">
                    </button>
                    <button class="btn btn-default btm-sm btn-circle mb-2 bg-special-brown" data-href="assets/css/special-brown.css">
                    </button>
                    <button class="btn btn-default btm-sm btn-circle mb-2 bg-special-coffee" data-href="assets/css/special-coffee.css">
                    </button>
                    </div>
                <h3 class="py-3">
                        RTL/LTR Mode
                </h3>
                <div class="custom-control custom-switch">
                    <input type="radio" value="ltr" checked name="direction-switch" class="custom-control-input" id="switch-direction-ltr">
                    <label class="custom-control-label" for="switch-direction-ltr">
                        <span>LTR</span>
                    </label>
                </div>
                <div class="custom-control custom-switch">
                    <input type="radio" value="rtl" name="direction-switch" class="custom-control-input" id="switch-direction-rtl">
                    <label class="custom-control-label" for="switch-direction-rtl">
                        <span>RTL</span>
                    </label>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- build:js assets/js/vendor.bundle.js -->
<script src="../../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../../node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../../node_modules/nanobar/nanobar.min.js"></script>
<script src="../../node_modules/toastr/build/toastr.min.js"></script>
<script src="../../node_modules/screenfull/dist/screenfull.js"></script>
<!-- endbuild -->


<!-- build:js assets/js/app.bundle.js -->
<script src="../assets/js/app/theme-colors.js"></script>
<script src="../assets/js/app/progress-bar.js"></script>
<script src="../assets/js/app/bs4-breakpoint-check.js"></script>
<script src="../assets/js/app/menu.js"></script>
<script src="../assets/js/app/main.js"></script>
<script src="../assets/js/app/context-menu.js"></script>
<script src="../assets/js/demo/settings-panel.js"></script>
<!-- endbuild -->
