אפקט תפריט צד נפתח באלמנטור + תפריט אפליקציה במובייל

<style>
/*תפריט צד דססקטופ*/
@media(min-width:1025px){

.side-menu, .side-menu-wrapper{
width:4.2vw; /*רוחב תפריט סגור*/
transition: all 0.5s !important; /*משך האנימציה של פתיחת התפריט*/
overflow: hidden;
}

.side-menu .elementor-icon-list-item:nth-child(7){
    display: none !important; /*הסתרת פריט 6 (תפריט מלא) מתפריט דסקטופ*/
}

.side-menu .elementor-icon-list-items, .side-menu-login .elementor-icon-list-items{
    display: flex;
    flex-direction: column; /*כיוון רשימת אייקונים טור*/
}

.side-menu .elementor-icon-list-text, .side-menu-login .elementor-icon-list-text{
    opacity: 0; /*הסתרת שם העמוד כשהתפריט סגור*/
    text-wrap:nowrap; /*ביטול ירידת שורה בטקסט ארוך*/
    transition: all 0.3s;
}

.side-menu .elementor-icon-list-item{
     padding:1vw!important; /*שוליים פנימיים פריט רשימה*/
    border-radius: 50px; /*עיגול פינות פריט רשימה*/
    transition: all 0.3s;
}

.side-menu-wrapper:hover, .side-menu{
    min-width:15vw !important; /*רוחב תפריט פתוח*/
    width:15vw; /*רוחב תפריט פתוח*/
}

.side-menu-wrapper:hover .elementor-icon-list-text, .side-menu-wrapper:hover .elementor-icon-list-text{
    opacity: 1; /*הצגת שם העמוד במעבר עכבר*/
}

.side-menu .elementor-icon-list-item:hover{
 background: #ffffff; /*צבע רקע פריט רשימה במעבר עכבר*/
}
}

/*הגדרות פריט פעיל לכל גדלי המסך*/
.side-menu .elementor-icon-list-item.active {
  background-color: #17A1F8; /*צבע רקע פריט פעיל*/
  transition: all 0.3s ease;
}

.side-menu .elementor-icon-list-item.active a, .side-menu .elementor-icon-list-item.active,  .side-menu .elementor-icon-list-item.active i {
  color: white !important; /*צבע טקסט פריט פעיל*/
  transition: all 0.3s ease;
}


/*תפריט תחתון טאבלט*/
@media(max-width:1025px){
 
.side-menu .elementor-icon-list-item:nth-child(4), .side-menu .elementor-icon-list-item:nth-child(5){
    display: none !important; /*הסתרת פריט 4 ו5 ברשימה כדי שהכל ייכנס*/
}

.side-menu, .side-menu-wrapper{
max-width:95vw !important; /*רוחב רשימת פריטים*/
transition: all 0.2s;
height:10vw; /*גובה תפריט*/
}

.side-menu .elementor-icon-list-items, .side-menu-login .elementor-icon-list-items{
    display:flex;
    flex-direction: row !important; /*כיוון רשימה לשורה*/
    flex-wrap:nowrap; /*ביטול ירידת שורה שהכל ייכנס בשורה אחת*/
  justify-content: space-around; /*ריווח אוטומטי לכל אורך הקונטיינר*/
 align-items: flex-end !important; /*יישור כל הפריטים למטה*/
}

.side-menu .elementor-icon-list-text{
    opacity: 1; 
    text-wrap:nowrap; /*ביטול ירידת שורה על שם העמוד*/
    text-align:center; /*יישור שם העמוד למרכז*/
    transition: all 0.3s;
}

.side-menu .elementor-icon-list-item, .side-menu .elementor-icon-list-item a, .side-menu-login .elementor-icon-list-item{
padding: 1vw; /*שוליים פנימיים פריט רשימה*/
display:flex !important;
flex-direction:column !important; /*כיוון פריט טור, אייקון מעל טקסט*/
        justify-content: flex-end;
align-content:center;
gap:1vw; /*ריווח בין טקסט לאייקון*/
 align-items: center;
}

.side-menu .elementor-icon-list-item{
    height:10vw; /*גובה פריט רשימה בודד*/
    width:19vw; /*רוחב פריט רשימה בודד*/
    border-radius: 5px; /*עיגול פינות פריט רשימה בודד*/
    transition: all 0.3s;
}
}



/*הגדרות מובייל*/
@media(max-width:767px){
 
.side-menu, .side-menu-wrapper{
width:100% !important; /*רוחב תפריט*/
height:80px; /*גובה תפריט*/
}

.side-menu .elementor-icon-list-text{
    text-wrap:wrap; /*מאפשר ירידת שורה בכותרת שם העמוד*/
}

.side-menu .elementor-icon-list-item, .side-menu .elementor-icon-list-item a {
padding: 5px 2px 5px 5px; /*שוליים פנימיים פריט רשימה בודד*/
gap:5px; /*ריווח בין כותרת לאייקון*/
}

.side-menu .elementor-icon-list-item{
    height:70px; /*גובה פריט רשימה בודד*/
    width:70px; /*רוחב פריט רשימה בודד*/
     border-radius: 20px; /*עיגול פינות פריט רשימה בודד*/
}
}    
    
</style>



<script>
document.addEventListener("DOMContentLoaded", () => {
  const currentUrl = window.location.href;
  const menu = document.querySelector(".side-menu");

  if (menu) {
    const items = menu.querySelectorAll(".elementor-icon-list-item");

    items.forEach((item) => {
      const link = item.querySelector("a");

      if (link && link.href === currentUrl) {
        item.classList.add("active");
      }
    });
  }
});

</script>