Header Style Overlay Topbar

    
<template>
  <header class="site-header mo-left header dark">
    <!-- Top Bar -->
    <div class="top-bar bg-dark">
      <div class="container">
        <div class="row d-flex justify-content-between align-items-center">
          <!-- Top Bar Left -->
          <div class="dlab-topbar-left">
            <ul>
              <li v-for="(link, index) in headerLinks" :key="index">
                <nuxt-link :to="link.href">{{ link.label }}</nuxt-link>
              </li>
            </ul>
          </div>
          <!-- Top Bar Right -->
          <div class="dlab-topbar-right">
            <nuxt-link to="/contact-1" class="site-button radius-no btnhover13">
              GET A QUOTE
            </nuxt-link>
          </div>
        </div>
      </div>
    </div>

    <!-- Main Header -->
    <div class="sticky-header main-bar-wraper navbar-expand-lg bg-dark">
      <div class="main-bar clearfix">
        <div class="container clearfix">
          <!-- Website Logo -->
          <div class="logo-header mostion logo-white">
            <nuxt-link to="/">
              <img alt="" width="258" height="75" src="/images/logo.png" />
            </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>
          <!-- 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="" width="258" height="75" src="/images/logo.png" />
              </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',
                      'circle-sm',
                      'outline',
                      elm.className,
                    ]"
                    :href="elm.href"
                  />
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>

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

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