CraftAttack/website
4
0
Fork 0
Code Issues 1 Pull Requests Actions Activity

expand menu horizontal if screen height is small
All checks were successful
delpoy / build-and-deploy (push) Successful in 52s
Details

Browse Source
This commit is contained in:
Ruben Otto
2024-11-30 16:48:48 +01:00
parent 7ec1d8ab1d
commit f9de94db08
1 changed files with 16 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/routes/+layout.svelte
View File

@@ -82,7 +82,7 @@
</main> </main>
<nav> <nav>
<div <div
class="fixed bottom-4 right-4 sm:left-4 sm:right-[initial] group/menu-bar flex flex-col-reverse justify-center items-center z-50" class="fixed bottom-4 right-4 sm:left-4 sm:right-[initial] group/menu-bar flex flex-col-reverse justify-center items-center z-50 main-menu"
class:hidden={onAdminPage} class:hidden={onAdminPage}
bind:this={nav} bind:this={nav}
> >
@@ -120,7 +120,7 @@
class:hidden={!showMenuPermanent} class:hidden={!showMenuPermanent}
class={isTouch ? 'pb-3' : 'group-hover/menu-bar:block pb-3'} class={isTouch ? 'pb-3' : 'group-hover/menu-bar:block pb-3'}
> >
<ul class="flex flex-col bg-base-200 rounded"> <ul class="bg-base-200 rounded">
{#each navPaths as navPath, i} {#each navPaths as navPath, i}
<li <li
class="flex justify-center tooltip tooltip-left sm:tooltip-right" class="flex justify-center tooltip tooltip-left sm:tooltip-right"
@@ -168,3 +168,17 @@
</div> </div>
</footer> </footer>
{/if} {/if}
<style lang="scss">
@media (max-height: 450px) {
.main-menu {
flex-direction: row;
}
.main-menu > div {
padding: 0.25rem 0 0 0.5rem;
}
.main-menu li {
display: inline-block;
}
}
</style>