chore: removed angular animations and others improved

package.json

@@ -23,7 +23,6 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "21.0.5",
     "@angular/common": "21.0.5",
     "@angular/compiler": "21.0.5",
     "@angular/core": "21.0.5",

src/app/homepage/menu/menu-item/menu-item.component.html

@@ -1,90 +1,72 @@
 @if (children) {
-  <div
-    class="nav-item"
-    [class.opened]="isOpen"
-    >
-    <div class="heading" (click)="toggle()">
-      <h3>@if (isNew) {
-        <span class="new">NEW</span>
-      }{{ title }}</h3>
-      <svg
-        class="arrow-icon"
-        width="20"
-        height="20"
-        viewBox="0 0 1792 1792"
-        xmlns="http://www.w3.org/2000/svg"
-        >
-        <path
-          d="M1171 960q0 13-10 23l-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23z"
-          />
-      </svg>
-    </div>
-    <ul [@openCloseAnimation]="isOpen" class="sub-nav">
+<div class="nav-item" [class.opened]="isOpen">
+  <div class="heading" (click)="toggle()">
+    <h3>@if (isNew) {
+      <span class="new">NEW</span>
+      }{{ title }}
+    </h3>
+    <svg class="arrow-icon" width="20" height="20" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M1171 960q0 13-10 23l-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23z" />
+    </svg>
+  </div>
+  <div class="sub-nav-wrapper" [class.opened]="isOpen">
+    <ul class="sub-nav">
       @for (item of children; track item) {
-        <li>
-          @if (!item.externalUrl) {
-            <a
-              [class.pending]="item.isPending"
-              [routerLink]="item.path"
-              routerLinkActive="active"
-              [routerLinkActiveOptions]="{ exact: true }"
-              >@if (item.icon) {
-              <i class="material-icons">
-                {{ item.icon }}
-              </i>
-            }
-            {{ item.title }}
-          </a>
+      <li>
+        @if (!item.externalUrl) {
+        <a [class.pending]="item.isPending" [routerLink]="item.path" routerLinkActive="active"
+          [routerLinkActiveOptions]="{ exact: true }">@if (item.icon) {
+          <i class="material-icons">
+            {{ item.icon }}
+          </i>
+          }
+          {{ item.title }}
+        </a>
         }
         @if (!!item.externalUrl) {
-          <a
-            href="{{ item.externalUrl }}"
-            target="_blank"
-            >@if (item.icon) {
-            <i class="material-icons">
-              {{ item.icon }}
-            </i>
+        <a href="{{ item.externalUrl }}" target="_blank">@if (item.icon) {
+          <i class="material-icons">
+            {{ item.icon }}
+          </i>
           }
           {{ item.title }}
         </a>
+        }
+      </li>
       }
-    </li>
-  }
-</ul>
+    </ul>
+  </div>
 </div>
 } @else {
-  <div class="heading">
-    @if (!externalUrl) {
-      <a
-        [routerLink]="path"
-        routerLinkActive="active"
-        [routerLinkActiveOptions]="{ exact: true }"
-        [class.has-icon]="icon"
-        ><h3>
-        @if (icon) {
-          <i class="material-icons">
-            {{ icon }}
-          </i>
-        }
-        @if (isNew) {
-          <span class="new">NEW</span>
-          }{{ title }}
-        </h3></a
-        >
+<div class="heading">
+  @if (!externalUrl) {
+  <a [routerLink]="path" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" [class.has-icon]="icon">
+    <h3>
+      @if (icon) {
+      <i class="material-icons">
+        {{ icon }}
+      </i>
       }
-      @if (!!externalUrl) {
-        <a href="{{ externalUrl }}" target="_blank"
-          ><h3>
-          @if (icon) {
-            <i class="material-icons">
-              {{ icon }}
-            </i>
-          }
-          @if (isNew) {
-            <span class="new">NEW</span>
-            }{{ title }}
-          </h3>
-        </a>
+      @if (isNew) {
+      <span class="new">NEW</span>
+      }{{ title }}
+    </h3>
+  </a>
+  }
+  @if (!!externalUrl) {
+  <a href="{{ externalUrl }}" target="_blank">
+    <h3>
+      @if (icon) {
+      <i class="material-icons">
+        {{ icon }}
+      </i>
       }
-    </div>
+      @if (isNew) {
+      <span class="new">NEW</span>
+      }{{ title }}
+    </h3>
+  </a>
   }
+</div>
+}

src/app/homepage/menu/menu-item/menu-item.component.scss

@@ -12,7 +12,7 @@ h3 {
   font-weight: bold;
   color: var(--color-1dp);
   font-size: 15px;
-  margin: 10px 0;
+  margin: 4px 0;
   &:hover {
     color: variables.$red-color;
     @include utils.text-gradient();
@@ -87,12 +87,14 @@ li {
 
   .arrow-icon {
     fill: var(--color);
+    position: absolute;
+    top: 4px;
   }
   &.opened {
     .arrow-icon {
       @include utils.transform(rotate(-90deg));
       fill: var(--primary);
-
+      margin: 1px;
     }
   }
 }
@@ -121,3 +123,23 @@ ul {
   color: variables.$red-color;
   @include utils.text-gradient();
 }
+
+.sub-nav-wrapper {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 250ms ease-out, visibility 250ms;
+  overflow: hidden;
+  visibility: hidden;
+
+  &.opened {
+    grid-template-rows: 1fr;
+    visibility: visible;
+  }
+
+  .sub-nav {
+    min-height: 0;
+    margin: 0;
+    padding: 1px 14px;
+    list-style: none;
+  }
+}

src/app/homepage/menu/menu-item/menu-item.component.ts

@@ -1,13 +1,11 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { openCloseAnimation } from '../../../common';
 import { RouterLinkActive, RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-menu-item',
   templateUrl: './menu-item.component.html',
   styleUrls: ['./menu-item.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  animations: [openCloseAnimation],
   standalone: true,
   imports: [
     RouterLinkActive,
@@ -16,7 +14,7 @@ import { RouterLinkActive, RouterLink } from '@angular/router';
 })
 export class MenuItemComponent {
   @Input() isOpen = false;
-  @Input() children = [];
+  @Input() children: string[] = [];
   @Input() path: string;
   @Input() title: string;
   @Input() icon: string;

src/app/homepage/menu/menu.component.scss

@@ -5,7 +5,7 @@
   @extend .transition;
   @extend .box-sizing;
   @include utils.transform(translateX(-100%));
-  
+
   padding: 90px 17px 40px 24px;
   width: 250px;
   background: var(--menu-background);
@@ -18,18 +18,22 @@
   &.opened {
     @include utils.transform(translateX(0));
   }
-  @include  utils.media(large) {
+
+  @include utils.media(large) {
     width: 250px;
   }
+
   @include utils.media(normal) {
     &.opened {
       z-index: 1000;
       box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
     }
   }
+
   @include utils.media(medium) {
     padding: 85px 25px 20px 25px;
   }
+
   @include utils.media(small) {
     width: 100%;
   }
@@ -41,8 +45,8 @@
 
 .nav-item {
   margin: 0 -10px;
-  padding: 0 10px;
-  // border-bottom: 1px solid #efefef;
+  padding: 1px 10px;
+
   &:last-of-type {
     border: 0;
   }

src/main.ts

@@ -2,7 +2,6 @@ import { enableProdMode, importProvidersFrom, provideZoneChangeDetection } from
 import { environment } from './environments/environment';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
-import { provideAnimations } from '@angular/platform-browser/animations';
 import { AppComponent } from './app/app.component';
 import { RoutingModule } from './app/app.routes';
 
@@ -12,9 +11,8 @@ if (environment.production) {
 
 bootstrapApplication(AppComponent, {
   providers: [
-    provideZoneChangeDetection(),
+    provideZoneChangeDetection({ eventCoalescing: true }),
     importProvidersFrom(BrowserModule, RoutingModule),
     provideHttpClient(withInterceptorsFromDi()),
-    provideAnimations(),
   ],
 });