mirror of
https://github.com/bitwarden/browser
synced 2026-02-02 01:33:22 +00:00
28 lines
951 B
TypeScript
28 lines
951 B
TypeScript
/**
|
|
* Breakpoint definitions in pixels matching Tailwind CSS default breakpoints.
|
|
* These values must stay in sync with tailwind.config.base.js theme.extend configuration.
|
|
*
|
|
* @see {@link https://tailwindcss.com/docs/responsive-design} for tailwind default breakpoints
|
|
* @see {@link /libs/components/src/stories/responsive-design.mdx} for design system usage
|
|
*/
|
|
export const BREAKPOINTS = {
|
|
sm: 640,
|
|
md: 768,
|
|
lg: 1024,
|
|
xl: 1280,
|
|
"2xl": 1536,
|
|
};
|
|
|
|
/**
|
|
* Checks if the current viewport is at or larger than the specified breakpoint.
|
|
* @param size The breakpoint to check.
|
|
* @returns True if the viewport is at or larger than the breakpoint, false otherwise.
|
|
*/
|
|
export const isAtOrLargerThanBreakpoint = (size: keyof typeof BREAKPOINTS): boolean => {
|
|
if (typeof window === "undefined" || !window.matchMedia) {
|
|
return false;
|
|
}
|
|
const query = `(min-width: ${BREAKPOINTS[size]}px)`;
|
|
return window.matchMedia(query).matches;
|
|
};
|