website/layouts/partials/sections/header.html

175 lines
9.6 KiB
HTML

{{- /* theme is auto */}}
<script>
let localStorageValue = localStorage.getItem("pref-theme");
let mediaQuery = window.matchMedia('(prefers-color-scheme: dark)').matches;
switch (localStorageValue) {
case "dark":
document.body.classList.add('dark');
break;
case "light":
document.body.classList.remove('dark');
break;
default:
if (mediaQuery) {
document.body.classList.add('dark');
}
break;
}
</script>
<!-- Navbar -->
<header>
<nav class="pt-3 navbar navbar-expand-lg {{ if .Site.Params.animate }}animate{{ end }}">
<div class="container-fluid mx-xs-2 mx-sm-5 mx-md-5 mx-lg-5">
<!-- navbar brand -->
<a class="navbar-brand primary-font text-wrap" href="{{ .Site.BaseURL | relURL }}">
{{ if and (or (.Site.Params.favicon) (.Site.Params.navbar.brandLogo)) .Site.Params.navbar.showBrandLogo | default true }}
<img src="{{ .Site.Params.navbar.brandLogo | default .Site.Params.favicon }}" width="30" height="30"
class="d-inline-block align-top">
{{ .Site.Params.navbar.brandName | default .Site.Params.title }}
{{ else }}
{{ .Site.Params.navbar.brandName | default .Site.Params.title }}
{{ end }}
</a>
{{ if not (.Site.Params.navbar.disableSearch | default false) }}
<div>
<input id="search" autocomplete="off" class="form-control mr-sm-2 d-none d-md-block" placeholder='{{ .Site.Params.navbar.searchPlaceholder | default "Ctrl + k to Search..."}}'
aria-label="Search" oninput="searchOnChange(event)">
</div>
{{ end }}
<!-- navbar toggler -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent"
aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
<svg aria-hidden="true" height="24" viewBox="0 0 16 16" version="1.1" width="24" data-view-component="true">
<path fill-rule="evenodd" d="M1 2.75A.75.75 0 011.75 2h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 2.75zm0 5A.75.75 0 011.75 7h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 7.75zM1.75 12a.75.75 0 100 1.5h12.5a.75.75 0 100-1.5H1.75z"></path>
</svg>
</button>
<!-- navbar content -->
<div class="collapse navbar-collapse text-wrap primary-font" id="navbarContent">
<ul class="navbar-nav {{ .Site.Params.navbar.align | default "ms-auto"}} text-center">
{{ if not (.Site.Params.navbar.disableSearch | default false) }}
<li class="nav-item navbar-text d-block d-md-none">
<div class="nav-link">
<input id="search" autocomplete="off" class="form-control mr-sm-2" placeholder='{{ .Site.Params.navbar.searchPlaceholder | default "Ctrl + k to Search..."}}' aria-label="Search" oninput="searchOnChange(event)">
</div>
</li>
{{ end }}
{{ if and (.Site.Params.about.enable | default false) (not (.Site.Params.navbar.menus.disableAbout | default false)) }}
<li class="nav-item navbar-text">
<a class="nav-link" href="{{ .Site.BaseURL | relURL }}#about" aria-label="about">
{{ .Site.Params.about.title | default "About" }}
</a>
</li>
{{ end }}
{{ if and (.Site.Params.experience.enable | default false) (not (.Site.Params.navbar.menus.disableExperience | default false)) }}
<li class="nav-item navbar-text">
<a class="nav-link" href="{{ .Site.BaseURL | relURL }}#experience"
aria-label="experience">
{{ .Site.Params.experience.title | default "Experience" }}
</a>
</li>
{{ end }}
{{ if and (.Site.Params.education.enable | default false) (not (.Site.Params.navbar.menus.disableEducation | default false)) }}
<li class="nav-item navbar-text">
<a class="nav-link" href="{{ .Site.BaseURL | relURL }}#education"
aria-label="education">
{{ .Site.Params.education.title | default "Education" }}
</a>
</li>
{{ end }}
{{ if and (.Site.Params.projects.enable | default false) (not (.Site.Params.navbar.menus.disableProjects | default false)) }}
<li class="nav-item navbar-text">
<a class="nav-link" href="{{ .Site.BaseURL | relURL }}#projects"
aria-label="projects">
{{ .Site.Params.projects.title | default "Projects" }}
</a>
</li>
{{ end }}
{{ if and (.Site.Params.achievements.enable | default false) (not (.Site.Params.navbar.menus.disableAchievements | default false)) }}
<li class="nav-item navbar-text">
<a class="nav-link" href="{{ .Site.BaseURL | relURL }}#achievements"
aria-label="achievements">
{{ .Site.Params.achievements.title | default "Achievements" }}
</a>
</li>
{{ end }}
{{ if and (.Site.Params.contact.enable | default false) (not (.Site.Params.navbar.menus.disableContact | default false)) }}
<li class="nav-item navbar-text">
<a class="nav-link" href="{{ .Site.BaseURL | relURL }}#contact"
aria-label="contact">
{{ .Site.Params.contact.title | default "Contact" }}
</a>
</li>
{{ end }}
<!-- custom menus from the user -->
{{ range .Site.Menus.main }}
{{ if .HasChildren }}
<!-- Dropdown menu -->
<li class="nav-item navbar-text dropdown">
<a class="nav-link dropdown-toggle" href="{{ .URL }}" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="{{ .Title }}">
{{ .Name }}
</a>
<div class="dropdown-menu shadow-lg rounded" aria-labelledby="navbarDropdown">
{{ range .Children }}
<a class="dropdown-item text-center nav-link" href="{{ .URL }}"
title="{{ .Title }}">
{{ .Name }}
</a>
{{ end }}
</div>
</li>
{{else}}
<!-- Single menu item -->
<li class="nav-item navbar-text">
<a class="nav-link" href="{{.URL}}" title="{{ .Title }}">
{{ .Pre }}
{{ .Name }}
</a>
</li>
{{end}}
{{end}}
{{ if (not .Site.Params.theme.disableThemeToggle | default false) }}
<li class="nav-item navbar-text">
<!-- darkmode mode toggle -->
<div class="text-center">
<button id="theme-toggle">
<svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
<svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
</button>
</div>
</li>
{{ end }}
</ul>
</div>
</div>
</nav>
</header>