<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div th:fragment="sidebar"
     class="menu menu-box-left"
     data-menu-width="300"
     data-menu-effect="menu-parallax">


        <a href="/index.html" class="header-title">Sticky Mobile</a>
        <a href="#" data-back-button class="header-icon header-icon-1"><i class="fas fa-arrow-left"></i></a>
        <a href="#" data-toggle-theme class="header-icon header-icon-4"><i class="fas fa-lightbulb"></i></a>


</div>

<div th:fragment="sidebar"
     id="menu-sidebar-left-1"
     class="menu menu-box-left"
     data-menu-width="310"
     data-menu-effect="menu-parallax">
    <div class="d-flex">
        <a href="#" class="flex-fill icon icon-m text-center color-facebook border-bottom border-right"><i class="fab font-12 fa-facebook-f"></i></a>
        <a href="#" class="flex-fill icon icon-m text-center color-twitter border-bottom border-right"><i class="fab font-12 fa-twitter"></i></a>
        <a href="#" class="flex-fill icon icon-m text-center color-instagram border-bottom border-right"><i class="fab font-12 fa-instagram"></i></a>
        <a href="#" class="flex-fill icon icon-m text-center color-whatsapp border-bottom border-right"><i class="fab font-12 fa-whatsapp"></i></a>
        <a href="#" class="flex-fill icon icon-m text-center color-linkedin border-bottom border-right"><i class="fab font-12 fa-linkedin-in"></i></a>
        <a href="#" class="close-menu flex-fill icon icon-m text-center color-red-dark border-bottom"><i class="fa font-12 fa-times"></i></a>
    </div>
    <div class="ps-3 pe-3 pt-3 mt-4 mb-2">
        <div class="d-flex">
            <div class="me-3">
                <img src="https://hoonytemplatebucket.s3.ap-northeast-2.amazonaws.com/images/preload-logo.png" width="43">
            </div>
            <div class="flex-grow-1">
                <h1 class="font-22 font-700 mb-0">Over Effect</h1>
                <p class="mt-n2  font-10 font-400">The Best Mobile Template</p>
            </div>
        </div>
    </div>

    <div class="me-3 ms-3">
        <span class="text-uppercase font-900 font-11 opacity-30">Navigation</span>
        <div class="list-group list-custom-small list-icon-0">
            <a href="#">
                <i class="fa font-14 fa-star color-yellow-dark"></i>
                <span>Homepage</span>
                <i class="fa fa-angle-right"></i>
            </a>
            <a href="#">
                <i class="fa font-14 fa-cog color-blue-dark"></i>
                <span>Components</span>
                <span class="badge bg-red-dark">NEW</span>
                <i class="fa fa-angle-right"></i>
            </a>
            <a href="#">
                <i class="fa font-14 fa-file color-brown-dark"></i>
                <span>Pages</span>
                <i class="fa fa-angle-right"></i>
            </a>
            <a href="#">
                <i class="fa font-14 fa-camera color-green-dark"></i>
                <span>Media</span>
                <i class="fa fa-angle-right"></i>
            </a>
            <a href="#" class="border-0">
                <i class="fa font-14 fa-image color-teal-dark"></i>
                <span>Contact</span>
                <i class="fa fa-angle-right"></i>
            </a>
        </div>
    </div>

    <div class="me-3 ms-3 mt-4">
        <span class="text-uppercase font-900 font-11 opacity-30">SOCIAL LINKS</span>
        <div class="list-group list-custom-small list-icon-0">
            <a href="#">
                <i class="fab font-14 fa-facebook-f color-facebook"></i>
                <span>Facebook</span>
                <i class="fa fa-link"></i>
            </a>
            <a href="#">
                <i class="fab font-14 fa-twitter color-twitter"></i>
                <span>Twitter</span>
                <i class="fa fa-link"></i>
            </a>
            <a href="#" class="border-0">
                <i class="fab font-14 fa-instagram color-instagram"></i>
                <span>Instagram</span>
                <i class="fa fa-link"></i>
            </a>
        </div>
    </div>

    <div class="me-3 ms-3 mt-4 pt-2">
        <span class="text-uppercase font-900 font-11 opacity-30">Account Settings</span>
        <div class="list-group list-custom-small list-icon-0">
            <a href="#" data-toggle-theme="" data-trigger-switch="switch-dark2-mode">
                <i class="fa font-12 fa-moon color-yellow-dark rounded-s"></i>
                <span>Dark Mode</span>
                <div class="custom-control scale-switch ios-switch">
                    <input data-toggle-theme="" type="checkbox" class="ios-input" id="switch-dark2-mode">
                    <label class="custom-control-label" for="switch-dark2-mode"></label>
                </div>
                <i class="fa fa-angle-right"></i>
            </a>
            <a data-trigger-switch="sidebar-12-switch-2" href="#">
                <i class="fa font-14 fa-circle color-green-dark"></i>
                <span>Active Mode</span>
                <div class="custom-control scale-switch ios-switch">
                    <input type="checkbox" class="ios-input" id="sidebar-12-switch-2" checked="">
                    <label class="custom-control-label" for="sidebar-12-switch-2"></label>
                </div>
                <i class="fa fa-angle-right"></i>
            </a>
            <a data-trigger-switch="sidebar-12-switch-3" href="#" class="border-0">
                <i class="fa font-14 fa-bell color-blue-dark"></i>
                <span>Notifications</span>
                <div class="custom-control scale-switch ios-switch">
                    <input type="checkbox" class="ios-input" id="sidebar-12-switch-3" checked="">
                    <label class="custom-control-label" for="sidebar-12-switch-3"></label>
                </div>
                <i class="fa fa-angle-right"></i>
            </a>
        </div>
    </div>
</div>
</html>