<!-- 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> <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> <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> {{ 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> {{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> <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> <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> <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> <span class="menu-title">{{ translate('sidebar', 'contribute', data['lang']) }}</span> </a> </li> {% end %} </ul> </nav> <!-- partial -->