File size: 2,026 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 |
<script lang="ts">
// @ts-nocheck
import { clickOutside } from "./clickOutside.js";
export let library_pages: any;
export let current_nav_link = "";
export let show_dropdown = true;
export let show_nav = false;
import DropDown from "$lib/components/VersionDropdown.svelte";
</script>
<div
class:hidden={!show_nav}
class="fixed inset-0 bg-black/20 backdrop-blur-md lg:hidden z-50"
></div>
<div
use:clickOutside
on:click_outside={() => (show_nav = false)}
class:hidden={!show_nav}
class="max-w-max min-w-[75%] navigation mobile-nav shadow overflow-y-auto fixed backdrop-blur-lg z-50 bg-white pr-6 pl-4 py-4 -ml-4 h-full inset-0 lg:inset-auto lg:shadow-none 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 lg:rounded-t-xl lg:bg-gradient-to-r lg:from-white lg:to-gray-50 lg:overflow-x-clip lg:w-2/12 lg:min-w-0"
id="mobile-nav"
>
<button
on:click={() => (show_nav = false)}
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"
data-svelte-h="svelte-1askwj0"
>
<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"
></path></svg
>
</button>
{#if show_dropdown}
<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"
>
<DropDown></DropDown>
</div>
{/if}
{#each library_pages as category_pages}
<p class="font-semibold px-4 my-2 block">{category_pages.category}</p>
{#each category_pages.pages as page}
<a
class:current-nav-link={current_nav_link == page.name}
class="thin-link px-4 block leading-8"
href={page.name}>{page.pretty_name}</a
>
{/each}
{/each}
</div>
|