<header class="header navbar navbar-expand-lg navbar-light navbar-floating navbar-sticky" data-fixed-element>
<div class="container px-0 px-xl-3">
<button class="navbar-toggler ms-n2 me-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#primaryMenu">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand flex-shrink-0 order-lg-1 mx-auto ms-lg-0 pe-lg-2 me-lg-4" href="index.html">
<img class="d-none d-lg-block" src="/img/resonance-dark.png" alt="resonance" width="153" />
</a>
<div class="nav-item dropdown order-lg-4 mr-lg-auto my-auto">
<a href="#">
<i class="fas fa-search"></i>
</a>
</div>
<div class="nav-item dropdown order-lg-4 mr-lg-auto my-auto">
<a href="#">
<i class="fas fa-bells fa-beat"></i>
</a>
</div>
<div class="nav-item dropdown order-lg-4 ml-lg-auto my-auto">
<button class="btn btn-transparent text-primary p-1 rounded-circle dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-th"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li v-for="(product, x) in productLinks" :key="x">
<router-link class="dropdown-item" :to="product.link">
<img width="20" class="me-2" v-if="product.icon" :src="product.icon" />
<span class="mx-1">
</span>
</router-link>
</li>
</ul>
</div>
<div class="offcanvas offcanvas-collapse order-lg-2" id="primaryMenu">
<div class="offcanvas-header navbar-shadow">
<h5 class="mt-1 mb-0">Menu</h5>
<button class="btn-close lead" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<!-- Menu-->
<ul class="navbar-nav">
<li data-test="main-link" class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" data-bs-toggle="dropdown">
Home
</a>
</li>
<li data-test="main-link" class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" data-bs-toggle="dropdown">
Products
</a>
<ul class="dropdown-menu">
<li data-test="dropdown"></li>
<router-link class="dropdown-item" to="link">
Product 1
</router-link>
</li>
<li data-test="dropdown"></li>
<router-link class="dropdown-item" to="link">
Product 2
</router-link>
</li>
<li data-test="dropdown"></li>
<router-link class="dropdown-item" to="link">
Product 3
</router-link>
</li>
</ul>
</li>
<li data-test="main-link" class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" data-bs-toggle="dropdown">
Services
</a>
<ul class="dropdown-menu">
<li data-test="dropdown"></li>
<router-link class="dropdown-item" to="link">
Service 1
</router-link>
</li>
<li data-test="dropdown"></li>
<router-link class="dropdown-item" to="link">
Service 2
</router-link>
</li>
<li data-test="dropdown"></li>
<router-link class="dropdown-item" to="link">
Service 3
</router-link>
</li>
</ul>
</li>
<li data-test="main-link" class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" data-bs-toggle="dropdown">
About
</a>
</li>
<li data-test="main-link" class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" data-bs-toggle="dropdown">
Contact
</a>
</li>
</ul>
</div>
</div>
</div>
</header>
<header class="header navbar navbar-expand-lg navbar-light navbar-floating navbar-sticky" data-fixed-element>
<div class="container px-0 px-xl-3">
<button class="navbar-toggler ms-n2 me-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#primaryMenu">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand flex-shrink-0 order-lg-1 mx-auto ms-lg-0 pe-lg-2 me-lg-4" href="index.html">
<img
class="d-none d-lg-block"
src="/img/resonance-dark.png"
alt="resonance"
width="153"
/>
</a>
<div class="nav-item dropdown order-lg-4 mr-lg-auto my-auto">
<a href="#">
<i class="fas fa-search"></i>
</a>
</div>
<div class="nav-item dropdown order-lg-4 mr-lg-auto my-auto">
<a href="#">
<i class="fas fa-bells fa-beat"></i>
</a>
</div>
<div class="nav-item dropdown order-lg-4 ml-lg-auto my-auto">
<button class="btn btn-transparent text-primary p-1 rounded-circle dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-th"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li v-for="(product, x) in productLinks" :key="x" >
<router-link class="dropdown-item" :to="product.link">
<img width="20" class="me-2" v-if="product.icon" :src="product.icon" />
<span class="mx-1">
{{ product.name }}
</span>
</router-link>
</li>
</ul>
</div>
<div class="offcanvas offcanvas-collapse order-lg-2" id="primaryMenu">
<div class="offcanvas-header navbar-shadow">
<h5 class="mt-1 mb-0">Menu</h5>
<button class="btn-close lead" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<!-- Menu-->
<ul class="navbar-nav">
{{#each links}}
<li data-test="main-link" class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="{{link}}" data-bs-toggle="dropdown">
{{ label }}
</a>
{{#if links}}
<ul class="dropdown-menu">
{{#each links}}
<li data-test="dropdown"></li>
<router-link class="dropdown-item" to="link">
{{ label }}
</router-link>
</li>
{{/each}}
</ul>
{{/if}}
</li>
{{/each}}
</ul>
</div>
</div>
</div>
</header>
{
"title": "Fractal",
"links": [
{
"label": "Home",
"href": "#"
},
{
"label": "Products",
"href": "#",
"links": [
{
"label": "Product 1",
"href": "#"
},
{
"label": "Product 2",
"href": "#"
},
{
"label": "Product 3",
"href": "#"
}
]
},
{
"label": "Services",
"href": "#",
"links": [
{
"label": "Service 1",
"href": "#"
},
{
"label": "Service 2",
"href": "#"
},
{
"label": "Service 3",
"href": "#"
}
]
},
{
"label": "About",
"href": "#"
},
{
"label": "Contact",
"href": "#"
}
]
}
No notes defined.