Header Style Topbar Primary

    
<template>
  <header class="site-header mo-left header ext-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 btnhover11">
              GET A QUOTE
            </nuxt-link>
          </div>
        </div>
      </div>
    </div>

    <!-- Middle Bar -->
    <div class="middle-bar bg-white">
      <div class="container">
        <!-- Middle Area -->
        <div class="middle-area">
          <!-- Website Logo -->
          <div class="logo-header logo-dark">
            <nuxt-link to="/">
              <img alt="" src="/images/logo-2.png" width="258" height="75" />
            </nuxt-link>
          </div>
          <!-- Service List -->
          <div class="service-list">
            <ul>
              <li>
                <i class="la la-phone" />
                <h4 class="title">
                  <a href="tel:+4733378901">(+00)888.666.88</a>
                </h4>
                <span>Free Call</span>
              </li>
              <li>
                <i class="la la-clock-o" />
                <h4 class="title">08:00 AM - 06:00 PM</h4>
                <span>Monday - Friday</span>
              </li>
              <li>
                <i class="la la-map" />
                <h4 class="title">183 Donato Parkways</h4>
                <span>CA, United State</span>
              </li>
            </ul>
          </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-dark">
            <nuxt-link to="/">
              <img alt="" src="/images/logo-2.png" width="258" height="75" />
            </nuxt-link>
          </div>
          <!-- Nav Toggle Button -->
          <button
            class="navbar-toggler collapsed navicon justify-content-end"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarNavDropdown"
            aria-controls="navbarNavDropdown"
            aria-expanded="false"
            @click="toggleMobileMenu"
            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-start"
            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',
                      '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>