kris/reacord
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

menu improvements

Browse Source
This commit is contained in:
itsMapleLeaf
2023-03-12 16:28:51 -05:00
parent af3d1c5058
commit f0ad743080
3 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/website/src/components/menu-item.astro
View File

@@ -6,7 +6,7 @@ export type Props = {
--- ---
<div <div
class="px-3 py-2 transition text-left font-medium block w-full opacity-50 inline-flex gap-1 items-center" class="px-3 py-2 transition text-left font-medium block w-full opacity-50 inline-flex gap-1 items-center hover:opacity-100 hover:text-emerald-500"
> >
<Astro.props.icon class="inline-icon" className="inline-icon" /> <Astro.props.icon class="inline-icon" className="inline-icon" />
<span class="flex-1">{Astro.props.label}</span> <span class="flex-1">{Astro.props.label}</span>

6
packages/website/src/components/menu.astro
View File

@@ -1,9 +1,11 @@
<details class="md:hidden relative" data-menu> <details class="md:hidden relative" data-menu>
<summary class="list-none p-2 -m-2"> <summary
class="list-none p-2 -m-2 cursor-pointer hover:text-emerald-500 transition"
>
<slot name="button" /> <slot name="button" />
</summary> </summary>
<div <div
class="w-48 max-h-[calc(100vh-5rem)] bg-slate-800 shadow rounded-lg overflow-x-hidden overflow-y-auto top-[calc(100%+8px)] right-0 absolute" class="w-48 max-h-[calc(100vh-5rem)] bg-slate-800 shadow rounded-lg overflow-x-hidden overflow-y-auto top-[calc(100%+8px)] right-0 absolute z-10"
> >
<slot /> <slot />
</div> </div>

2
packages/website/src/pages/index.astro
View File

@@ -20,7 +20,7 @@ import MainNavigation from "~/components/main-navigation.astro"
<div class="flex flex-col gap-4 my-auto px-4"> <div class="flex flex-col gap-4 my-auto px-4">
<AppLogo class="w-full max-w-lg mx-auto" /> <AppLogo class="w-full max-w-lg mx-auto" />
<div class="max-w-md w-full mx-auto"> <div class="max-w-md w-full mx-auto isolate">
<LandingAnimation client:only /> <LandingAnimation client:only />
</div> </div>