Header Style Overlay

    
<template>
  <header class="site-header mo-left header-transparent header">
    <!-- Main Header -->
    <div class="sticky-header main-bar-wraper navbar-expand-lg">
      <div class="main-bar clearfix">
        <div class="container clearfix">
          <!-- Website Logo -->
          <div class="logo-header mostion logo-white">
            <nuxt-link to="/">
              <img
                alt=""
                src="/images/logo-white-2.png"
                width="258"
                height="75"
              />
            </nuxt-link>
          </div>
          <!-- Nav Toggle Button -->
          <button
            class="navbar-toggler collapsed navicon justify-content-end"
            type="button"
            @click="toggleMobileMenu"
            data-bs-toggle="collapse"
            data-bs-target="#navbarNavDropdown"
            aria-controls="navbarNavDropdown"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span />
            <span />
            <span />
          </button>
          <!-- Extra Nav -->
          <div class="extra-nav">
            <div class="extra-cell">
              <button
                id="quik-search-btn"
                type="button"
                class="site-button-link"
              >
                <i class="la la-search" />
              </button>
            </div>
          </div>
          <!-- Quick Search -->

          <!-- Main Nav -->
          <div
            class="header-nav navbar-collapse collapse justify-content-end"
            id="navbarNavDropdown"
          >
            <div class="logo-header d-md-block d-lg-none">
              <nuxt-link to="/">
                <img alt="" src="/images/logo-2.png" width="258" height="75" />
              </nuxt-link>
            </div>
            <ul class="nav navbar-nav">
              <Nav />
            </ul>
            <div class="dlab-social-icon">
              <ul>
                <li v-for="(elm, i) in socialLinks" :key="i">
                  <a
                    :class="['site-button', 'sharp-sm', elm.className]"
                    :href="elm.href"
                  />
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Main Header END -->
  </header>
</template>

<script setup>
import Nav from "./component/Nav.vue";
import { socialLinks } from "@/data/socials";
import { toggleMobileMenu } from "~/utlis/toggleMobileMenu";
</script>

<style scoped>
/* Add your styles here */
</style>