Skip to main content

Оформление бокового меню ГК

image.png
https://drive.google.com/file/d/103-7ZhGmtWc30PV3GXmUa9VeskELc1At/view?usp=sharing 

Скрипт в настройках аккаунта
image.png

<!-- Боковое меню -->
<link rel="stylesheet" href="https://fitnessmama.school/pl/cms/layout/css?id=29680&hash=9cc3105d9df0b69b9fa7b4db22f48c30&bundle=1" />
<script src="https://fitnessmama.school/pl/cms/layout/js?id=29680&hash=9cc3105d9df0b69b9fa7b4db22f48c30&bundle=1"></script>

CSS



/*Убираем бэкграунд иконки-пропадает ховер выделение */
.gc-account-leftbar .gc-account-user-menu li a {
   background-color: transparent!important;
}

/* Убираем разрыв */
.gc-account-leftbar .gc-account-user-menu li {
  border-bottom: none;
}

/* Прячем старую иконку чатиума полностью*/
li.menu-item-chatium {
  display:none;
}
/* Отступы между иконкой и выделением*/
.gc-account-leftbar .gc-account-user-menu li a.with-label {
    padding: 3px 0px 0px 0px!important;
    margin-top:10px;
}

/* Делает прозрачными места иконок + шрифт */
.gc-account-leftbar .gc-account-user-menu li a {
  background:none!important;
  font-family: 'Urbanist', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 11px; 

}

/* Подпись для новой*/
.gc-account-user-menu li.menu-item.new-chatium-icon a:after{
  content: "Chatium";
  color: #000;
  bottom: 2px!important;
  font-weight: 600;
}


/*Задаем выделение ярлыка*/
.custom-menu .gc-account-leftbar .gc-account-user-menu li.active a, .custom-menu .gc-account-leftbar .gc-account-user-menu li.selected a {
    background-color: #FFF!important;
}

li.menu-item.menu-item-profile a, li.menu-item.menu-item-notifications_button_small a, li.menu-item.menu-item-cms a, li.menu-item.menu-item-teach a, li.menu-item.menu-item-user a, li.menu-item.menu-item-tasks a, li.menu-item.menu-item-notifications a, li.menu-item.menu-item-sales a, li.menu-item.menu-item-chatium a {
    display: block;
    background: transparent;
    margin: 3px auto 0px;
    width: 62px !important;
  	height: 62px !important;
    border-radius: 8px;
    transition: all 1.0s;
}
/* пододвигаем колокольчик */
li.menu-item.menu-item-notifications_button_small a {
    height: 35px !important;
    border-radius: 5px;
}
/*Скругление профиля*/
.menu-item-profile .menu-item-icon {
    border-radius: 26px;
    width: 52px;
    border: 2px solid #EB1a41;
    margin-top:5px;
}

/*Позицианируем номерки*/
.gc-account-leftbar li:not(.menu-item-profile):not(.menu-item-notifications_button_small) .notify-count { 
  bottom: unset;

  top: 0%;
}

/* Шайк меню */
.gc-account-user-menu .menu-item a:hover img

{


  
	-webkit-animation: shake-top 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	        animation: shake-top 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

 .gc-account-user-menu .menu-item a:hover:after, 
.menu-item-prolongation a:hover img,
.menu-item.new-chatium-icon a:hover img
{

	-webkit-animation: shake-top 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	        animation: shake-top 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
} 
  
.notify-count {
  z-index:1;
}

@-webkit-keyframes shake-top {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
  }
  10% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  80% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
  90% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
}
@keyframes shake-top {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
  }
  10% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  80% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
  90% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
}
 

/*_____________Настройка суб меню___________________*/
/*Настройка суб меню______________*/
<!--  Настройка суб меню -->
.gc-account-leftbar .gc-account-user-submenu-bar {
    width: 320px;
}

.gc-account-user-submenu-bar .gc-account-user-submenu li a {
   padding-top: 9px;
   padding-bottom: 9px;
   text-transform: lowercase;
   font-family: 'Urbanist', sans-serif;
   font-weight: 500!important;
   font-style: normal;
   font-size: 22px;
   line-height: 108.5%;
   padding-left: 20px;
}

/*Суб меню с заглавной*/
.gc-account-user-submenu-bar .gc-account-user-submenu li a::first-letter {
  text-transform: uppercase;
}

.custom-menu .gc-account-user-submenu-bar .gc-account-user-submenu a:first-letter {
   text-transform: uppercase;
}

.custom-menu .gc-account-user-submenu-bar .gc-account-user-submenu a:hover {
   color: #555555;
}

/*Заголовок субменю_*/
.gc-account-user-submenu-bar h3 {
   font-family: 'Urbanist', sans-serif;
   font-weight: 700!important;
  color: #004456;
   font-size: 30px;
   line-height: 40px;

}
.gc-account-leftbar .gc-account-user-submenu-bar {
   display: flex;
   flex-direction: column;
  background: #FFF;
}
.gc-account-leftbar .gc-account-user-submenu-bar:after {
   content: "";
   display: block;
   height: 60px;
   background: url("https://fs.gcfiles.net/fileservice/file/download/a/87136/sc/323/h/2a01bc7dda6cdfa74cb5e627822c51f2.png") center / contain no-repeat;
   margin-top: auto;
   margin-bottom: 20px;
}

/* Анимация выбора меню */
.gc-account-user-submenu-bar .gc-account-user-submenu li {
    position: realtive;
}
.gc-account-user-submenu-bar .gc-account-user-submenu li a {
    position: relative !important;
    z-index: 9999;
    transition: all 1.3s;
}
.gc-account-user-submenu-bar .gc-account-user-submenu li::after {
    content: "";
    width: 0%;
    height: 100%;
    position: absolute;
    background:  silver;
    top:0;
    left:0;
    transition: all .5s;
    z-index: 0;
}
.gc-account-user-submenu-bar .gc-account-user-submenu li a:hover {
    background: transparent;
    color:#005B63;
    z-index: 1;
    text-decoration: none;
}

.gc-account-user-submenu-bar .gc-account-user-submenu li:hover::after {
    width: 100%;
}

@media (max-width: 768px) {
	.gc-account-leftbar .gc-account-user-menu {
		margin-bottom: 45px;
		background: #5E2E92;
		width: 70px;
		height: 100%;
	}
	.gc-main-content.with-left-menu {
		margin-left: 0;
	}
}

@media (max-width: 576px) {
	.gc-account-leftbar
		.gc-account-user-submenu-bar-notifications_button_small {
		width: calc(100vw - 70px);
		overflow: auto;
	}
}

@media (max-width: 768px) {
	.gc-account-leftbar .gc-account-user-menu li {
		border-bottom: none;
	}
}


.gc-account-user-menu  {

 font-family: 'Urbanist', sans-serif!important;

}

.popover {
	z-index: 8888;
}

JS

<!--  Подмена пункта меню Chatium -->
$(function() {
  setTimeout(function(){
    $(".menu-item-sales").after(
       '<li class="menu-item new-chatium-icon">'+
        '<a href="/chatium" title="Chatium">'+
          '<img class="menu-item-icon" src="https://fs.gcfiles.net/fileservice/file/download/a/87136/sc/31/h/80723613363bcb010a2e0e6a98a90c65.png">'+
        '</a>'+
      '</li>'
    ); 
  },0);
});
<!--  END Подмена ссылки на chatium -->

<!--  Установка активности пунктов на подмененных ссылках-->
$(document).ready(function(){
	setTimeout(function(){
		if (window.location.pathname.startsWith("/chatium")) {
			$('.gc-account-user-menu li').removeClass('active');
			$('.gc-account-user-menu li.new-chatium-icon').addClass('active');
		}
		
        if (window.location.pathname.startsWith("/profile")) {
			$('.gc-account-user-menu li').removeClass('active');
		}
	}, 10);
});

<!--  Подмена ссылок на профиль и смену пароля -->
$(document).ajaxSuccess(function(event, xhr, settings) {
  if ( settings.url == "/cms/counters/menu" ) {
    var target = $('.gc-account-user-submenu-bar')[0];
    var observer = new MutationObserver(function(mutations) {
      $(".gc-account-user-submenu-bar li.menu-item-profile a").attr("href", "/profile");
      $(".gc-account-user-submenu-bar li.menu-item-change_password a").attr("href", "/changePassword");
    }).observe(target, { attributes: false, childList: true, characterData: false, subtree: true });
  }
});
<!--  End Подмена ссылок на профиль и смену пароля -->

<!--  Подмена страницы личного кабинета -->
$(document).ajaxSuccess(function(event, xhr, settings) {
  if ( settings.url == "/teach/control/stream" ) {
    var target = $('.gc-account-user-submenu-bar')[0];
    var observer = new MutationObserver(function(mutations) {
      $(".gc-account-user-submenu-bar li.menu-item-teach a").attr("href", "/l_kabinet");

    }).observe(target, { attributes: false, childList: true, characterData: false, subtree: true });
  }
});
<!--  End Подмена страницы личного кабинета -->

<!-- Боковое меню фикс сохранение подменный профиль-->
$(()=>{setTimeout(()=>{
  $(".edit-profile-popup-btn").off().click((e)=>{
    e.stopPropagation();
    window.open('/profile', '_parent');
  });
})});
<!-- Боковое меню фикс сохранение подменный профиль-->

No Comments
Back to top