appscms-tools-theme 5.2.5 → 5.2.7

data/_includes/appscms/navbars/navbar.html

@@ -0,0 +1,334 @@
+
+{% assign lang = page.lang | default: "en" %} {% assign siteData = site.data.header[lang].data
+  %} {% assign featureData = page.fileName %} {% assign folder = page.folderName
+  %} {% assign Data= site.data[folder][lang][file] %}
+  <nav class="appscms-navbar">
+    <div class="row w-100 h-100">
+      <div class="col-11 mx-auto">
+      <div class="appscms-navbar-nav">
+        {%- if siteData.navbarBrandLogoSvg -%}
+        <a href="/" aria-label="home-page"> {{siteData.navbarBrandLogoSvg}} </a>
+        {%- elsif siteData.navbarBrandText -%}
+        <span> {{siteData.navbarBrandText}}
+        {%- else -%}
+        {%- endif -%}
+        <div class="d-flex align-items-center">
+           <button class="share-button mr-3" id="shareButton" aria-label="Share">
+            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
+              <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="M9 11.5C9 12.8807 7.88071 14 6.5 14C5.11929 14 4 12.8807 4 11.5C4 10.1193 5.11929 9 6.5 9C7.88071 9 9 10.1193 9 11.5Z" stroke="#000000" stroke-width="1.5"></path>
+                <path d="M14 7.5C14 8.88071 15.1193 10 16.5 10C17.8807 10 19 8.88071 19 7.5C19 6.11929 17.8807 5 16.5 5C15.1193 5 14 6.11929 14 7.5Z" stroke="#000000" stroke-width="1.5"></path>
+                <path d="M14 16.5C14 17.8807 15.1193 19 16.5 19C17.8807 19 19 17.8807 19 16.5C19 15.1193 17.8807 14 16.5 14C15.1193 14 14 15.1193 14 16.5Z" stroke="#000000" stroke-width="1.5"></path>
+                <path d="M9 11.5L14 7.5" stroke="#000000" stroke-width="1.5"></path>
+                <path d="M9 11.5L14 16.5" stroke="#000000" stroke-width="1.5"></path>
+              </g>
+            </svg>
+          </button>
+          {%- if site.navigationSearch -%}
+          <!-- Social Share Button -->
+         
+          <div class="nav-search mr-4">
+            <div class="search-container">
+              <input type="text" class="search-input" placeholder="Search Tools">
+             
+              <button class="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>
+     
+            <div id="results" class="searchbarResults"></div>
+          </div>
+          {%- endif -%}     
+          {%- if siteData.navItems -%}
+          <div class="appscms-navbar-nav-links">
+          {%- for item in siteData.navItems -%}
+          <a class="appscms-nav-link" href="{{item.url}}">{{item.name}}</a>
+          {%- endfor -%}
+          </div>
+          {%- endif -%}
+          {%- if site.authentication -%}
+          <button class="login-modal-button open-modal-btn" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Login</button>
+          <div class="user-profile-header">
+           
+            <div class="profile-button" id="profileButton">
+              
+          
+            </div>
+          </div>
+      
+          <div class="user-modal" id="userModal">
+            <div class="modal-item">
+              <div class="profile-user-avatar">GI</div>
+              <div class="user-info">
+                <div class="logged-in-username">Gill</div>
+                <p class="logged-in-user-email">itsrammoudgill@gmail.com</p>
+              </div>
+            
+            </div>
+      
+            <div class="modal-item">
+              <div class="item-icon"><svg height="20" width="20" viewBox="0 0 24 24" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><defs><style>.cls-1{fill:none;stroke:#020202;stroke-miterlimit:10;stroke-width:1.91px;}</style></defs><circle class="cls-1" cx="12" cy="7.25" r="5.73"></circle><path class="cls-1" d="M1.5,23.48l.37-2.05A10.3,10.3,0,0,1,12,13h0a10.3,10.3,0,0,1,10.13,8.45l.37,2.05"></path></g></svg></div>
+              <div class="item-text">
+               <a href="/profile">Account</a> </div>
+              <div class="item-arrow"><svg viewBox="-4.5 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>arrow_right [#336]</title> <desc>Created with Sketch.</desc> <defs> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Dribbble-Light-Preview" transform="translate(-305.000000, -6679.000000)" fill="#000000"> <g id="icons" transform="translate(56.000000, 160.000000)"> <path d="M249.365851,6538.70769 L249.365851,6538.70769 C249.770764,6539.09744 250.426289,6539.09744 250.830166,6538.70769 L259.393407,6530.44413 C260.202198,6529.66364 260.202198,6528.39747 259.393407,6527.61699 L250.768031,6519.29246 C250.367261,6518.90671 249.720021,6518.90172 249.314072,6519.28247 L249.314072,6519.28247 C248.899839,6519.67121 248.894661,6520.31179 249.302681,6520.70653 L257.196934,6528.32352 C257.601847,6528.71426 257.601847,6529.34685 257.196934,6529.73759 L249.365851,6537.29462 C248.960938,6537.68437 248.960938,6538.31795 249.365851,6538.70769" id="arrow_right-[#336]"> </path> </g> </g> </g> </g></svg></div>
+            </div>
+      
+            <div class="modal-item">
+              <div class="item-icon"><svg height="20" width="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g id="Warning / Help"> <path id="Vector" d="M8.19531 8.76498C8.42304 8.06326 8.84053 7.43829 9.40137 6.95899C9.96221 6.47968 10.6444 6.16501 11.373 6.0494C12.1017 5.9338 12.8486 6.02202 13.5303 6.3042C14.2119 6.58637 14.8016 7.05166 15.2354 7.64844C15.6691 8.24521 15.9295 8.95008 15.9875 9.68554C16.0455 10.421 15.8985 11.1581 15.5636 11.8154C15.2287 12.4728 14.7192 13.0251 14.0901 13.4106C13.4611 13.7961 12.7377 14.0002 12 14.0002V14.9998M12.0498 19V19.1L11.9502 19.1002V19H12.0498Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g> </g></svg></div>
+              <div class="item-text">
+                <a href="/contact">Contact</a>
+                </div>
+              <div class="item-arrow"><svg viewBox="-4.5 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>arrow_right [#336]</title> <desc>Created with Sketch.</desc> <defs> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Dribbble-Light-Preview" transform="translate(-305.000000, -6679.000000)" fill="#000000"> <g id="icons" transform="translate(56.000000, 160.000000)"> <path d="M249.365851,6538.70769 L249.365851,6538.70769 C249.770764,6539.09744 250.426289,6539.09744 250.830166,6538.70769 L259.393407,6530.44413 C260.202198,6529.66364 260.202198,6528.39747 259.393407,6527.61699 L250.768031,6519.29246 C250.367261,6518.90671 249.720021,6518.90172 249.314072,6519.28247 L249.314072,6519.28247 C248.899839,6519.67121 248.894661,6520.31179 249.302681,6520.70653 L257.196934,6528.32352 C257.601847,6528.71426 257.601847,6529.34685 257.196934,6529.73759 L249.365851,6537.29462 C248.960938,6537.68437 248.960938,6538.31795 249.365851,6538.70769" id="arrow_right-[#336]"> </path> </g> </g> </g> </g></svg></div>
+            </div>
+      
+            <div class="modal-item" id="logoutBtn">
+              <div class="item-icon"><svg height="20" width="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><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="M12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"></path> <path d="M10 12H20M20 12L17 9M20 12L17 15" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg></div>
+              <div class="item-text">Log out</div>
+              <div class="item-arrow"><svg viewBox="-4.5 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>arrow_right [#336]</title> <desc>Created with Sketch.</desc> <defs> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Dribbble-Light-Preview" transform="translate(-305.000000, -6679.000000)" fill="#000000"> <g id="icons" transform="translate(56.000000, 160.000000)"> <path d="M249.365851,6538.70769 L249.365851,6538.70769 C249.770764,6539.09744 250.426289,6539.09744 250.830166,6538.70769 L259.393407,6530.44413 C260.202198,6529.66364 260.202198,6528.39747 259.393407,6527.61699 L250.768031,6519.29246 C250.367261,6518.90671 249.720021,6518.90172 249.314072,6519.28247 L249.314072,6519.28247 C248.899839,6519.67121 248.894661,6520.31179 249.302681,6520.70653 L257.196934,6528.32352 C257.601847,6528.71426 257.601847,6529.34685 257.196934,6529.73759 L249.365851,6537.29462 C248.960938,6537.68437 248.960938,6538.31795 249.365851,6538.70769" id="arrow_right-[#336]"> </path> </g> </g> </g> </g></svg></div>
+            </div>
+          </div>
+          <div class="side-modal-overlay"  id="modalOverlay"></div>
+      
+          <div class="side-modal" id="sideModal">
+            <div class="modal-header">
+              <div>
+               
+                  {%- if siteData.navbarBrandLogoSvg -%}
+                  <a href="/" aria-label="home-page"> {{siteData.navbarBrandLogoSvg}} </a>
+                  {%- elsif siteData.navbarBrandText -%}
+                  <span> {{siteData.navbarBrandText}}
+                  {%- else -%}
+                  {%- endif -%}
+              </div>
+              <button class="close-modal-btn">&times;</button>
+            </div>
+            <div class="side-modal-content">
+              <div class="modal-body d-flex justify-content-center">
+                <div class="user-avatar" id="userAvatar" style="display: none">GI</div>
+                <div class="auth-container" id="authContainer">
+                  <div id="loginForm">
+                    <h1>Log in</h1>
+                    <h2>
+                      Don't have an account? <a href="#" id="showSignup">Create account</a>
+                    </h2>
+            
+                    <div class="auth-forms">
+                      <button class="social-btn google-btn" id="googleLogin">
+                        <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><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="M30.0014 16.3109C30.0014 15.1598 29.9061 14.3198 29.6998 13.4487H16.2871V18.6442H24.1601C24.0014 19.9354 23.1442 21.8798 21.2394 23.1864L21.2127 23.3604L25.4536 26.58L25.7474 26.6087C28.4458 24.1665 30.0014 20.5731 30.0014 16.3109Z" fill="#4285F4"></path> <path d="M16.2863 29.9998C20.1434 29.9998 23.3814 28.7553 25.7466 26.6086L21.2386 23.1863C20.0323 24.0108 18.4132 24.5863 16.2863 24.5863C12.5086 24.5863 9.30225 22.1441 8.15929 18.7686L7.99176 18.7825L3.58208 22.127L3.52441 22.2841C5.87359 26.8574 10.699 29.9998 16.2863 29.9998Z" fill="#34A853"></path> <path d="M8.15964 18.769C7.85806 17.8979 7.68352 16.9645 7.68352 16.0001C7.68352 15.0356 7.85806 14.1023 8.14377 13.2312L8.13578 13.0456L3.67083 9.64746L3.52475 9.71556C2.55654 11.6134 2.00098 13.7445 2.00098 16.0001C2.00098 18.2556 2.55654 20.3867 3.52475 22.2845L8.15964 18.769Z" fill="#FBBC05"></path> <path d="M16.2864 7.4133C18.9689 7.4133 20.7784 8.54885 21.8102 9.4978L25.8419 5.64C23.3658 3.38445 20.1435 2 16.2864 2C10.699 2 5.8736 5.1422 3.52441 9.71549L8.14345 13.2311C9.30229 9.85555 12.5086 7.4133 16.2864 7.4133Z" fill="#EB4335"></path> </g></svg>
+                        Continue with Google
+                      </button>
+                      <button class="social-btn facebook-btn d-none" id="facebookLogin">
+                        <span class="icon facebook-icon"></span>
+                        Continue with Facebook
+                      </button>
+                      <!-- Add this inside your auth-forms div in both login and signup sections -->
+                      <button class="social-btn twitter-btn d-none" id="twitterLogin">
+                        <svg
+                          viewBox="0 0 24 24"
+                          width="24"
+                          height="24"
+                          style="margin-right: 10px"
+                        >
+                          <path
+                            fill="white"
+                            d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
+                          />
+                        </svg>
+                        Continue with X
+                      </button>
+            
+                      <div class="or-divider">Or</div>
+            
+                      <form id="emailLoginForm">
+                        <div class="input-group">
+                          <span class="icon email-icon"></span>
+                          <input
+                            type="email"
+                            id="loginEmail"
+                            placeholder="Email"
+                            required
+                          />
+                        </div>
+                        <div class="input-group">
+                          <span class="icon password-icon"></span>
+                          <input
+                            type="password"
+                            id="loginPassword"
+                            placeholder="Password"
+                            required
+                          />
+                          <span
+                            class="password-toggle icon eye-icon"
+                            id="toggleLoginPassword"
+                          ></span>
+                        </div>
+                        <button type="submit" class="login-btn">Log in</button>
+                      </form>
+            
+                      <div class="forgot-password">
+                        <a href="#" id="forgotPassword">Forgot your password?</a>
+                      </div>
+                    </div>
+                  </div>
+            
+                  <!-- Forgot Password Form -->
+                  <div id="forgotPasswordForm">
+                    <div class="back-btn" id="backToLogin">
+                      <span class="back-icon">←</span>
+                      Back to login
+                    </div>
+            
+                    <h1>Reset password</h1>
+                    <h2>
+                      Enter your email address and we'll send you a link to reset your
+                      password
+                    </h2>
+            
+                    <form id="resetPasswordForm">
+                      <div class="input-group">
+                        <span class="icon email-icon"></span>
+                        <input type="email" id="resetEmail" placeholder="Email" required />
+                      </div>
+                      <button type="submit" class="login-btn">Send reset link</button>
+                    </form>
+            
+                    <div class="reset-success" id="resetSuccess">
+                      <div class="success-icon">✓</div>
+                      <h3>Reset link sent</h3>
+                      <p>Check your email for instructions to reset your password</p>
+                    </div>
+                  </div>
+            
+                  <!-- Sign Up Form -->
+                  <div id="signupForm" style="display: none">
+                    <h1>Create your account</h1>
+                    <h2>Already have an account? <a href="#" id="showLogin">Log in</a></h2>
+            
+                    <div class="auth-forms">
+                      <button class="social-btn google-btn" id="googleSignup">
+                        <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><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="M30.0014 16.3109C30.0014 15.1598 29.9061 14.3198 29.6998 13.4487H16.2871V18.6442H24.1601C24.0014 19.9354 23.1442 21.8798 21.2394 23.1864L21.2127 23.3604L25.4536 26.58L25.7474 26.6087C28.4458 24.1665 30.0014 20.5731 30.0014 16.3109Z" fill="#4285F4"></path> <path d="M16.2863 29.9998C20.1434 29.9998 23.3814 28.7553 25.7466 26.6086L21.2386 23.1863C20.0323 24.0108 18.4132 24.5863 16.2863 24.5863C12.5086 24.5863 9.30225 22.1441 8.15929 18.7686L7.99176 18.7825L3.58208 22.127L3.52441 22.2841C5.87359 26.8574 10.699 29.9998 16.2863 29.9998Z" fill="#34A853"></path> <path d="M8.15964 18.769C7.85806 17.8979 7.68352 16.9645 7.68352 16.0001C7.68352 15.0356 7.85806 14.1023 8.14377 13.2312L8.13578 13.0456L3.67083 9.64746L3.52475 9.71556C2.55654 11.6134 2.00098 13.7445 2.00098 16.0001C2.00098 18.2556 2.55654 20.3867 3.52475 22.2845L8.15964 18.769Z" fill="#FBBC05"></path> <path d="M16.2864 7.4133C18.9689 7.4133 20.7784 8.54885 21.8102 9.4978L25.8419 5.64C23.3658 3.38445 20.1435 2 16.2864 2C10.699 2 5.8736 5.1422 3.52441 9.71549L8.14345 13.2311C9.30229 9.85555 12.5086 7.4133 16.2864 7.4133Z" fill="#EB4335"></path> </g></svg>
+                        Continue with Google
+                      </button>
+            
+                      <div class="or-divider">Or</div>
+            
+                      <form id="emailSignupForm">
+                        <div class="input-group">
+                          <span class="icon email-icon"></span>
+                          <input
+                            type="email"
+                            id="signupEmail"
+                            placeholder="Email"
+                            required
+                          />
+                        </div>
+                        <div class="input-group">
+                          <span class="icon password-icon"></span>
+                          <input
+                            type="password"
+                            id="signupPassword"
+                            placeholder="Password"
+                            required
+                          />
+                          <span
+                            class="password-toggle icon eye-icon"
+                            id="toggleSignupPassword"
+                          ></span>
+                        </div>
+                        <button type="submit" class="login-btn">Create account</button>
+                      </form>
+            
+                      <p style="font-size: 14px; color: #777; text-align: center">
+                        By creating an account, you agree to our
+                        <a href="#">Privacy Policy</a> and our
+                        <a href="#">Terms & Conditions.</a>
+                      </p>
+                    </div>
+                  </div>
+            
+                 
+                
+                </div><div class="user-avatar" id="userAvatar" style="display: none"></div>
+
+               
+              </div>
+            </div>
+          </div>
+          {%- endif -%}
+
+          <!-- Social Share Modal -->
+          <div class="share-modal-overlay" id="shareModalOverlay"></div>
+          <div class="share-modal" id="shareModal">
+            <div class="share-modal-content">
+              <h2 class="share-modal-title">Show Us Some Love</h2>
+              <p class="share-modal-subtitle">Tell the world about {{ site.url }}</p>
+
+              <div class="share-social-icons">
+                <a href="https://pinterest.com/pin/create/button/?url={{ site.url }}{{ page.url | default: '' }}&description={{ page.title | default: site.title | url_encode }}" target="_blank" rel="noopener" class="share-icon pinterest-share" aria-label="Share on Pinterest">
+                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M12 2C6.477 2 2 6.477 2 12c0 4.237 2.636 7.855 6.356 9.312-.088-.791-.167-2.005.035-2.868.182-.78 1.172-4.97 1.172-4.97s-.299-.6-.299-1.486c0-1.39.806-2.428 1.81-2.428.852 0 1.264.64 1.264 1.408 0 .858-.545 2.14-.828 3.33-.236.995.5 1.807 1.48 1.807 1.778 0 3.144-1.874 3.144-4.58 0-2.393-1.72-4.068-4.177-4.068-2.845 0-4.515 2.135-4.515 4.34 0 .859.331 1.781.745 2.281a.3.3 0 01.069.288l-.278 1.133c-.044.183-.145.223-.335.134-1.249-.581-2.03-2.407-2.03-3.874 0-3.154 2.292-6.052 6.608-6.052 3.469 0 6.165 2.473 6.165 5.776 0 3.447-2.173 6.22-5.19 6.22-1.013 0-1.965-.525-2.291-1.148l-.623 2.378c-.226.869-.835 1.958-1.244 2.621.937.29 1.931.446 2.962.446 5.523 0 10-4.477 10-10S17.523 2 12 2z" fill="#E60023"/>
+                  </svg>
+                </a>
+
+                <a href="https://www.tumblr.com/share/link?url={{ site.url }}{{ page.url | default: '' }}&name={{ page.title | default: site.title | url_encode }}" target="_blank" rel="noopener" class="share-icon tumblr-share" aria-label="Share on Tumblr">
+                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M14.563 24c-5.093 0-7.031-3.756-7.031-6.411V9.747H5.116V6.648c3.63-1.313 4.512-4.596 4.71-6.469C9.84.051 9.941 0 9.999 0h3.517v6.114h4.801v3.633h-4.82v7.47c.016 1.001.375 2.371 2.207 2.371h.09c.631-.02 1.486-.205 1.936-.419l1.156 3.425c-.436.636-2.4 1.374-4.156 1.404h-.178l.011.002z" fill="#35465C"/>
+                  </svg>
+                </a>
+
+                <a href="https://twitter.com/intent/tweet?url={{ site.url }}{{ page.url | default: '' }}&text={{ page.title | default: site.title | url_encode }}" target="_blank" rel="noopener" class="share-icon twitter-share" aria-label="Share on Twitter">
+                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" fill="#1DA1F2"/>
+                  </svg>
+                </a>
+
+                <a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ page.url | default: '' }}" target="_blank" rel="noopener" class="share-icon facebook-share" aria-label="Share on Facebook">
+                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" fill="#1877F2"/>
+                  </svg>
+                </a>
+
+                <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ site.url }}{{ page.url | default: '' }}&title={{ page.title | default: site.title | url_encode }}" target="_blank" rel="noopener" class="share-icon linkedin-share" aria-label="Share on LinkedIn">
+                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" fill="#0A66C2"/>
+                  </svg>
+                </a>
+              </div>
+
+              <div class="share-url-container">
+                <input type="text" class="share-url-input" value="{{ site.url }}{{ page.url | default: '' }}" readonly id="shareUrlInput">
+                <button class="copy-link-btn" id="copyLinkBtn">Copy Link</button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div id="hamburger" data-open="false" class="hamburger">
+          <svg
+          style="font-size:25px"
+            stroke="currentColor"
+            fill="currentColor"
+            stroke-width="0"
+            viewBox="0 0 512 512"
+            aria-hidden="true"
+            focusable="false"
+            height="50px"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fill="none"
+              stroke-linecap="round"
+              stroke-miterlimit="10"
+              stroke-width="48"
+              d="M88 152h336M88 256h336M88 360h336"
+            ></path>
+          </svg>
+        </div>
+      </div>
+      </div>
+    </div>
+  </nav>
+

data/_includes/appscms/navbars/toolbar.html

@@ -0,0 +1,303 @@
+
+
+{%- if site.newToolBar -%}
+<div class="appscms-toolbar"> 
+  <div class="row">
+    <div class="col-11 mx-auto">
+      <div class="appscms-toolbar-list">
+        <button class="scroll-left">&#10094;</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" style="background-color: {{i.color}};">
+                        <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 style="background-color: {{i.color}};" 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">&#10095;</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">&#10094;</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">&#10095;</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>
+