pixelfed/resources/assets/components/landing/sections/nav.vue

<template>
	<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
		<div class="container" style="max-width: 600px;">
			<router-link to="/" class="navbar-brand">
				<img src="/img/pixelfed-icon-color.svg" width="40" height="40" alt="Logo">
				<span class="mr-3">{{ name }}</span>
			</router-link>
			<ul class="navbar-nav mr-auto">
			</ul>
			<div class="my-2 my-lg-0">
				<a class="btn btn-outline-light btn-sm rounded-pill font-weight-bold px-4" href="/login">Login</a>

				<a v-if="config.open_registration" class="ml-2 btn btn-primary btn-primary-alt btn-sm rounded-pill font-weight-bold px-4" href="/register">Sign up</a>
			</div>
		</div>
	</nav>
</template>

<script type="text/javascript">
	export default {
		data() {
			return {
				config: window.pfl,
				name: window.pfl.name,
			}
		},
		mounted() {
			$(window).scroll(function(){
				$('nav').toggleClass('bg-black', $(this).scrollTop() > 20);
			});
		}
	}
</script>