Дмитрий
32 lines
1.1 KiB
TypeScript
32 lines
1.1 KiB
TypeScript
import { computed, type ComputedRef } from 'vue';
|
|
import { useDisplay } from 'vuetify';
|
|
|
|
export type LayoutTier = 'phone' | 'tablet' | 'desktop';
|
|
|
|
/**
|
|
* Единый источник «яруса» экрана для адаптива портала.
|
|
* phone < 600px (нижнее меню-вкладки)
|
|
* tablet 600..1279px (узкая колонка-иконки / rail)
|
|
* desktop >= 1280px (полный сайдбар 232px, как сейчас)
|
|
*/
|
|
export function useLayoutTier(): {
|
|
tier: ComputedRef<LayoutTier>;
|
|
isPhone: ComputedRef<boolean>;
|
|
isTablet: ComputedRef<boolean>;
|
|
isDesktop: ComputedRef<boolean>;
|
|
} {
|
|
const display = useDisplay();
|
|
const tier = computed<LayoutTier>(() => {
|
|
const w = display.width.value;
|
|
if (w < 600) return 'phone';
|
|
if (w < 1280) return 'tablet';
|
|
return 'desktop';
|
|
});
|
|
return {
|
|
tier,
|
|
isPhone: computed(() => tier.value === 'phone'),
|
|
isTablet: computed(() => tier.value === 'tablet'),
|
|
isDesktop: computed(() => tier.value === 'desktop'),
|
|
};
|
|
}
|