Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/flo-bit/tiny-docs. quick setup, simple, minimalistic docs for your github project flo-bit.dev/tiny-docs
Something went wrong. Try again.
2.9 kB · 107 lines
Astro
at v1
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108---import { config } from "../../config";import ThemeToggle from "./ThemeToggle.astro";import Search from "./search/Search.svelte";import SocialIcons from "./SocialIcons.astro";import { hasSidebar } from "../content-utils";
const { fullWidth = false } = Astro.props;
const sidebar = await hasSidebar();---
<header class:list={[ "fixed top-0 right-0 left-0 z-30", fullWidth || !sidebar ? "" : "lg:left-72 xl:left-80", ]}> <nav class="flex items-center z-10 h-16 justify-between lg:justify-end p-2 px-6 w-full" aria-label="Global" > { sidebar ? ( <div class="lg:hidden z-10"> <button popovertarget="mobile-menu"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6 text-base-900 dark:text-base-200" > <path fill-rule="evenodd" d="M3 9a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 9Zm0 6.75a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd" /> </svg> </button> </div> ) : ( <div /> ) }
<div class="flex gap-x-8 items-center z-10"> <div class="flex gap-x-4 items-center"> {config.SEARCH_ENABLED && sidebar ? <Search client:visible /> : null}
{config.SHOW_THEME_TOGGLE ? <ThemeToggle /> : null} </div> <div class="flex gap-x-4 items-center"> <SocialIcons /> </div> </div> </nav> <div class="backdrop inset-0 absolute backdrop-blur-md pointer-events-none bg-gradient-to-b from-base-50/90 via-base-50/0 dark:from-base-950/90 dark:via-base-950/0" > </div>
<div class="backdrop-edge absolute left-0 right-0 bottom-0 bg-base-900/10 dark:bg-base-500/10 backdrop-blur translate-y-full pointer-events-none" > </div></header>
<style> /** better frosted glass effect adopted from https://www.joshwcomeau.com/css/backdrop-filter/ */ header { --thickness: 1px; }
@supports (mask-image: none) or (-webkit-mask-image: none) { .backdrop { height: 200%; -webkit-mask-image: linear-gradient( to bottom, black 0% 50%, transparent 50% 100% ); mask-image: linear-gradient( to bottom, black 0% 50%, transparent 50% 100% ); } .backdrop-edge { height: 100%; inset: 0; -webkit-mask-image: linear-gradient( to bottom, black 0, black var(--thickness), transparent var(--thickness) ); mask-image: linear-gradient( to bottom, black 0, black var(--thickness), transparent var(--thickness) );
filter: brightness(1.5); } }</style>