nerdfisch: DevBits

// Retrieve all computed styles from the root HTML element (:root)
const rootStyles = getComputedStyle(document.documentElement);

// Get the value of the CSS variable --Breakpoint.
// Use a fallback (e.g., 768px) if the variable is not defined.
const breakpoint = rootStyles.getPropertyValue('--Breakpoint').trim() || '768px';

// Create a MediaQueryList based on the breakpoint value
const mediaQuery = window.matchMedia(`(min-width: ${breakpoint})`);

// Function that runs when the viewport is at or above the breakpoint
function handleDesktopLayout() {
    console.log("Viewport is at or above the breakpoint.");
}

// Function that runs when the viewport drops below the breakpoint
function handleMobileLayout() {
    console.log("Viewport is below the breakpoint.");
}

// Early return for the initial state:
// If the viewport does NOT meet the breakpoint requirement, run mobile logic and exit
if (!mediaQuery.matches) {
    handleMobileLayout();
    // No desktop logic needed at this point
} else {
    handleDesktopLayout();
}

// Listen for changes in viewport size relative to the breakpoint
mediaQuery.addEventListener('change', (event) => {
    if (event.matches) {
        // The viewport just became equal to or larger than the breakpoint
        handleDesktopLayout();
    } else {
        // The viewport just became smaller than the breakpoint
        handleMobileLayout();
    }
});

// mailsender command for the "Symfony Mailer" module for drupal 10
$settings['mailer_sendmail_commands'] = [
  '/usr/local/bin/mailpit sendmail -t --smtp-addr=mail:1025',
];

// For single value fields.
$entity->field_name->value;

// If you don`t know the main property.
$main_property_name = $entity->field_name->getMainPropertyName();

// For multiple value fields.
$entity->field_name->getValue();