File size: 5,064 Bytes
a03b3ba |
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 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 |
<script lang="ts">
// @ts-nocheck
import { clickOutside } from "./clickOutside.js";
export let js_components: any;
export let current_nav_link = "";
export let version_dropdown = false;
let docs_type = "js";
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"
/>
{#if version_dropdown}
<DropDown docs_type="js"></DropDown>
{/if}
<select
bind:value={docs_type}
on:change={() => {
if (docs_type == "python") {
window.location.href = "../../docs/";
}
}}
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="mx-4 block bg-gradient-to-r from-orange-100 to-orange-50 border border-orange-200 px-4 py-0.5 mr-2 rounded-full text-orange-800 mb-1 w-fit hover:shadow-lg"
>
<a class="inline-block" href="./storybook">
<svg
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
role="presentation"
class="w-4 inline-block mb-1"
>
<path
d="M.62 18.43 0 1.92A1.006 1.006 0 0 1 .944.88L14.984.002a1.005 1.005 0 0 1 1.069 1.004v17.989a1.006 1.006 0 0 1-1.051 1.004L1.58 19.396a1.006 1.006 0 0 1-.96-.967Z"
fill="#FF4785"
></path>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="m13.88.071-1.932.12-.094 2.267a.15.15 0 0 0 .24.126l.88-.668.744.586a.15.15 0 0 0 .243-.123l-.08-2.308Zm-1.504 7.59c-.353.275-2.989.462-2.989.071.056-1.493-.612-1.558-.984-1.558-.352 0-.946.106-.946.906 0 .815.868 1.275 1.887 1.815 1.447.767 3.2 1.696 3.2 4.032 0 2.24-1.82 3.476-4.14 3.476-2.395 0-4.488-.969-4.252-4.328.093-.394 3.138-.3 3.138 0-.038 1.386.278 1.794 1.076 1.794.613 0 .891-.338.891-.906 0-.861-.904-1.369-1.945-1.953-1.409-.791-3.067-1.722-3.067-3.859 0-2.132 1.466-3.554 4.084-3.554 2.618 0 4.047 1.4 4.047 4.064Z"
fill="#fff"
></path>
</svg>
Storybook →</a
>
</p>
<p class="font-semibold px-4 my-2 block">Components</p>
{#each js_components as name}
<a
class:current-nav-link={current_nav_link == name}
class="px-4 block thin-link"
href="./{name}/">{name}</a
>
{/each}
<p class="font-semibold px-4 my-2 block">Client</p>
<a
class:current-nav-link={current_nav_link == "js-client"}
class="px-4 block thin-link"
href="./js-client/">JS Client</a
>
</div>
|