Skip to content

Instantly share code, notes, and snippets.

@autarch
Last active September 24, 2023 16:39
Show Gist options
  • Save autarch/f3f054d514f84e399dc95a4af93c7842 to your computer and use it in GitHub Desktop.
Save autarch/f3f054d514f84e399dc95a4af93c7842 to your computer and use it in GitHub Desktop.
<script>
import { page } from '$app/stores';
let links = [
{
title: "Home",
path: "/",
},
{
title: "About",
path: "/about",
},
{
title: "Contact",
path: "/contact",
},
{
title: "Pricing",
path: "/pricing",
},
{
title: "FAQ",
path: "/faq",
},
];
</script>
<nav class="navbar navbar-expand-md navbar-dark bg-dark" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand fw-bold" href="/">SpyderByte</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Navbar menus -->
<ul class="navbar-nav mx-auto mb-2 mb-lg-0">
{#each links as link}
<li class="nav-item">
<a class="nav-link" class:active={link.path === $page.url.pathname} aria-current={link.path === $page.url.pathname} href="{link.path}">{link.title}</a>
</li>
{/each}
</ul>
<!-- Social media icons -->
<ul class="navbar-nav sm-icons">
<li>
<a class="icon-link" href="https://facebook.com/">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/>
</svg>
</a>
</li>
<li><a class="nav-link" href="/">hey<i class="bi bi-instagram"></i></a></li>
<li><a class="nav-link" href="/">yo<i class="bi bi-twitter"></i></a></li>
<li><a class="nav-link" href="/">dad<i class="bi bi-pinterest"></i></a></li>
</ul>
</div>
</div>
</nav>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment