fix: sidebar expansion impacts layout

[J-HernandezInzunza]

fixes: #1020

Description

Improved sidebar close button accessibility by adding text label and adjusting styles to fix layout issue where main content was pushed down when the sidebar was expanded in the tablet breakpoint. Ensuring button remains in the DOM for A11y purposes, but has no effective height that impacts layout.

Markup:

Details

// Before
<div v-if="isFullScreenSidebar" class="flex justify-end">
  <VaButton class="px-4 py-4" icon="md_close" preset="plain" @click="onCloseSidebarButtonClick" />
</div>

// After
<div v-if="isFullScreenSidebar" class="flex justify-end h-0">
  <VaButton
    class="px-4 py-4"
    icon="md_close"
    preset="plain"
    text-opacity="0"
    @click="onCloseSidebarButtonClick"
  >
    Close Sidebar
  </VaButton>
</div>

Before:

After:

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Improvement/refactoring (non-breaking change that doesn't add any feature but make things better)

[netlify]

👷 Deploy request for vuestic-admin-demo pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	c251360