<style>
.mobile-search-bar {
position: relative;
height: 100px;
width: 100%;
display: none;
}
.mobile-search-container {
display: flex;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
height: 38px;
margin: 20px 0px 20px 0px;
background-color: white;
position: relative;
}
.mobile-search-input {
flex: 1;
border: none;
padding: 12px 16px;
font-size: 16px;
outline: none;
}
.mobile-search-input::placeholder {
color: #888;
}
.mobile-search-button {
background-color: #000;
border: none;
padding: 0 16px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
outline: none;
}
.mobile-search-button svg {
/* fill: #fff; */
height: 20px;
}
.mobile-search-button:active {
background-color: #555;
}
.mobile-nav-search {
position: relative;
}
.mobile-result-item {
padding: 9px 12px;
}
.mobile-result-item a {
color: #222325;
}
.mobile-searchbarResults {
background-color: #fff;
border: 1px solid #e4e5e7;
border-radius: 6px;
-webkit-box-shadow: 0 17px 58px rgba(0, 0, 0, .08);
box-shadow: 0 17px 58px rgba(0, 0, 0, .08);
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #74767e;
cursor: default;
margin-top: 8px;
padding: 12px;
position: fixed;
margin-top: 42px;
width: 244px;
height: 400px;
overflow-y: scroll;
z-index: 101;
display: none;
}
</style>
{%- if site.newToolBar and page.lang == 'en' -%}
<div class="appscms-toolbar">
<div class="row">
<div class="col-11 mx-auto">
<div class="appscms-toolbar-list">
<button class="scroll-left">❮</button>
<div id="close-nav-ham" data-open="1" class="close-nav-ham">
<img class="mt-3" style="cursor: pointer" height="30px" width="30px" src="/assets/images/close-button.svg"
alt="close-button" />
</div>
{%- if site.navigationSearch -%}
<div class="mobile-search-bar">
<div class="mobile-search-container">
<input type="text" class="mobile-search-input" placeholder="Search Tools">
<button class="mobile-search-button">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path
d="M16.6725 16.6412L21 21M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"
stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
</svg>
</button>
<div id="mobile-results" class="mobile-searchbarResults"></div>
</div>
</div>
{%- endif -%}
{%- if Data.megaMenu -%}
{%- for item in Data.megaMenu.dropdown -%}
<li class="appscms-toolbar-list-item">
<span class="appscms-toolbar-list-item-span d-flex justify-content-between">
{{ item.categoryName }}
</span>
<div class="list-item-dropdown">
<div class="row">
{% if item.featuredLinks.size > 0 %}
<div class="col-lg-4 col-md-6">
<div class="appscms-featured-tools">
<div class="category-tools">
<h4 class="expand_menu-name-categiry">FEATURED TOOLS</h4>
{%- for i in item.featuredLinks -%}
<a href="{{i.url}}" class="category-tools__item">
<div class="icon_box v_2 v2">
<img src="{{i.iconSrc}}" alt="icon-img" />
</div>
<div class="category-tools__content">
<h4>{{i.name}}</h4>
<p class="category-tools__descr gray">{{i.text}}</p>
</div>
</a>
{%- endfor -%}
</div>
</div>
</div>
{%- endif -%}
{%- if item.links.size > 0 -%}
<div class="col-md-8">
<div class="appscms-other-tools">
<div class="expand_menu-name-categiry">OTHER TOOLS</div>
{% assign array_size = item.links | size %}
{% assign half_size = array_size | divided_by: 2 %}
{% assign first_half = item.links | slice: 0, half_size %}
{% assign second_half = item.links | slice: half_size, array_size %}
<div class="row">
<div class="col-md-6">
<ul class="mega_menu">
{%- for i in first_half | slice: 0, half -%}
<li>
<a href="{{ i.url }}">{{ i.name }}</a>
</li>
{%- endfor -%}
</ul>
</div>
<div class="col-md-6">
<ul class="mega_menu">
{%- for i in second_half -%}
<li>
<a href="{{ i.url }}">{{ i.name }}</a>
</li>
{%- endfor -%}
</ul>
</div>
</div>
</div>
</div>
{%- endif -%}
</div>
</div>
</li>
{%- endfor -%}
{%- endif -%}
{%- for item in siteData.megaMenu.dropdown -%}
<li class="appscms-toolbar-list-item">
<span class="appscms-toolbar-list-item-span d-flex justify-content-between">
{{ item.categoryName }}
</span>
<div class="list-item-dropdown">
<div class="row">
{%- if item.featuredLinks.size > 0 -%}
<div class="col-lg-4 col-md-6">
<div class="appscms-featured-tools">
<div class="category-tools">
<h4 class="expand_menu-name-categiry">FEATURED TOOLS</h4>
{%- for i in item.featuredLinks -%}
<a href="{{i.url}}" class="category-tools__item">
<div class="icon_box v_2 v2">
<img src="{{i.iconSrc}}" alt="icon-img" />
</div>
<div class="category-tools__content">
<h4>{{i.name}}</h4>
<p class="category-tools__descr gray">{{i.text}}</p>
</div>
</a>
{%- endfor -%}
</div>
</div>
</div>
{%- endif -%}
{%- if item.links.size > 0 -%}
<div class="col-lg-6">
<div class="appscms-other-tools">
<div class="expand_menu-name-categiry">OTHER TOOLS</div>
{% assign array_size = item.links | size %}
{% assign half_size = array_size | divided_by: 2 %}
{% assign first_half = item.links | slice: 0, half_size %}
{% assign second_half = item.links | slice: half_size, array_size %}
<div class="row">
<div class="col-md-6">
<ul class="mega_menu">
{%- for i in first_half | slice: 0, half -%}
<li>
<a href="{{ i.url }}">{{ i.name }}</a>
</li>
{%- endfor -%}
</ul>
</div>
<div class="col-md-6">
<ul class="mega_menu">
{%- for i in second_half -%}
<li>
<a href="{{ i.url }}">{{ i.name }}</a>
</li>
{%- endfor -%}
</ul>
</div>
</div>
</div>
</div>
{%- endif -%}
</div>
</div>
</li>
{%- endfor -%}
<button class="scroll-right">❯</button>
</div>
</div>
</div>
</div>
{%- else -%}
<div class="appscms-toolbar">
<div class="row">
<div class="col-11 mx-auto">
<div class="appscms-toolbar-list">
<button class="scroll-left">❮</button>
<div id="close-nav-ham" data-open="1" class="close-nav-ham">
<img class="mt-3" style="cursor: pointer;" height="30px" width="30px" src="/assets/images/close-button.svg"
alt="close-button">
</div>
{%- if Data.megaMenu -%}
{%- for item in Data.megaMenu.dropdown -%}
<li class="appscms-toolbar-list-item">
<span class="appscms-toolbar-list-item-span d-flex justify-content-between">
{{ item.categoryName }}
</span>
<div class="list-item-dropdown">
<h4 class="list-item-dropdown-heading">
{{ Data.nav-link-name }}
</h4>
<div class="row">
{%- assign count = 0 -%}
{%- for i in item.links -%}
{%- assign count = count | plus: 1 -%}
{%- if count == 1 -%}
{%- if site.name == "olarandoms" -%}
<div class="col-xl-6">
{%- else -%}
<div class="col-md-6 col-lg-4">
{%- endif -%}
{%- endif -%}
{%- if count == 6 -%}
<a class="toolbar-link" href="{{ i.url }}">{{ i.name }}</a>
</div>
{%- assign count = 0 -%}
{%- else -%}
<a class="toolbar-link" href="{{ i.url }}">{{ i.name }}</a>
{%- endif -%}
{%- endfor -%}
</div>
</div>
</li>
{%- endfor -%}
{%- endif -%}
{%- for item in siteData.megaMenu.dropdown -%}
<li class="appscms-toolbar-list-item">
<span class="appscms-toolbar-list-item-span d-flex justify-content-between">
{{ item.categoryName }}
</span>
<div class="list-item-dropdown">
<h4 class="list-item-dropdown-heading">
{{ siteData.megaMenu.nav-link-name }}
</h4>
<div class="row">
{%- assign count = 0 -%}
{%- for i in item.links -%}
{%- assign count = count | plus: 1 -%}
{%- if count == 1 -%}
{%- if site.name == "olarandoms" -%}
<div class="col-xl-6">
{%- else -%}
<div class="col-md-6 col-lg-4">
{%- endif -%}
{%- endif -%}
{%- if count == 6 -%}
<a class="toolbar-link" href="{{ i.url }}">{{ i.name }}</a>
</div>
{%- assign count = 0 -%}
{%- else -%}
<a class="toolbar-link" href="{{ i.url }}">{{ i.name }}</a>
{%- endif -%}
{%- endfor -%}
</div>
</div>
</li>
{%- endfor -%}
<button class="scroll-right">❯</button>
</div>
</div>
</div>
</div>
{%- endif -%}
<script>
document.addEventListener("DOMContentLoaded", function () {
const scrollContainer = document.querySelector(".appscms-toolbar-list");
const scrollLeft = document.querySelector(".scroll-left");
const scrollRight = document.querySelector(".scroll-right");
function updateScrollButtons() {
scrollLeft.style.display =
scrollContainer.scrollLeft > 0 ? "block" : "none";
scrollRight.style.display =
scrollContainer.scrollWidth >
scrollContainer.clientWidth + scrollContainer.scrollLeft
? "block"
: "none";
}
scrollLeft.addEventListener("click", function () {
scrollContainer.scrollLeft -= 120; // Adjust this value as needed
updateScrollButtons();
});
scrollRight.addEventListener("click", function () {
scrollContainer.scrollLeft += 120; // Adjust this value as needed
updateScrollButtons();
});
scrollContainer.addEventListener("scroll", updateScrollButtons);
// Initial check to hide buttons if necessary
updateScrollButtons();
});
</script>
<style>
.scroll-container {
display: flex;
align-items: center;
background-color: #333;
position: relative;
}
.scroll-left,
.scroll-right {
background-color: #4456f6f7;
color: white;
border: none;
height: 40px;
cursor: pointer;
position: absolute;
width: 40px;
top: 50%;
z-index: 100;
transform: translateY(-50%);
}
.scroll-left {
left: 0;
}
.scroll-right {
right: 0;
}
.scroll-left:hover,
.scroll-right:hover {
background-color: #8691f6f7;
}
.navbar {
/* overflow-x: auto; */
white-space: nowrap;
flex-grow: 1;
scroll-behavior: smooth;
display: flex;
}
.navbar ul {
padding: 0;
margin: 0;
display: flex;
list-style-type: none;
}
.navbar li {
display: inline;
}
</style>