crafty-4/app/frontend/templates/main_menu.html

<!-- partial -->
      <div class="container-fluid page-body-wrapper">
        <!-- partial:partials/_sidebar.html -->
        <style>
        @media screen and (max-width: 991px) {
            .sidebar-offcanvas {
                -webkit-transition: all 0.25s cubic-bezier(.22,.61,.36,1);
                transition: all 0.25s cubic-bezier(.22,.61,.36,1);
                box-shadow: 0px 8px 17px 2px rgba(0,0,0,0.14) , 0px 3px 14px 2px rgba(0,0,0,0.12) , 0px 5px 5px -3px rgba(0,0,0,0.2);
            }
        }
        </style>
        <script>
            function debounce(func, wait, immediate) {
            	var timeout;
            	return function() {
		            var context = this, args = arguments;
        		    var later = function() {
		        	    timeout = null;
            			if (!immediate) func.apply(context, args);
	    	        };
            		var callNow = immediate && !timeout;
		            clearTimeout(timeout);
        		    timeout = setTimeout(later, wait);
		            if (callNow) func.apply(context, args);
            	};
            };
            function isExtraLargeBreakpoint() {
                const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
                return vw >= 1200;
            }
            function isLargeBreakpoint() {
                const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
                return vw >= 992;
            }
            $(document).ready(function() {
                sidebarResizeHandler(null);
                $(window).on(
                    'resize',
                    debounce(sidebarResizeHandler, 25, true)
                );
            });
            function sidebarResizeHandler(e) {
                /*
                    Viewport sizes: Extra large (vw >= 1200px), large (vw >= 992px), medium (vw >= 768px)
                  - A localstorage item is set to remember a user's preference between collapsed or expanded.
                  - For extra large viewports, the sidebar is the user's preference (by default expanded). When
                    expanded or collapsed manually, it doesn't overlap the page content and the preference
                    gets saved to a localstorage item.
                  - For large viewports, the sidebar is collapsed. When expanded manually, it doesn't overlap
                    the page content. The user's localstorage preference is not overridden during this state.
                  - For medium and below viewports, the sidebar is hidden behing a hamburger icon. When expanded, the sidebar
                    overlaps the page content. The user's localstorage preference is not overridden during this state.

                  More code in `app/frontend/static/assets/js/shared/misc.js` and `app/frontend/templates/base.html`
                */
                if (isExtraLargeBreakpoint()) {
                    let value = localStorage.getItem('crafty-sidebar-expanded') !== 'false';
                    $('body').toggleClass('sidebar-icon-only', !value);
                    localStorage.setItem('crafty-sidebar-expanded', value);
                } else if (isLargeBreakpoint()) {
                    $('body').toggleClass('sidebar-icon-only', true);
                }
            }
        </script>
        <nav class="sidebar sidebar-offcanvas" id="sidebar">
          <ul class="nav">

            <li class="nav-item nav-category" style="margin-top:10px;">{{ translate('sidebar', 'navigation', data['lang']) }}</li>

            <li class="nav-item">
              <a class="nav-link" href="/panel/dashboard">
                <i class="fas fa-chart-network"></i>&nbsp;
                <span class="menu-title">{{ translate('sidebar', 'dashboard', data['lang']) }}</span>
              </a>
            </li>

            <li class="nav-item">
              <a class="nav-link" data-toggle="collapse" href="#page-layouts" aria-expanded="false" aria-controls="page-layouts">
                <i class="fas fa-server"></i> &nbsp;
                <span class="menu-title">{{ translate('sidebar', 'servers', data['lang']) }}</span>
                <i class="menu-arrow"></i>
              </a>
              <div class="collapse" id="page-layouts">
                <ul class="nav flex-column sub-menu">
                  {% if data['crafty_permissions']['Server_Creation'] in data['user_crafty_permissions'] %}
                    <li class="nav-item">
                      <a class="nav-link" href="/server/step1"><i class="fas fa-plus-circle"></i> &nbsp; {{ translate('sidebar', 'newServer', data['lang']) }}</a>
                    </li>
                  {% end %}
                  {% for s in data['menu_servers'] %}
                    <li class="nav-item">
                      <a class="nav-link" href="/panel/server_detail?id={{s['server_id']}}"><i class="fas fa-server"></i> &nbsp; {{s['server_name']}}</a>
                    </li>
                  {% end %}

                </ul>
              </div>
            </li>

            <li class="nav-item">
              <a class="nav-link" href="https://wiki.craftycontrol.com" target="_blank">
                <i class="fas fa-book"></i> &nbsp;
                <span class="menu-title">{{ translate('sidebar', 'documentation', data['lang']) }}</span>
              </a>
            </li>

            <li class="nav-item">
              <a class="nav-link" href="https://discord.gg/9VJPhCE" target="_blank">
                <i class="fab fa-discord"></i> &nbsp;
                <span class="menu-title">Discord</span>
              </a>
            </li>

            <li class="nav-item">
              <a class="nav-link" href="/panel/credits">
                <i class="fas fa-heart"></i> &nbsp;
                <span class="menu-title">{{ translate('sidebar', 'credits', data['lang']) }}</span>
              </a>
            </li>

            {% if data['show_contribute'] %}
            <li class="nav-item">
              <a class="nav-link" href="/panel/contribute">
                <i class="fas fa-donate"></i> &nbsp;
                <span class="menu-title">{{ translate('sidebar', 'contribute', data['lang']) }}</span>
              </a>
            </li>
            {% end %}

          </ul>
        </nav>
        <!-- partial -->