Refactor main menu (#3066)

web/css/src/themes/dark.css

@@ -4,9 +4,12 @@
     Website:     www.hestiacp.com
 */
 
+@custom-media --viewport-medium (min-width: 768px);
+
 :root {
   --color-text: #cdcdcd;
   --color-background: #282828;
+  --alert-border-color: #212121;
 }
 
 b,
@@ -139,9 +142,8 @@ strong {
   color: #0079cb;
 }
 
-.alert {
-  border-color: #212121;
-}
+/* Alerts
+   ========================================================================== */
 
 .alert-danger {
   background-color: #d13535;
@@ -151,6 +153,9 @@ strong {
   }
 }
 
+/* Cards
+   ========================================================================== */
+
 .card {
   background: #454545;
   color: #fafafa;
@@ -165,66 +170,46 @@ strong {
   }
 }
 
-.l-stat {
-  background-color: #282828;
-}
-
-.l-stat__col {
-}
-
-.l-stat__col li {
-  color: #b7b7b7 !important;
-}
-
-.l-stat__col a {
-  border-bottom: 4px solid #282828;
-  background-color: #282828;
-}
-
-.l-stat__col a:hover {
-  border-bottom: 4px solid #d7d7d7;
-}
+/* Main menu
+   ========================================================================== */
 
-.l-stat__col a:active,
-.l-stat__col a:focus {
-  border-bottom: 4px solid #d11755;
-}
+.main-menu-item-link {
+  &:hover {
+    & .main-menu-item-label {
+      color: #d7d7d7;
+    }
+  }
 
-.l-stat__col--active a {
-  border-bottom: 4px solid #e93b76;
-}
+  &.active {
+    & .main-menu-item-label {
+      color: #c36;
 
-.l-stat.active .l-stat__col.focus a {
-  border-bottom: 4px solid #e93b76;
-}
+      & .fas {
+        color: #d7d7d7;
+      }
+    }
+  }
 
-.l-stat.active .l-stat__col.focus a .l-stat__col-title {
-}
+  @media (--viewport-medium) {
+    border-bottom-color: #282828;
 
-.l-stat__col a:hover .l-stat__col-title {
-  color: #d7d7d7;
-}
+    &:hover {
+      border-bottom-color: #d7d7d7;
+    }
 
-.l-stat__col a:active .l-stat__col-title {
+    &.active {
+      border-bottom-color: #c36;
+    }
+  }
 }
 
-.l-stat__col-title {
+.main-menu-item-label {
   font-weight: 500;
   color: #bcbcbc;
-  text-shadow: 0 1px rgb(0 0 0 / 40%);
-}
-
-.l-stat__col--active .l-stat__col-title {
-  color: #ff558f;
-}
 
-.l-stat__col .fas {
-  color: #707070;
-  padding: 4px;
-}
-
-.l-stat__col--active .fas {
-  color: #aaa;
+  & .fas {
+    color: #707070;
+  }
 }
 
 .l-separator {

web/css/src/themes/default.css

@@ -17,6 +17,9 @@
   --font-family-monospace: "Inconsolata", "Lucida Console", "Monaco", monospace;
   --color-text: #7c7c7c;
   --color-background: #fff;
+  --alert-border-color: #fff;
+  --alert-box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
+  --alert-text-shadow: 0 1px rgb(0 0 0 / 45%);
 }
 
 .check-label {
@@ -324,15 +327,18 @@
   padding-top: 0.6rem;
 }
 
+/* Alerts
+   ========================================================================== */
+
 .alert {
   border-radius: 4px;
-  border: 1px solid #fff;
+  border: 1px solid var(--alert-border-color);
   font-weight: 400;
   padding: 0.8rem;
   position: relative;
   text-align: left;
-  box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
-  text-shadow: 0 1px rgb(0 0 0 / 45%);
+  box-shadow: var(--alert-box-shadow);
+  text-shadow: var(--alert-text-shadow);
 
   & a {
     font-weight: bold;
@@ -391,6 +397,9 @@
   }
 }
 
+/* Cards
+   ========================================================================== */
+
 .cards {
   @media (--viewport-small) {
     display: grid;
@@ -456,92 +465,96 @@
   }
 }
 
-.l-stat {
-  background-color: #fff;
-  padding-top: 31px;
-  overflow: hidden;
-  text-align: center;
-  display: flex;
-}
-
-.l-stat__col {
-  flex: 1;
-}
+/* Main menu
+   ========================================================================== */
 
-.l-stat__col a {
-  display: block;
-  min-height: 110px;
-  overflow: hidden;
-  margin-left: 20px;
-  margin-right: 20px;
-  border-bottom: 4px solid #fff;
-  padding-bottom: 16px;
-  background-color: #fff;
+.main-menu {
+  margin-top: 10px;
+  margin-bottom: 10px;
 
-  &:hover {
-    border-bottom: 4px solid #e83b75;
-    transition: 0.3s;
+  @media (--viewport-medium) {
+    margin-top: 20px;
+    margin-bottom: 0;
   }
+}
 
-  &:active {
-    border-bottom: 4px solid #d53067;
+.main-menu-list {
+  @media (--viewport-medium) {
+    display: flex;
+    justify-content: space-evenly;
   }
 }
 
-.l-stat__col--active a {
-  border-bottom: 4px solid #c36;
-}
+.main-menu-item {
+  @media (--viewport-medium) {
+    display: flex;
 
-.l-stat.active .l-stat__col.focus a {
-  border-bottom: 4px solid #5edad0;
-}
+    &.focus {
+      & .main-menu-item-link {
+        border-bottom-color: #5edad0;
+      }
 
-.l-stat.active .l-stat__col.focus a .l-stat__col-title {
-  color: #36b3a9;
+      & .main-menu-item-label {
+        color: #5edad0;
+      }
+    }
+  }
 }
 
-.l-stat__col a:hover .l-stat__col-title {
-  color: #e83b75;
-}
+.main-menu-item-link {
+  display: block;
+  text-align: center;
+  padding: 10px;
 
-.l-stat__col a:active .l-stat__col-title {
-  color: #d53067;
-}
+  &:hover {
+    & .main-menu-item-label {
+      color: #c36;
+    }
+  }
 
-.l-stat__col ul {
-  font-size: 0.75rem;
-  padding-left: 0;
-  line-height: 14px;
-  margin-top: 12px;
-  margin-bottom: 12px;
-}
+  &.active {
+    & .main-menu-item-label {
+      color: #c36;
 
-.l-stat__col li {
-  color: #7b7b7b;
-  margin-bottom: 8px;
-  text-transform: lowercase;
+      & .fas {
+        color: #c36;
+      }
+    }
+  }
+
+  @media (--viewport-medium) {
+    padding-left: 30px;
+    padding-right: 30px;
+    border-bottom: 4px solid #fff;
+
+    &:hover,
+    &.active {
+      border-bottom-color: #c36;
+      transition: 0.3s;
+    }
+  }
 }
 
-.l-stat__col-title {
-  text-transform: uppercase;
-  font-weight: 600;
+.main-menu-item-label {
   color: #5b5b5b;
-  min-height: 21px;
+  font-weight: 600;
   font-size: 16px;
-}
 
-.l-stat__col--active .l-stat__col-title {
-  color: #c36;
-  font-size: 16px;
+  & .fas {
+    color: #999;
+  }
 }
 
-.l-stat__col .fas {
-  color: #999;
-  padding: 4px;
-}
+.main-menu-stats {
+  display: none;
 
-.l-stat__col--active .fas {
-  color: #c36;
+  @media (--viewport-medium) {
+    display: block;
+    font-size: 0.75rem;
+    text-transform: lowercase;
+    padding-top: 10px;
+    padding-bottom: 25px;
+  }
 }
 
 .l-separator {

web/css/src/themes/flat.css

@@ -4,8 +4,9 @@
     Website:     www.hestiacp.com
 */
 
-body {
-  letter-spacing: 0;
+:root {
+  --alert-box-shadow: none;
+  --alert-text-shadow: none;
 }
 
 b,
@@ -150,11 +151,6 @@ strong {
   box-shadow: 0 2px 11px 0 rgb(0 0 0 / 50%);
 }
 
-.alert {
-  text-shadow: none;
-  box-shadow: none;
-}
-
 .usage-pill {
   box-shadow: none;
 }

web/css/src/themes/vestia.css

@@ -4,13 +4,13 @@
     Website:     www.hestiacp.com
 */
 
+@custom-media --viewport-medium (min-width: 768px);
+
 :root {
   --animate-duration: 0s;
   --font-family: "Arial", system-ui;
-}
-
-body {
-  letter-spacing: 0;
+  --alert-box-shadow: none;
+  --alert-text-shadow: none;
 }
 
 b,
@@ -79,24 +79,6 @@ strong {
   box-shadow: none;
 }
 
-.l-stat__col--active .fas,
-.l-stat__col--active .l-stat__col-title {
-  color: #ff6701;
-}
-
-.l-stat__col--active .l-stat__col-title {
-  font-size: 20px !important;
-}
-
-.l-stat__col-title {
-  font-weight: 700;
-  font-size: 14px !important;
-}
-
-.l-stat__col--active a {
-  border-bottom: 4px solid #ff6701;
-}
-
 /* Buttons
    ========================================================================== */
 
@@ -174,11 +156,6 @@ strong {
   box-shadow: 0 2px 11px 0 rgb(0 0 0 / 50%);
 }
 
-.alert {
-  text-shadow: none;
-  box-shadow: none;
-}
-
 .notification-container {
   border: 1px solid #ccc;
   background: #fff;
@@ -219,27 +196,47 @@ strong {
   }
 }
 
-.l-menu__item.l-menu__item--active a {
-  color: #ff6701;
-  background: none;
-  box-shadow: none !important;
-}
+/* Main menu
+   ========================================================================== */
 
-.l-stat__col a:hover {
-  border-bottom: 4px solid #ff791f;
-}
+.main-menu-item-link {
+  &:hover {
+    & .main-menu-item-label {
+      color: #ff791f;
+    }
+  }
 
-.l-stat__col a:hover,
-.l-stat__col a:hover .l-stat__col-title {
-  color: #ff791f;
+  &.active {
+    & .main-menu-item-label {
+      color: #ff791f;
+    }
+  }
+
+  & .fas {
+    display: none;
+  }
+
+  @media (--viewport-medium) {
+    text-align: left;
+
+    &:hover {
+      border-bottom-color: #ff791f;
+    }
+
+    &.active {
+      border-bottom-color: #ff791f;
+    }
+  }
 }
 
-.l-stat__col a:active {
-  border-bottom: 4px solid #f16100;
+.main-menu-item-label {
+  font-size: 14px;
 }
 
-.l-stat__col a:active .l-stat__col a:active.l-stat__col-title {
-  color: #ff791f;
+.l-menu__item.l-menu__item--active a {
+  color: #ff6701;
+  background: none;
+  box-shadow: none !important;
 }
 
 .notification-container .unseen .notification-title a,
@@ -268,10 +265,6 @@ strong {
   border-color: #e95e00;
 }
 
-.l-stat {
-  text-align: left;
-}
-
 .form-title {
   font-weight: 600;
   font-size: 1.2rem;
@@ -398,15 +391,6 @@ strong {
   border: 1px solid rgb(255 255 255 / 40%) !important;
 }
 
-.lang-el .l-stat__col-title,
-.lang-fr .l-stat__col-title {
-  font-size: 15px !important;
-}
-
-.l-stat__col .fas {
-  display: none !important;
-}
-
 a#btn-back {
   color: #30659d !important;
   background: none !important;

web/js/events.js

@@ -4,8 +4,8 @@ var VE = { // Hestia Events object
     navigation: {
         state: {
             active_menu: 1,
-            menu_selector: '.l-stat__col',
-            menu_active_selector: '.l-stat__col--active'
+            menu_selector: '.main-menu-item',
+            menu_active_selector: '.active'
         }
     }, // menu and element navigation functions
     notifications: {},
@@ -254,11 +254,6 @@ VE.navigation.move_focus_left = function(){
 
     if($('.units').hasClass('active')){
         $('.units').removeClass('active');
-        if(VE.navigation.state.active_menu == 0){
-            $('.l-menu').addClass('active');
-        } else {
-            $('.l-stat').addClass('active');
-        }
         index++;
     }
 
@@ -280,11 +275,6 @@ VE.navigation.move_focus_right = function(){
 
     if($('.units').hasClass('active')){
         $('.units').removeClass('active');
-        if(VE.navigation.state.active_menu == 0){
-            $('.l-menu').addClass('active');
-        } else {
-            $('.l-stat').addClass('active');
-        }
         index--;
     }
 
@@ -299,9 +289,8 @@ VE.navigation.move_focus_down = function(){
     var max_index = $('.units .l-unit:not(.header)').length-1;
     var index = parseInt($('.units .l-unit').index($('.units .l-unit.focus')));
 
-    if($('.l-menu').hasClass('active') || $('.l-stat').hasClass('active')){
+    if($('.l-menu').hasClass('active')){
         $('.l-menu').removeClass('active');
-        $('.l-stat').removeClass('active');
         $('.units').addClass('active');
         index--;
 
@@ -325,9 +314,8 @@ VE.navigation.move_focus_up = function(){
     if(index == -1)
         index = 0;
 
-    if($('.l-menu').hasClass('active') || $('.l-stat').hasClass('active')){
+    if($('.l-menu').hasClass('active')){
         $('.l-menu').removeClass('active');
-        $('.l-stat').removeClass('active');
         $('.units').addClass('active');
         index++;
     }
@@ -347,10 +335,9 @@ VE.navigation.switch_menu = function(position){
 
     if(VE.navigation.state.active_menu == 0){
         VE.navigation.state.active_menu = 1;
-        VE.navigation.state.menu_selector = '.l-stat__col';
-        VE.navigation.state.menu_active_selector = '.l-stat__col--active';
+        VE.navigation.state.menu_selector = '.main-menu-item';
+        VE.navigation.state.menu_active_selector = '.active';
         $('.l-menu').removeClass('active');
-        $('.l-stat').addClass('active');
 
         if(position == 'first'){
             $($(VE.navigation.state.menu_selector)[0]).addClass('focus');
@@ -363,7 +350,6 @@ VE.navigation.switch_menu = function(position){
         VE.navigation.state.menu_selector = '.l-menu__item';
         VE.navigation.state.menu_active_selector = '.l-menu__item--active';
         $('.l-menu').addClass('active');
-        $('.l-stat').removeClass('active');
 
         if(position == 'first'){
             $($(VE.navigation.state.menu_selector)[0]).addClass('focus');
@@ -443,9 +429,6 @@ VE.navigation.init = function(){
         VE.navigation.state.menu_selector = '.l-menu__item';
         VE.navigation.state.menu_active_selector = '.l-menu__item--active';
         $('.l-menu').addClass('active');
-        $('.l-stat').removeClass('active');
-    } else {
-        $('.l-stat').addClass('active');
     }
 }
 

web/js/init.js

@@ -214,7 +214,7 @@ $(document).ready(function(){
               });
 
               shortcut.add("1", function(){
-                var target = $('.l-stat .l-stat__col:nth-of-type(1) a')
+                var target = $('.main-menu .main-menu-item:nth-of-type(1) a')
                 if(target.length != 1){
                   return;
                 }
@@ -232,7 +232,7 @@ $(document).ready(function(){
               );
 
               shortcut.add("2", function(){
-                var target = $('.l-stat .l-stat__col:nth-of-type(2) a')
+                var target = $('.main-menu .main-menu-item:nth-of-type(2) a')
                 if(target.length != 1){
                   return;
                 }
@@ -250,7 +250,7 @@ $(document).ready(function(){
               );
 
               shortcut.add("3", function(){
-                var target = $('.l-stat .l-stat__col:nth-of-type(3) a')
+                var target = $('.main-menu .main-menu-item:nth-of-type(3) a')
                 if(target.length != 1){
                   return;
                 }
@@ -268,7 +268,7 @@ $(document).ready(function(){
               );
 
               shortcut.add("4", function(){
-                var target = $('.l-stat .l-stat__col:nth-of-type(4) a')
+                var target = $('.main-menu .main-menu-item:nth-of-type(4) a')
                 if(target.length != 1){
                   return;
                 }
@@ -286,7 +286,7 @@ $(document).ready(function(){
               );
 
               shortcut.add("5", function(){
-                var target = $('.l-stat .l-stat__col:nth-of-type(5) a')
+                var target = $('.main-menu .main-menu-item:nth-of-type(5) a')
                 if(target.length != 1){
                   return;
                 }
@@ -304,7 +304,7 @@ $(document).ready(function(){
               );
 
               shortcut.add("6", function(){
-                var target = $('.l-stat .l-stat__col:nth-of-type(6) a')
+                var target = $('.main-menu .main-menu-item:nth-of-type(6) a')
                 if(target.length != 1){
                   return;
                 }
@@ -322,7 +322,7 @@ $(document).ready(function(){
               );
 
               shortcut.add("7", function(){
-                var target = $('.l-stat .l-stat__col:nth-of-type(7) a')
+                var target = $('.main-menu .main-menu-item:nth-of-type(7) a')
                 if(target.length != 1){
                   return;
                 }

web/templates/includes/panel.html

@@ -98,112 +98,140 @@
 
 <div class="l-content">
   <div class="l-center">
-    <div class="l-stat">
-      <!-- Users tab -->
-      <?php if (($_SESSION['userContext'] == 'admin') && (empty($_SESSION['look']))) {?>
-        <?php
-          if (($_SESSION['user'] !== 'admin') && ($_SESSION['POLICY_SYSTEM_HIDE_ADMIN'] === 'yes')) {
-            $user_count = $panel[$user]['U_USERS'] - 1;
-          } else {
-            $user_count = $panel[$user]['U_USERS'];
-          }
-        ?>
-        <div class="l-stat__col <?php if(in_array($TAB, ['USER', 'LOG'])) echo 'l-stat__col--active' ?>">
-          <a href="/list/user/"  title="<?=_('Users');?>: <?=$user_count;?>&#13;<?=_('Suspended');?>: <?=$panel[$user]['SUSPENDED_USERS']?>">
-            <div class="l-stat__col-title"><?=_('USER');?>&nbsp;&nbsp;<i class="fas fa-users"></i></div>
-            <ul>
-              <li><?=_('users');?>: <span><?=htmlspecialchars($user_count);?></span></li>
-              <li><?=_('spnd');?>: <span><?=$panel[$user]['SUSPENDED_USERS']?></span></li>
-            </ul>
-          </a>
-        </div>
-      <?php } ?>
 
-      <!-- Web tab -->
-      <?php if ((isset($_SESSION['WEB_SYSTEM'])) && (!empty($_SESSION['WEB_SYSTEM']))) {?>
-        <?php if($panel[$user]['WEB_DOMAINS'] != "0") { ?>
-          <div class="l-stat__col <?php if($TAB == 'WEB') echo 'l-stat__col--active' ?>">
-            <a href="/list/web/" title="<?=_('Domains');?>: <?=$panel[$user]['U_WEB_DOMAINS']?>&#13;<?=_('Aliases');?>: <?=$panel[$user]['U_WEB_ALIASES']?>&#13;<?=_('Limit')?>: <?=$panel[$user]['WEB_DOMAINS']=='unlimited' ? "∞" : $panel[$user]['WEB_DOMAINS']?>&#13;<?=_('Suspended');?>: <?=$panel[$user]['SUSPENDED_WEB']?>">
-              <div class="l-stat__col-title"><?=_('WEB');?>&nbsp;&nbsp;<i class="fas fa-earth-americas"></i></div>
-              <ul>
-                <li><?=_('domains');?>: <span><?=$panel[$user]['U_WEB_DOMAINS']?> / <?=$panel[$user]['WEB_DOMAINS']=='unlimited' ? "<b>∞</b>" : $panel[$user]['WEB_DOMAINS']?> (<?=$panel[$user]['SUSPENDED_WEB']?>)</span></li>
-                <li><?=_('aliases');?>: <span><?=$panel[$user]['U_WEB_ALIASES']?> / <?=$panel[$user]['WEB_ALIASES']=='unlimited' || $panel[$user]['WEB_DOMAINS']=='unlimited'  ? "<b>∞</b>" : $panel[$user]['WEB_ALIASES'] * $panel[$user]['WEB_DOMAINS']?></span></li>
+    <nav class="main-menu">
+      <ul class="main-menu-list">
+
+        <!-- Users tab -->
+        <?php if (($_SESSION['userContext'] == 'admin') && (empty($_SESSION['look']))) {?>
+          <?php
+            if (($_SESSION['user'] !== 'admin') && ($_SESSION['POLICY_SYSTEM_HIDE_ADMIN'] === 'yes')) {
+              $user_count = $panel[$user]['U_USERS'] - 1;
+            } else {
+              $user_count = $panel[$user]['U_USERS'];
+            }
+          ?>
+          <li class="main-menu-item">
+            <a class="main-menu-item-link <?php if(in_array($TAB, ['USER', 'LOG'])) echo 'active' ?>" href="/list/user/" title="<?=_('Users');?>: <?=$user_count;?>&#13;<?=_('Suspended');?>: <?=$panel[$user]['SUSPENDED_USERS']?>">
+              <p class="main-menu-item-label"><?=_('USER');?><i class="fas fa-users u-ml10"></i></p>
+              <ul class="main-menu-stats">
+                <li>
+                  <?=_('users');?>: <span><?=htmlspecialchars($user_count);?></span>
+                </li>
+                <li>
+                  <?=_('spnd');?>: <span><?=$panel[$user]['SUSPENDED_USERS']?></span>
+                </li>
               </ul>
             </a>
-          </div>
+          </li>
         <?php } ?>
-      <?php } ?>
 
-      <!-- DNS tab -->
-      <?php if ((isset($_SESSION['DNS_SYSTEM'])) && (!empty($_SESSION['DNS_SYSTEM']))) {?>
-        <?php if($panel[$user]['DNS_DOMAINS'] != "0") { ?>
-          <div class="l-stat__col <?php if($TAB == 'DNS') echo 'l-stat__col--active' ?>">
-            <a href="/list/dns/" title="<?=_('Domains');?>: <?=$panel[$user]['U_DNS_DOMAINS']?>&#13;<?=_('Limit')?>: <?=$panel[$user]['DNS_DOMAINS']=='unlimited' ? "∞" : $panel[$user]['DNS_DOMAINS']?>&#13;<?=_('Suspended');?>: <?=$panel[$user]['SUSPENDED_DNS']?>">
-              <div class="l-stat__col-title"><?=_('DNS');?>&nbsp;&nbsp;<i class="fas fa-book-atlas"></i></div>
-              <ul>
-                <li><?=_('zones');?>: <span><?=$panel[$user]['U_DNS_DOMAINS']?> / <?=$panel[$user]['DNS_DOMAINS']=='unlimited' ? "<b>∞</b>" : $panel[$user]['DNS_DOMAINS']?> (<?=$panel[$user]['SUSPENDED_DNS']?>)</span></li>
-                <li><?=_('records');?>: <span><?=$panel[$user]['U_DNS_RECORDS']?> / <?=$panel[$user]['DNS_RECORDS']=='unlimited' || $panel[$user]['DNS_DOMAINS']=='unlimited' ? "<b>∞</b>" : $panel[$user]['DNS_RECORDS'] * $panel[$user]['DNS_DOMAINS']?></span></li>
-              </ul>
-            </a>
-          </div>
+        <!-- Web tab -->
+        <?php if ((isset($_SESSION['WEB_SYSTEM'])) && (!empty($_SESSION['WEB_SYSTEM']))) {?>
+          <?php if($panel[$user]['WEB_DOMAINS'] != "0") { ?>
+            <li class="main-menu-item">
+              <a class="main-menu-item-link <?php if($TAB == 'WEB') echo 'active' ?>" href="/list/web/" title="<?=_('Domains');?>: <?=$panel[$user]['U_WEB_DOMAINS']?>&#13;<?=_('Aliases');?>: <?=$panel[$user]['U_WEB_ALIASES']?>&#13;<?=_('Limit')?>: <?=$panel[$user]['WEB_DOMAINS']=='unlimited' ? "∞" : $panel[$user]['WEB_DOMAINS']?>&#13;<?=_('Suspended');?>: <?=$panel[$user]['SUSPENDED_WEB']?>">
+                <p class="main-menu-item-label"><?=_('WEB');?><i class="fas fa-earth-americas u-ml10"></i></p>
+                <ul class="main-menu-stats">
+                  <li>
+                    <?=_('domains');?>: <span><?=$panel[$user]['U_WEB_DOMAINS']?> / <?=$panel[$user]['WEB_DOMAINS']=='unlimited' ? "<b>∞</b>" : $panel[$user]['WEB_DOMAINS']?> (<?=$panel[$user]['SUSPENDED_WEB']?>)</span>
+                  </li>
+                  <li>
+                    <?=_('aliases');?>: <span><?=$panel[$user]['U_WEB_ALIASES']?> / <?=$panel[$user]['WEB_ALIASES']=='unlimited' || $panel[$user]['WEB_DOMAINS']=='unlimited'  ? "<b>∞</b>" : $panel[$user]['WEB_ALIASES'] * $panel[$user]['WEB_DOMAINS']?></span>
+                  </li>
+                </ul>
+              </a>
+            </li>
+          <?php } ?>
         <?php } ?>
-      <?php } ?>
 
-      <!-- Mail tab -->
-      <?php if ((isset($_SESSION['MAIL_SYSTEM'])) && (!empty($_SESSION['MAIL_SYSTEM']))) {?>
-        <?php if($panel[$user]['MAIL_DOMAINS'] != "0") { ?>
-          <div class="l-stat__col <?php if($TAB == 'MAIL') echo 'l-stat__col--active' ?>">
-            <a href="/list/mail/"  title="<?=_('Domains');?>: <?=$panel[$user]['U_MAIL_DOMAINS']?>&#13;<?=_('Limit')?>: <?=$panel[$user]['MAIL_DOMAINS']=='unlimited' ? "∞" : $panel[$user]['MAIL_DOMAINS']?>&#13;<?=_('Suspended');?>: <?=$panel[$user]['SUSPENDED_MAIL']?>">
-              <div class="l-stat__col-title"><?=_('MAIL');?>&nbsp;&nbsp;<i class="fas fa-envelopes-bulk"></i></div>
-              <ul>
-                <li><?=_('domains');?>: <span><?=$panel[$user]['U_MAIL_DOMAINS']?> / <?=$panel[$user]['MAIL_DOMAINS']=='unlimited' ? "<b>∞</b>" : $panel[$user]['MAIL_DOMAINS']?> (<?=$panel[$user]['SUSPENDED_MAIL']?>)</span></li>
-                <li><?=_('accounts');?>: <span><?=$panel[$user]['U_MAIL_ACCOUNTS']?> / <?=$panel[$user]['MAIL_ACCOUNTS']=='unlimited' || $panel[$user]['MAIL_DOMAINS']=='unlimited' ? "<b>∞</b>" : $panel[$user]['MAIL_ACCOUNTS'] * $panel[$user]['MAIL_DOMAINS']?></span></li>
-              </ul>
-            </a>
-          </div>
+        <!-- DNS tab -->
+        <?php if ((isset($_SESSION['DNS_SYSTEM'])) && (!empty($_SESSION['DNS_SYSTEM']))) {?>
+          <?php if($panel[$user]['DNS_DOMAINS'] != "0") { ?>
+            <li class="main-menu-item">
+              <a class="main-menu-item-link <?php if($TAB == 'DNS') echo 'active' ?>" href="/list/dns/" title="<?=_('Domains');?>: <?=$panel[$user]['U_DNS_DOMAINS']?>&#13;<?=_('Limit')?>: <?=$panel[$user]['DNS_DOMAINS']=='unlimited' ? "∞" : $panel[$user]['DNS_DOMAINS']?>&#13;<?=_('Suspended');?>: <?=$panel[$user]['SUSPENDED_DNS']?>">
+                <p class="main-menu-item-label"><?=_('DNS');?><i class="fas fa-book-atlas u-ml10"></i></p>
+                <ul class="main-menu-stats">
+                  <li>
+                    <?=_('zones');?>: <span><?=$panel[$user]['U_DNS_DOMAINS']?> / <?=$panel[$user]['DNS_DOMAINS']=='unlimited' ? "<b>∞</b>" : $panel[$user]['DNS_DOMAINS']?> (<?=$panel[$user]['SUSPENDED_DNS']?>)</span>
+                  </li>
+                  <li>
+                    <?=_('records');?>: <span><?=$panel[$user]['U_DNS_RECORDS']?> / <?=$panel[$user]['DNS_RECORDS']=='unlimited' || $panel[$user]['DNS_DOMAINS']=='unlimited' ? "<b>∞</b>" : $panel[$user]['DNS_RECORDS'] * $panel[$user]['DNS_DOMAINS']?></span>
+                  </li>
+                </ul>
+              </a>
+            </li>
+          <?php } ?>
         <?php } ?>
-      <?php } ?>
 
-      <!-- Databases tab -->
-      <?php if ((isset($_SESSION['DB_SYSTEM'])) && (!empty($_SESSION['DB_SYSTEM']))) {?>
-        <?php if($panel[$user]['DATABASES'] != "0") { ?>
-          <div class="l-stat__col <?php if($TAB == 'DB') echo 'l-stat__col--active' ?>">
-            <a href="/list/db/" title="<?=_('Databases');?>: <?=$panel[$user]['U_DATABASES']?>&#13;<?=_('Limit')?>: <?=$panel[$user]['DATABASES']=='unlimited' ? "∞" : $panel[$user]['DATABASES']?>&#13;<?=_('Suspended');?>: <?=$panel[$user]['SUSPENDED_DB']?>">
-              <div class="l-stat__col-title"><?=_('DB');?>&nbsp;&nbsp;<i class="fas fa-database"></i></div>
-              <ul>
-                <li><?=_('databases');?>: <span><?=$panel[$user]['U_DATABASES']?> / <?=$panel[$user]['DATABASES']=='unlimited' ? "<b>∞</b>" : $panel[$user]['DATABASES']?> (<?=$panel[$user]['SUSPENDED_DB']?>)</span></li>
-              </ul>
-            </a>
-          </div>
+        <!-- Mail tab -->
+        <?php if ((isset($_SESSION['MAIL_SYSTEM'])) && (!empty($_SESSION['MAIL_SYSTEM']))) {?>
+          <?php if($panel[$user]['MAIL_DOMAINS'] != "0") { ?>
+            <li class="main-menu-item">
+              <a class="main-menu-item-link <?php if($TAB == 'MAIL') echo 'active' ?>" href="/list/mail/" title="<?=_('Domains');?>: <?=$panel[$user]['U_MAIL_DOMAINS']?>&#13;<?=_('Limit')?>: <?=$panel[$user]['MAIL_DOMAINS']=='unlimited' ? "∞" : $panel[$user]['MAIL_DOMAINS']?>&#13;<?=_('Suspended');?>: <?=$panel[$user]['SUSPENDED_MAIL']?>">
+                <p class="main-menu-item-label"><?=_('MAIL');?><i class="fas fa-envelopes-bulk u-ml10"></i></p>
+                <ul class="main-menu-stats">
+                  <li>
+                    <?=_('domains');?>: <span><?=$panel[$user]['U_MAIL_DOMAINS']?> / <?=$panel[$user]['MAIL_DOMAINS']=='unlimited' ? "<b>∞</b>" : $panel[$user]['MAIL_DOMAINS']?> (<?=$panel[$user]['SUSPENDED_MAIL']?>)</span>
+                  </li>
+                  <li>
+                    <?=_('accounts');?>: <span><?=$panel[$user]['U_MAIL_ACCOUNTS']?> / <?=$panel[$user]['MAIL_ACCOUNTS']=='unlimited' || $panel[$user]['MAIL_DOMAINS']=='unlimited' ? "<b>∞</b>" : $panel[$user]['MAIL_ACCOUNTS'] * $panel[$user]['MAIL_DOMAINS']?></span>
+                  </li>
+                </ul>
+              </a>
+            </li>
+          <?php } ?>
         <?php } ?>
-      <?php } ?>
 
-      <!-- Cron tab -->
-      <?php if ((isset($_SESSION['CRON_SYSTEM'])) && (!empty($_SESSION['CRON_SYSTEM']))) {?>
-        <?php if($panel[$user]['CRON_JOBS'] != "0") { ?>
-          <div class="l-stat__col <?php if($TAB == 'CRON') echo 'l-stat__col--active' ?>">
-            <a href="/list/cron/" title="<?=_('Jobs');?>: <?=$panel[$user]['U_WEB_DOMAINS']?>&#13;<?=_('Limit')?>: <?=$panel[$user]['CRON_JOBS']=='unlimited' ? "∞" : $panel[$user]['CRON_JOBS']?>&#13;<?=_('Suspended');?>: <?=$panel[$user]['SUSPENDED_CRON']?>">
-              <div class="l-stat__col-title"><?=_('CRON');?>&nbsp;&nbsp;<i class="fas fa-clock"></i></div>
-              <ul>
-                <li><?=_('jobs');?>: <span><?=$panel[$user]['U_CRON_JOBS']?> / <?=$panel[$user]['CRON_JOBS']=='unlimited' ? "<b>∞</b>" : $panel[$user]['CRON_JOBS']?> (<?=$panel[$user]['SUSPENDED_CRON']?>)</span></li>
-              </ul>
-            </a>
-          </div>
+        <!-- Databases tab -->
+        <?php if ((isset($_SESSION['DB_SYSTEM'])) && (!empty($_SESSION['DB_SYSTEM']))) {?>
+          <?php if($panel[$user]['DATABASES'] != "0") { ?>
+            <li class="main-menu-item">
+              <a class="main-menu-item-link <?php if($TAB == 'DB') echo 'active' ?>" href="/list/db/" title="<?=_('Databases');?>: <?=$panel[$user]['U_DATABASES']?>&#13;<?=_('Limit')?>: <?=$panel[$user]['DATABASES']=='unlimited' ? "∞" : $panel[$user]['DATABASES']?>&#13;<?=_('Suspended');?>: <?=$panel[$user]['SUSPENDED_DB']?>">
+                <p class="main-menu-item-label"><?=_('DB');?><i class="fas fa-database u-ml10"></i></p>
+                <ul class="main-menu-stats">
+                  <li>
+                    <?=_('databases');?>: <span><?=$panel[$user]['U_DATABASES']?> / <?=$panel[$user]['DATABASES']=='unlimited' ? "<b>∞</b>" : $panel[$user]['DATABASES']?> (<?=$panel[$user]['SUSPENDED_DB']?>)</span>
+                  </li>
+                </ul>
+              </a>
+            </li>
+          <?php } ?>
         <?php } ?>
-      <?php } ?>
 
-      <!-- Backups tab -->
-      <?php if ((isset($_SESSION['BACKUP_SYSTEM'])) && (!empty($_SESSION['BACKUP_SYSTEM']))) {?>
-        <?php if($panel[$user]['BACKUPS'] != "0") { ?>
-          <div class="l-stat__col <?php if($TAB == 'BACKUP') echo 'l-stat__col--active' ?>">
-            <a href="/list/backup/" title="<?=_('Backups');?>: <?=$panel[$user]['U_BACKUPS']?>&#13;<?=_('Limit')?>: <?=$panel[$user]['BACKUPS']=='unlimited' ? "∞" : $panel[$user]['BACKUPS']?>">
-              <div class="l-stat__col-title"><?=_('BACKUP');?>&nbsp;&nbsp;<i class="fas fa-file-zipper"></i></div>
-              <ul>
-                <li><?=_('backups');?>: <span><?=$panel[$user]['U_BACKUPS']?> / <?=$panel[$user]['BACKUPS']=='unlimited' ? "<b>∞</b>" : $panel[$user]['BACKUPS']?></span></li>
-              </ul>
-            </a>
-          </div>
+        <!-- Cron tab -->
+        <?php if ((isset($_SESSION['CRON_SYSTEM'])) && (!empty($_SESSION['CRON_SYSTEM']))) {?>
+          <?php if($panel[$user]['CRON_JOBS'] != "0") { ?>
+            <li class="main-menu-item">
+              <a class="main-menu-item-link <?php if($TAB == 'CRON') echo 'active' ?>" href="/list/cron/" title="<?=_('Jobs');?>: <?=$panel[$user]['U_WEB_DOMAINS']?>&#13;<?=_('Limit')?>: <?=$panel[$user]['CRON_JOBS']=='unlimited' ? "∞" : $panel[$user]['CRON_JOBS']?>&#13;<?=_('Suspended');?>: <?=$panel[$user]['SUSPENDED_CRON']?>">
+                <p class="main-menu-item-label"><?=_('CRON');?><i class="fas fa-clock u-ml10"></i></p>
+                <ul class="main-menu-stats">
+                  <li>
+                    <?=_('jobs');?>: <span><?=$panel[$user]['U_CRON_JOBS']?> / <?=$panel[$user]['CRON_JOBS']=='unlimited' ? "<b>∞</b>" : $panel[$user]['CRON_JOBS']?> (<?=$panel[$user]['SUSPENDED_CRON']?>)</span>
+                  </li>
+                </ul>
+              </a>
+            </li>
+          <?php } ?>
         <?php } ?>
-      <?php } ?>
-    </div>
+
+        <!-- Backups tab -->
+        <?php if ((isset($_SESSION['BACKUP_SYSTEM'])) && (!empty($_SESSION['BACKUP_SYSTEM']))) {?>
+          <?php if($panel[$user]['BACKUPS'] != "0") { ?>
+            <li class="main-menu-item">
+              <a class="main-menu-item-link <?php if($TAB == 'BACKUP') echo 'active' ?>" href="/list/backup/" title="<?=_('Backups');?>: <?=$panel[$user]['U_BACKUPS']?>&#13;<?=_('Limit')?>: <?=$panel[$user]['BACKUPS']=='unlimited' ? "∞" : $panel[$user]['BACKUPS']?>">
+                <p class="main-menu-item-label"><?=_('BACKUP');?><i class="fas fa-file-zipper u-ml10"></i></p>
+                <ul class="main-menu-stats">
+                  <li>
+                    <?=_('backups');?>: <span><?=$panel[$user]['U_BACKUPS']?> / <?=$panel[$user]['BACKUPS']=='unlimited' ? "<b>∞</b>" : $panel[$user]['BACKUPS']?></span>
+                  </li>
+                </ul>
+              </a>
+            </li>
+          <?php } ?>
+        <?php } ?>
+
+      </ul>
+    </nav>
+
   </div>