fix genre icon

public/build/manifest.json

@@ -36,7 +36,7 @@
     "isEntry": true
   },
   "resources/scss/app.scss": {
-    "file": "assets/app-C_0m-xEp.css",
+    "file": "assets/app-Ohoi9Gxh.css",
     "src": "resources/scss/app.scss",
     "isEntry": true
   },

resources/scss/components/_header.scss

@@ -171,35 +171,15 @@
     }
 }
 
-.header .main-menu li.menu_has_children > a::before {
-    position: absolute;
-    content: "\f0d7";
-    font-family: "Line Awesome Free";
-    font-weight: 900;
-    top: 0;
-    right: 0;
-    color: #ffffff;
-    -webkit-transition: all 0.3s;
-    -o-transition: all 0.3s;
-    transition: all 0.3s;
-    display: none;
-}
 
 @media (max-width: 1199px) {
-    .header .main-menu li.menu_has_children {
+    .header .main-menu li.menu_has_children a > .si {
-        // background-color: lighten($primary, 10);
+        -webkit-transition: all 0.3s;
-        > a {
+        -o-transition: all 0.3s;
-            &::before {
+        transition: all 0.3s;
-                display: block;
-                top: 9px;
-            }
-
-        }
-        > span > i {
-           display: none;
-       }
     }
 
+
     .header .navbar-toggler {
         &:not(.collapsed) {
             color: $primary;
@@ -212,11 +192,12 @@
 .header .main-menu li.menu_has_children.open > a {
     color: $primary;
 
-    &::before {
+    .si {
         -webkit-transform: rotate(180deg);
         -ms-transform: rotate(180deg);
         transform: rotate(180deg);
         color: $primary;
+        transition: all 0.3s;
     }
 
 }

resources/views/components/nav.blade.php

@@ -19,12 +19,12 @@
                         <li><a href="{{route('movies')}}">Movies</a></li>
                         <li><a href="{{route('shows')}}">Series</a></li>
                         <li class="menu_has_children">
-                            <a href="javascript:void(0);">Genres</a>
+                            <a href="javascript:void(0);" class="d-flex flex-row justify-content-between align-items-baseline gap-1">Genres
-                            <span><i>
                                 <svg class="si">
                                     <use href="#si-caret-down"></use>
                                 </svg>
-                            </i></span>
+                            </a>
+
                             <ul class="sub-menu">
                                 @foreach(Helpers::getMovieGenreList() as $genre)
                                 <li><a href="{{route('movies.genre', ['genre' => $genre->slug])}}">{{$genre->name}}</a></li>