feat: add external links to navbar

Signed-off-by: Jay <[email protected]>

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;
+}

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{

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>