flightsimulatorplatfrom/OpenSquawk
1
0
Fork 0
mirror of https://github.com/OpenSquawk/OpenSquawk synced 2026-08-06 17:53:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: enforce small-screen nav visibility

Browse Source
This commit is contained in:
itsrubberduck
2026-04-23 11:10:17 +02:00
parent 329deca2ae
commit e716262fe2
1 changed files with 30 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
app/pages/index.vue
View File

@@ -31,7 +31,7 @@
</div>
<div class="flex items-center gap-2 sm:gap-3">
<NuxtLink to="/roadmap" class="btn btn-ghost whitespace-nowrap btn-compact hidden md:inline-flex">
<NuxtLink to="/roadmap" class="btn btn-ghost whitespace-nowrap btn-compact topnav-secondary-action topnav-roadmap-action">
<v-icon icon="mdi-map-marker-path" size="18" />
Roadmap
</NuxtLink>
@@ -40,7 +40,7 @@
external
target="_blank"
rel="noopener"
class="btn btn-ghost whitespace-nowrap btn-compact hidden lg:inline-flex"
class="btn btn-ghost whitespace-nowrap btn-compact topnav-secondary-action topnav-github-action"
>
<v-icon icon="mdi-github" size="18" />
GitHub
@@ -83,8 +83,8 @@
:target="item.external ? '_blank' : undefined"
:rel="item.external ? 'noopener' : undefined"
:class="[
'items-center justify-between gap-3 rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-white/80 transition hover:bg-white/10',
item.hideOnSmall ? 'hidden sm:flex' : 'flex'
'flex items-center justify-between gap-3 rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-white/80 transition hover:bg-white/10',
item.hideOnSmall ? 'mobile-nav-link--hide-small' : ''
]"
@click="handleMobileNavLinkClick($event, item)"
>
@@ -1775,6 +1775,22 @@ useHead(() => ({
font-size: 0.75rem;
}
.topnav-secondary-action {
display: none;
}
@media (min-width: 768px) {
.topnav-roadmap-action {
display: inline-flex;
}
}
@media (min-width: 1024px) {
.topnav-github-action {
display: inline-flex;
}
}
@media (min-width: 640px) {
.btn-compact {
padding: 0.6rem 1rem;
@@ -1817,6 +1833,16 @@ useHead(() => ({
transform: translateY(-8px);
}
.mobile-nav-link--hide-small {
display: none;
}
@media (min-width: 640px) {
.mobile-nav-link--hide-small {
display: flex;
}
}
.mobile-toggle {
@apply inline-flex items-center justify-center rounded-2xl border border-white/10 bg-white/5 text-white transition hover:bg-white/10;
width: 44px;