antonioandre/nuxt-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: ajusta responsividade geral do projeto

Browse Source
This commit is contained in:
Antonio Andre
2026-05-28 19:04:17 -05:00
parent f5375c42ee
commit 98bdc96b6a
11 changed files with 198 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/components/Sidebar.vue
View File

@@ -1,27 +1,27 @@
<template>
<aside
class="sticky top-0 z-50 border-b border-[#e7e5e4] bg-white/90 backdrop-blur lg:h-screen lg:w-[280px] lg:shrink-0 lg:border-b-0 lg:border-r">
<div class="flex h-full min-h-0 flex-col gap-4 px-4 py-3 lg:px-5 lg:py-6">
class="sticky top-0 z-50 w-full min-w-0 border-b border-[#e7e5e4] bg-white/90 backdrop-blur lg:fixed lg:inset-y-0 lg:left-0 lg:h-screen lg:w-[248px] lg:border-b-0 lg:border-r xl:w-[280px]">
<div class="flex h-full min-h-0 w-full min-w-0 flex-col gap-4 px-3 py-3 sm:px-4 lg:px-5 lg:py-6">
<NuxtLink to="/home"
class="flex items-center gap-3 rounded-2xl px-1 text-base font-semibold tracking-[0.16px] text-[#0c0a09] lg:px-0">
<span class="inline-flex h-11 w-11 items-center justify-center rounded-xl bg-[#292524] text-white">
class="flex min-w-0 items-center gap-3 rounded-2xl px-1 text-base font-semibold tracking-[0.16px] text-[#0c0a09] lg:px-0">
<span class="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-[#292524] text-white">
<Icon name="mdi:gamepad-variant" class="text-xl" />
</span>
<span>GameVerse</span>
<span class="min-w-0 truncate">GameVerse</span>
</NuxtLink>
<nav
class="flex min-w-0 gap-2 overflow-x-auto pb-1 lg:min-h-0 lg:flex-1 lg:flex-col lg:overflow-y-auto lg:overflow-x-visible lg:pb-0"
class="flex w-full min-w-0 gap-2 overflow-x-auto pb-1 lg:min-h-0 lg:flex-1 lg:flex-col lg:overflow-y-auto lg:overflow-x-visible lg:pb-0"
aria-label="Rotas internas">
<NuxtLink v-for="item in navigationItems" :key="item.to" :to="item.to"
:aria-current="isActive(item.to) ? 'page' : undefined" :class="[
'inline-flex h-10 shrink-0 items-center gap-2 rounded-full border px-4 text-[14px] font-medium leading-none transition lg:w-full lg:justify-start',
'inline-flex h-10 shrink-0 items-center gap-2 rounded-full border px-4 text-[14px] font-medium leading-none transition lg:w-full lg:min-w-0 lg:justify-start',
isActive(item.to)
? 'border-[#292524] bg-[#292524] text-white'
: 'border-[#d6d3d1] bg-transparent text-[#0c0a09] hover:border-[#0c0a09]'
]">
<Icon :name="item.icon" class="text-base" />
<span>{{ item.label }}</span>
<Icon :name="item.icon" class="shrink-0 text-base" />
<span class="min-w-0 truncate">{{ item.label }}</span>
</NuxtLink>
</nav>