From bca390fa28153da627406d3c99560111d68080aa Mon Sep 17 00:00:00 2001
From: 35C4n0r <jaykumar20march@gmail.com>
Date: Sun, 26 Nov 2023 11:50:09 +0530
Subject: [PATCH] feat: add external links to navbar

Signed-off-by: Jay <jaykumar20march@gmail.com>
---
 assets/scss/_navbar_project.scss | 29 +++++++++++++++++++++++++++++
 assets/scss/_styles_project.scss |  1 +
 layouts/partials/navbar.html     | 29 +++++++++++++++++++++++++++++
 3 files changed, 59 insertions(+)
 create mode 100644 assets/scss/_navbar_project.scss
 create mode 100644 layouts/partials/navbar.html

diff --git a/assets/scss/_navbar_project.scss b/assets/scss/_navbar_project.scss
new file mode 100644
index 00000000..67330fc6
--- /dev/null
+++ b/assets/scss/_navbar_project.scss
@@ -0,0 +1,29 @@
+.navbar-brand {
+  width: 280.06px;
+  height: 30px;
+
+}
+
+.main-nav-items {
+  margin-top: 0.75rem;
+}
+
+.nav-link-external {
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+  color: $primary;
+  background: transparent;
+  transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0s;
+}
+
+.nav-link-external:hover {
+  border: 1px solid $primary;
+  color: $primary;
+  box-shadow: $light 0 0 5px;
+  background-color: transparent;
+}
+
+.nav-link-external:active {
+  box-shadow: $primary 0 0 5px;
+  border: 1px solid $secondary;
+}
\ No newline at end of file
diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
index 3ccb42b4..7f02b867 100644
--- a/assets/scss/_styles_project.scss
+++ b/assets/scss/_styles_project.scss
@@ -5,6 +5,7 @@
 @import 'footer_project.scss';
 @import 'variables_project.scss';
 @import 'landing_project.scss';
+@import '_navbar_project.scss';
 
 // Global Navigation Bar
 .td-navbar{
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
new file mode 100644
index 00000000..75617f38
--- /dev/null
+++ b/layouts/partials/navbar.html
@@ -0,0 +1,29 @@
+<header>
+    <nav class="td-navbar navbar-dark js-navbar-scroll td-navbar-cover navbar-bg-onscroll--fade">
+        <div class="container-fluid flex-column flex-md-row">
+            <a class="navbar-brand" href="/">
+            <span class="navbar-brand__logo navbar-logo">
+                {{ $svg := resources.Get "icons/logo.svg" }}
+                    <img class="footer-logo" src="{{ $svg.Permalink }}" alt="logo"/>
+            </span>
+                <span class="navbar-brand__name"></span></a>
+            <div class="td-navbar-nav-scroll ms-md-auto main-nav-items" id="main_navbar">
+                <ul class="navbar-nav">
+                    <li class="nav-item nav-external">
+                        <a class="nav-link nav-link-external" href="https://playground.meshery.io" target="_blank">
+                            <span>Playground</span>
+                        </a>
+                    </li>
+                    <li class="nav-item"><a class="nav-link" href="/cloud/"><span>Cloud</span></a></li>
+                    <li class="nav-item"><a class="nav-link" href="/meshmap/"><span>MeshMap</span></a></li>
+                </ul>
+            </div>
+            <div class="d-none d-lg-block main-nav-items">
+                <div class="td-search">
+                    <div class="td-search__icon"></div>
+                    <input type="search" class="td-search__input form-control td-search-input" placeholder="Search"
+                           aria-label="Search this site…" autocomplete="off"></div>
+            </div>
+        </div>
+    </nav>
+</header>
\ No newline at end of file