nucleo000/planilla
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revert "Refine: Make persistent navbar viewport-aware"

Browse Source 
This reverts commit 35c130f197.
This commit is contained in:
josedario87
2025-06-10 00:29:34 -06:00
parent 35c130f197
commit 09a2138c6c
1 changed files with 3 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
ui/src/App.vue
View File

@@ -1,32 +1,10 @@
<script setup>
import { watchEffect, computed, ref, onMounted, onUnmounted } from 'vue' // ensure all are imported
import { watchEffect, computed } from 'vue' // Added computed
import TopBar from '@/components/ui/TopBar.vue'
import NavBar from '@/components/ui/NavBar.vue'
import { useUi } from '@/stores/useUi'
const ui = useUi()
const viewportWidth = ref(0) // New reactive variable
const updateViewportWidth = () => { // New function
viewportWidth.value = window.innerWidth
}
onMounted(() => { // New lifecycle hook
updateViewportWidth()
window.addEventListener('resize', updateViewportWidth)
})
onUnmounted(() => { // New lifecycle hook
window.removeEventListener('resize', updateViewportWidth)
})
const NAVBAR_WIDTH = 240 // Defined constant
const MIN_CONTENT_WIDTH = 640 // Defined constant
const SHIFT_THRESHOLD = NAVBAR_WIDTH + MIN_CONTENT_WIDTH // Calculated threshold
const shouldShiftContent = computed(() => { // New computed property
return ui.sidebarOpen && ui.desktopNavbarPersistent && viewportWidth.value >= SHIFT_THRESHOLD
})
watchEffect(() => {
const root = document.documentElement
@@ -85,8 +63,8 @@ const transitionDurationStyle = computed(() => {
<!-- wrapper: deja espacio para TopBar (pt-14 = 56px) y, en desktop, para NavBar (pl-60) -->
<div :class="[
'pt-14 min-h-screen transition-[padding-left] duration-200', // Keep existing transition
shouldShiftContent.value ? 'md:pl-60' : '', // Use the computed property
'pt-14 min-h-screen transition-[padding-left] duration-200',
(ui.sidebarOpen && ui.desktopNavbarPersistent) ? 'md:pl-60' : '',
// The global style.css will handle base background and text color via body styling
// but we can keep specific overrides here if needed or theme classes.
// ui.theme === 'dark' ? 'bg-gray-800 text-gray-100' : 'bg-gray-100 text-gray-900'