File size: 3,711 Bytes
0bd62e5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 |
<script lang="ts">
// @ts-nocheck
import { clickOutside } from "./clickOutside.js";
export let items: any;
export let title: string;
export let current_nav_link = "";
let docs_type = "python";
let show_nav = false;
let searchTerm = "";
let searchBar: HTMLInputElement;
const search = () => {
let links = document.querySelectorAll(
".navigation a"
) as NodeListOf<HTMLAnchorElement>;
links.forEach((link) => {
let linkText = link.innerText.toLowerCase();
if (linkText.includes(searchTerm.toLowerCase())) {
link.style.display = "block";
} else {
link.style.display = "none";
}
});
};
function onKeyDown(e: KeyboardEvent) {
if (e.key.toLowerCase() === "k" && (e.metaKey || e.ctrlKey)) {
e.preventDefault();
searchBar.focus();
}
if (e.key == "Escape") {
searchTerm = "";
searchBar.blur();
search();
}
}
import DropDown from "$lib/components/VersionDropdown.svelte";
</script>
<svelte:window on:keydown={onKeyDown} />
<section
class="top-0 fixed -ml-4 flex items-center p-4 rounded-br-lg backdrop-blur-lg z-50 bg-gray-200/50 lg:hidden"
id="menu-bar"
>
<button
on:click={() => (show_nav = !show_nav)}
type="button"
class="text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300"
>
<svg width="24" height="24"
><path
d="M5 6h14M5 12h14M5 18h14"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
/></svg
>
</button>
</section>
<div
use:clickOutside
on:click_outside={() => (show_nav = false)}
class:hidden={!show_nav}
class="min-w-[200px] navigation mobile-nav overflow-y-auto fixed backdrop-blur-lg z-50 bg-gray-200/50 pr-6 pl-4 py-4 -ml-4 h-full inset-0 w-5/6 lg:inset-auto lg:ml-0 lg:z-0 lg:backdrop-blur-none lg:navigation lg:p-0 lg:pb-4 lg:h-screen lg:leading-relaxed lg:sticky lg:top-0 lg:text-md lg:block rounded-t-xl lg:bg-gradient-to-r lg:from-white lg:to-gray-50 lg:overflow-x-clip lg:w-2/12"
id="mobile-nav"
>
<button
on:click={() => (show_nav = !show_nav)}
type="button"
class="absolute z-10 top-4 right-4 w-2/12 h-4 flex items-center justify-center text-grey-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300 p-4 lg:hidden"
tabindex="0"
>
<svg viewBox="0 0 10 10" class="overflow-visible" style="width: 10px"
><path
d="M0 0L10 10M10 0L0 10"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
/></svg
>
</button>
<div
class="w-full sticky top-0 bg-gradient-to-r from-white to-gray-50 z-10 hidden lg:block my-4 ml-4"
>
<input
bind:value={searchTerm}
on:input={search}
bind:this={searchBar}
id="search"
type="search"
class="w-4/5 rounded-md border-gray-200 focus:placeholder-transparent focus:shadow-none focus:border-orange-500 focus:ring-0"
placeholder="Search ⌘-k / ctrl-k"
autocomplete="off"
/>
<!-- <DropDown></DropDown> -->
<!-- <select
bind:value={docs_type}
on:change={() => {
if (docs_type == "js") {
window.location.href = "/main/docs/js/";
}
}}
class="rounded-md border-gray-200 focus:placeholder-transparent focus:shadow-none focus:border-orange-500 focus:ring-0 text-xs mt-2 py-1 pl-2 pr-7 font-mono"
>
<option value="js">js</option>
<option value="python">python</option>
</select> -->
</div>
<p class="font-semibold px-4 my-2 block">{title}</p>
{#each Object.entries(items) as [name, url] (name)}
<a
class:current-nav-link={current_nav_link == name}
class="px-4 block thin-link"
href={url}>{name}</a
>
{/each}
</div>
|