Ryan/drop
1
0
Fork 0
mirror of https://github.com/Drop-OSS/drop.git synced 2025-11-13 16:22:39 +10:00
Code Issues Packages Projects Releases Wiki Activity

starting docs infra

Browse Source
This commit is contained in:
DecDuck
2024-10-25 13:15:46 +11:00
parent 24a0d118f2
commit 7d2a1c6952
16 changed files with 1647 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
layouts/docs.vue Normal file
View File

@ -0,0 +1,124 @@
<template>
<div class="bg-zinc-950 min-h-screen">
<TransitionRoot as="template" :show="sidebarOpen">
<Dialog
class="relative z-50 lg:hidden"
@close="sidebarOpen = false"
>
<TransitionChild
as="template"
enter="transition-opacity ease-linear duration-300"
enter-from="opacity-0"
enter-to="opacity-100"
leave="transition-opacity ease-linear duration-300"
leave-from="opacity-100"
leave-to="opacity-0"
>
<div class="fixed inset-0 bg-gray-900/80" />
</TransitionChild>
<div class="fixed inset-0 flex">
<TransitionChild
as="template"
enter="transition ease-in-out duration-300 transform"
enter-from="-translate-x-full"
enter-to="translate-x-0"
leave="transition ease-in-out duration-300 transform"
leave-from="translate-x-0"
leave-to="-translate-x-full"
>
<DialogPanel
class="relative mr-16 flex w-full max-w-xs flex-1"
>
<TransitionChild
as="template"
enter="ease-in-out duration-300"
enter-from="opacity-0"
enter-to="opacity-100"
leave="ease-in-out duration-300"
leave-from="opacity-100"
leave-to="opacity-0"
>
<div
class="absolute left-full top-0 flex w-16 justify-center pt-5"
>
<button
type="button"
class="-m-2.5 p-2.5"
@click="sidebarOpen = false"
>
<span class="sr-only"
>Close sidebar</span
>
<XMarkIcon
class="h-6 w-6 text-white"
aria-hidden="true"
/>
</button>
</div>
</TransitionChild>
<!-- Sidebar component, swap this element with another sidebar if you like -->
<DocsSidebar />
</DialogPanel>
</TransitionChild>
</div>
</Dialog>
</TransitionRoot>
<!-- Static sidebar for desktop -->
<div
class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col"
>
<!-- Sidebar component, swap this element with another sidebar if you like -->
<DocsSidebar />
</div>
<div class="lg:pl-72">
<div
class="flex sticky top-0 z-40 lg:hidden h-16 shrink-0 items-center gap-x-4 border-b border-zinc-700 bg-zinc-950 px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8"
>
<button
type="button"
class="-m-2.5 p-2.5 text-zinc-300 lg:hidden"
@click="sidebarOpen = true"
>
<span class="sr-only">Open sidebar</span>
<Bars3Icon class="h-6 w-6" aria-hidden="true" />
</button>
<Wordmark class="mb-[0.5px]" />
<NuxtLink
href="/"
class="ml-auto rounded bg-blue-600 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
>
Home &rarr;
</NuxtLink>
</div>
<main class="py-10">
<div class="px-4 sm:px-6 lg:px-8">
<slot />
</div>
</main>
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
import {
Dialog,
DialogPanel,
TransitionChild,
TransitionRoot,
} from "@headlessui/vue";
import { Bars3Icon, XMarkIcon } from "@heroicons/vue/24/outline";
import { ChevronDownIcon, MagnifyingGlassIcon } from "@heroicons/vue/20/solid";
const sidebarOpen = ref(false);
useHead({
titleTemplate: (title) =>
title ? `${title} | Drop Documentation` : "Drop Documentation",
});
</script>