change mobile navbar, add animation

Author: faAanya

src/components/common/BrandNav.vue

@@ -198,8 +198,22 @@ withDefaults(defineProps<{
   height: 10px;
   border-radius: 50%;
   background: var(--color-error-400);
-  box-shadow: 0 0 12px 0 var(--color-error-400),
-              0 0 4px 0 hsl(from var(--color-error-400) h s l / 0.5);
+  box-shadow:
+    0 0 12px 0 var(--color-error-400),
+    0 0 4px 0 hsl(from var(--color-error-400) h s l / 0.5);
+
+  animation: pulse-opacity 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse-opacity {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.3;
+  }
 }
 
 .brand-nav-logo {
@@ -223,12 +237,13 @@ withDefaults(defineProps<{
   position: absolute;
   top: 100%;
   left: 0;
-  margin-top: 14px;
+  margin-top: 13px;
   width: max-content;
   opacity: 0;
   visibility: hidden;
   border-radius: 1rem;
   padding: 1.25rem;
+   z-index: 100;
   background: var(--color-surface-primary);
   -webkit-backdrop-filter: blur(24px);
   backdrop-filter: blur(24px);

src/components/header/mobile-menu.vue

@@ -75,7 +75,7 @@ const handleCloseMenu = () => {
 
 <template>
   <div>
-    <div :class="`fixed z-50 top-0 w-full bg-surface-primary-transparent backdrop-blur-3xl ${isMenuOpen ? 'rounded-b-3xl' : 'rounded-none'}`">
+    <div :class="`fixed z-50 top-0 w-full bg-surface-primary-transparent backdrop-blur-3xl border-b border-surface-quaternary`">
       <div :class="`h-full px-5 ${isMenuOpen ? 'pb-5' : 'pb-0'} flex flex-col gap-2 transition-all`">
         <div class="flex justify-between items-center py-1.5">
           <a :href="homeHref" class="px-1.5 hover:opacity-80 transition-opacity">
@@ -85,12 +85,12 @@ const handleCloseMenu = () => {
             <span></span>
           </button>
         </div>
-        <nav v-if="isMenuOpen" class="h-full text-sm">
+        <nav v-if="isMenuOpen" class="h-full text-sm overflow-y-auto">
           <div v-if="isServicesOpen">
             <h2 class="text-center font-bold text-body-primary py-2.5">
               {{ servicesItem?.submenuTitle }}
             </h2>
-            <ServicesList :items="servicesItem?.submenu ?? []" />
+            <slot name="services" />
             <button class="pt-4" @click="isServicesOpen = false">
               <component class="w-11 h-11 text-action" :is="BackIcon" />
             </button>