quartz/layouts/partials/header.html
2022-05-05 01:03:27 -04:00

32 lines
1.3 KiB
HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<header>
<div id="myTopnav" class="header">
<a href="javascript:void(0);" class="menu" onclick="myFunction()"><i class="fa fa-bars"></i></a>
<a href="/" class="logo">Fleeting Notes</a>
<div id="headerRight" class="header-right">
<a href="/download">Downloads</a>
<a href="/pricing">Pricing</a>
<a href="/posts">Blog</a>
<a href="javascript:void(0);" id="search-icon">
<i class="fa fa-search"></i>
</a>
<a href="javascript:void(0);" id="darkmode-switch">
<input class='toggle' id='darkmode-toggle' type='checkbox' tabindex="-1" hidden>
<i class="fa fa-sun-o" id="darkmode-icon" for="darkmode-toggle" tabindex="-1"></i>
</a>
</div>
</header>
<script>
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
var x = document.getElementById("myTopnav");
var y = document.getElementById("headerRight")
if (x.className === "header") {
x.className += " responsive";
y.className += " responsive"
} else {
x.className = "header";
y.className = "header-right";
}
}
</script>