improved ui homayon & autoplay theme part

resources/views/segments/clips/AutoPlayClips/AutoPlayClips.blade.php

@@ -7,6 +7,7 @@
         @foreach(\App\Models\Clip::where('status',1)->get() as $clip)
             <div class="autoplay-clip-item">
                 <a href="{{$clip->webUrl()}}">
+                    <i class="ri-play-circle-line"></i>
                     <video preload="none" src="{{$clip->fileUrl()}}" poster="{{$clip->imgUrl()}}" muted ></video>
                 </a>
 {{--                <img src="{{$clip->imgUrl()}}" alt="">--}}

resources/views/segments/clips/AutoPlayClips/AutoPlayClips.js

@@ -3,6 +3,7 @@ document.addEventListener('DOMContentLoaded', function () {
         el.addEventListener('mouseenter', function () {
             try {
                 this.querySelector('video').play();
+                this.querySelector('i').style.display = 'none';
             } catch {
             }
 
@@ -10,6 +11,7 @@ document.addEventListener('DOMContentLoaded', function () {
         el.addEventListener('mouseleave', function () {
             try {
                 this.querySelector('video').pause();
+                this.querySelector('i').style.display = 'block';
             } catch {
             }
         });

resources/views/segments/clips/AutoPlayClips/AutoPlayClips.scss

@@ -10,6 +10,18 @@
         display: flex;
         column-gap: .5rem;
     }
+    a{
+        display: block;
+        position: relative;
+        i{
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%,-50%);
+            font-size: 75px;
+            color: white;
+        }
+    }
 
     .autoplay-clip-item {
         transition: 700ms;
@@ -25,3 +37,12 @@
         }
     }
 }
+
+
+/*-768px width*/
+@media (max-width: 768px) {
+    .autoplay-clip-list {
+        display: grid !important;
+        grid-template-columns: repeat(2,1fr) !important;
+    }
+}

resources/views/segments/menu/HomayonMenu/HomayonMenu.blade.php

@@ -85,6 +85,28 @@
                             <a href="{{$item->webUrl()}}">
                                 {{$item->title}}
                             </a>
+                            @if($item->meta == null)
+
+                                @switch($item->menuable_type)
+                                    @case(\App\Models\Group::class)
+                                    @case(\App\Models\Category::class)
+                                        @if($item->dest->children()->count() > 0)
+                                            <ul class="sub-menu-item">
+                                                @foreach($item->dest->children as $itm)
+                                                    <li>
+                                                        <a href="{{$itm->webUrl()}}">
+                                                            {{$itm->name}}
+                                                        </a>
+                                                    </li>
+                                                @endforeach
+                                            </ul>
+                                            @break
+                                        @endif
+                                    @default
+
+                                @endswitch
+                            @endif
+
                         </li>
                     @endforeach
                 </ul>

resources/views/segments/menu/HomayonMenu/HomayonMenu.scss

@@ -93,19 +93,72 @@
             justify-content: space-between;
             list-style: none;
             text-align: center;
-            overflow: hidden;
+            height: 48px;
+            //overflow: hidden;
             background: var(--homayon-bg-menu);
             border-bottom-right-radius: 35px;
             border-bottom-left-radius: 35px;
 
+
             li {
                 transition: 500ms;
                 flex: 1;
+                position: relative;
 
                 a {
                     padding: .75rem;
                     display: block;
                 }
+
+
+            }
+
+            .sub-menu-item{
+                opacity: 0;
+                pointer-events: none;
+                max-height: 0;
+                width: 0;
+                transition: 600ms;
+                height: auto;
+            }
+            li:hover {
+
+                .sub-menu-item {
+                    max-height: 50vh;
+                    opacity: .9;
+                    pointer-events: all;
+                    position: absolute;
+                    top: 100%;
+                    display: block;
+                    inset-inline-start: 0;
+                    width: 200px;
+                    text-align: start;
+                    padding: 0;
+                    box-shadow: var(--xshop-shadow);
+
+                    li {
+                        a {
+                            padding: 10px;
+
+                            &:hover {
+                                background: #ffffff33;
+                            }
+
+                            &:after {
+                                display: none;
+                            }
+                        }
+
+                        &:last-child {
+                            a {
+
+                                border-bottom-right-radius: 35px;
+                                border-bottom-left-radius: 35px;
+                            }
+                        }
+                    }
+
+                }
             }
 
             .homayon-divider {
@@ -195,6 +248,7 @@
         @media (max-width: 875px) {
             .homayon-logo {
                 background: none !important;
+
                 img {
                     width: 40px;
                     margin-top: 5px;
@@ -202,6 +256,7 @@
             }
         }
     }
+
     .homayon-resp-menu {
         display: none;
         position: fixed;
@@ -212,9 +267,11 @@
         bottom: 0;
         z-index: 77;
         inset-inline-end: 0;
+
         ul {
             padding-top: .5rem;
             list-style: none;
+
             a {
                 display: block;
                 padding: .5rem;