michaelh/hugo-academic-mirror
1
0
Fork 0
mirror of https://github.com/gcushen/hugo-academic.git synced 2025-07-25 18:50:51 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(navbar): port logo, submenus, button

Browse source 
add `header.navbar.fixed_to_top` bool option

make biography blox compatible with dark section class

center views in Collections and List tpl

add features and feature_icon options to cta-image-paragraph view
This commit is contained in:
George Cushen 2023-12-14 23:55:19 +00:00
commit 5a4b7ec721
22 changed files with 3910 additions and 1654 deletions
Download patch file Download diff file Expand all files Collapse all files

122
modules/blox-tailwind/layouts/partials/components/headers/navbar-simple.html Normal file
View file

@ -0,0 +1,122 @@
<!-- Main navigation container -->
{{/* Show site search? */}}
{{ $show_search := site.Params.header.navbar.show_search | default false }}
<nav
class="relative flex w-full flex-nowrap items-center justify-between bg-white py-2 text-neutral-500 shadow-lg hover:text-neutral-700 focus:text-neutral-700 dark:bg-slate-900 lg:flex-wrap lg:justify-start lg:py-4"
data-te-navbar-ref>
<div class="flex w-full flex-wrap items-center justify-between px-3">
<!-- Hamburger button for mobile view -->
<button
class="block border-0 bg-transparent px-2 text-neutral-500 hover:no-underline hover:shadow-none focus:no-underline focus:shadow-none focus:outline-none focus:ring-0 dark:text-neutral-200 lg:hidden"
type="button"
data-te-collapse-init
data-te-target="#collapse-main-navbar"
aria-controls="collapse-main-navbar"
aria-expanded="false"
aria-label="Toggle navigation" onclick="toggleNavbar('collapse-main-navbar')">
<!-- Hamburger icon -->
<span class="[&>svg]:w-7">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="h-7 w-7">
<path
fill-rule="evenodd"
d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM3 12a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 12zm0 5.25a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75z"
clip-rule="evenodd" />
</svg>
</span>
</button>
<!-- Collapsible navbar container -->
<div
class="!visible mt-2 hidden flex-grow basis-[100%] items-center justify-center lg:mt-0 lg:!flex lg:basis-auto"
id="collapse-main-navbar"
data-te-collapse-item>
<!-- Main links -->
{{- $currentPage := . }}
<ul
class="list-style-none flex flex-col pl-0 lg:mt-1 lg:flex-row items-center"
data-te-navbar-nav-ref>
{{- range site.Menus.main }}
{{- $menu_item_url := (cond (strings.HasSuffix .URL "/") .URL (printf "%s/" .URL) ) | absLangURL }}
{{- $page_url:= $currentPage.Permalink | absLangURL }}
{{- $active := eq $menu_item_url $page_url -}}
{{- $activeClass := cond $active "active" "" -}}
<!-- Home link [&.active]:text-bold [&.active]:text-black/90 dark:[&.active]:text-neutral-300-->
<li
class="my-4 pl-2 lg:my-0 lg:pl-2 lg:pr-1"
data-te-nav-item-ref>
<a
class="lg:px-2 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200
[&.active]:font-bold [&.active]:text-black/90 dark:[&.active]:text-white {{ $activeClass }}"
aria-current="page"
href="{{ .URL | relLangURL }}"
data-te-nav-link-ref
>{{- .Name -}}</a
>
</li>
{{ end }}
{{ if $show_search }}
<li class="my-4 pl-2 lg:my-0 lg:pl-2 lg:pr-1">
<a
class="lg:px-2 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200
[&.active]:font-bold [&.active]:text-black/90 dark:[&.active]:text-white"
aria-current="page"
href="#"
id="search_toggle"
>{{- i18n "search" -}}</a
>
</li>
{{ end }}
{{ $show_theme_chooser := site.Params.header.navbar.show_theme_chooser | default true }}
{{ if $show_theme_chooser }}
<li class="lg:px-2 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200
[&.active]:font-bold [&.active]:text-black/90 dark:[&.active]:text-white">
<button class="theme-toggle mt-1" accesskey="t" title="">
<svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="dark:hidden">
<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="18" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class=" dark:block [&:not(dark)]:hidden">
<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>
</li>
{{ end }}
{{ $show_translations := site.Params.header.navbar.show_translations | default true }}
{{ if .IsTranslated | and $show_translations }}
<li class="lg:px-2 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200
[&.active]:font-bold [&.active]:text-black/90 dark:[&.active]:text-white">
{{- partial "components/language-chooser.html" (dict "page" .) -}}
</li>
{{ end }}
</ul>
</div>
</div>
</nav>
{{ if $show_search }}
<div id="search" class="hidden p-3"></div>
{{ end }}
<script>
function toggleNavbar(collapseID){
document.getElementById(collapseID).classList.toggle("hidden");
document.getElementById(collapseID).classList.toggle("flex");
}
</script>