_includes/appscms/navbars/toolbar.html in appscms-tools-theme-4.8.1 vs _includes/appscms/navbars/toolbar.html in appscms-tools-theme-4.8.2
- old
+ new
@@ -1,441 +1,254 @@
-<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="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" />
+ <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">
+ <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">
+ <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_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>
+ 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">
+ {%- endif -%} {%- if Data.megaMenu -%} {%- for item in
+ Data.megaMenu.dropdown -%}
+ <nav 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 -%}
+ <section class="col-lg-4 col-md-6 appscms-featured-tools">
+ <h4 class="expand_menu-name-categiry">FEATURED TOOLS</h4>
+ {%- for i in item.featuredLinks -%}
+ <a href="{{i.url}}" class="category-tools__item">
+ <figure class="icon_box v_2 v2">
+ <img src="{{i.iconSrc}}" alt="image for tools" />
+ </figure>
+ <div class="category-tools__content">
+ <h4>{{i.name}}</h4>
+ <p class="category-tools__descr gray">{{i.text}}</p>
</div>
- </div>
- </div>
- {%- endif -%}
- {%- if item.links.size > 0 -%}
+ </a>
+ {%- endfor -%}
+ </section>
+ {%- 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 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 %}
- {% 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">
+ </nav>
+ {%- endfor -%} {%- endif -%} {%- for item in siteData.megaMenu.dropdown
+ -%}
+ <nav 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 -%}
+ <section class="col-lg-4 col-md-6 appscms-featured-tools">
+ <h4 class="expand_menu-name-categiry">FEATURED TOOLS</h4>
+ {%- for i in item.featuredLinks -%}
+ <a href="{{i.url}}" class="category-tools__item">
+ <figure class="icon_box v_2 v2">
+ <img src="{{i.iconSrc}}" alt="icon-img" />
+ </figure>
+ <div class="category-tools__content">
+ <h4>{{i.name}}</h4>
+ <p class="category-tools__descr gray">{{i.text}}</p>
</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 %}
+ </a>
+ {%- endfor -%}
+ </section>
+ {%- endif -%} {%- if item.links.size > 0 -%}
+ <section class="col-lg-6 col-md-8 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 %}
- {% 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 class="row">
+ <nav 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>
+ </nav>
+ <nav class="col-md-6">
+ <ul class="mega_menu">
+ {%- for i in second_half -%}
+ <li>
+ <a href="{{ i.url }}">{{ i.name }}</a>
+ </li>
+ {%- endfor -%}
+ </ul>
+ </nav>
</div>
- </div>
+ </section>
{%- endif -%}
-
</div>
</div>
- </li>
+ </nav>
{%- 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">
+ <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">
+ {%- if Data.megaMenu -%} {%- for item in Data.megaMenu.dropdown -%}
+ <nav 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>
+ <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" -%}
+ {%- 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 -%}
+ {%- endif -%} {%- endif -%} {%- if count == 6 -%}
<a class="toolbar-link" href="{{ i.url }}">{{ i.name }}</a>
</div>
- {%- assign count = 0 -%}
- {%- else -%}
+ {%- assign count = 0 -%} {%- else -%}
<a class="toolbar-link" href="{{ i.url }}">{{ i.name }}</a>
- {%- endif -%}
- {%- endfor -%}
+ {%- 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">
+ </div>
+ </nav>
+ {%- endfor -%} {%- endif -%} {%- for item in siteData.megaMenu.dropdown
+ -%}
+ <nav 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" -%}
+ {%- 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 -%}
+ {%- endif -%} {%- endif -%} {%- if count == 6 -%}
<a class="toolbar-link" href="{{ i.url }}">{{ i.name }}</a>
</div>
- {%- assign count = 0 -%}
- {%- else -%}
+ {%- assign count = 0 -%} {%- else -%}
<a class="toolbar-link" href="{{ i.url }}">{{ i.name }}</a>
- {%- endif -%}
- {%- endfor -%}
+ {%- endif -%} {%- endfor -%}
</div>
</div>
- </li>
+ </div>
+ </nav>
{%- 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>
\ No newline at end of file