Add viewport width & height conditions to modules

[wildhaber]

Description

When developing on a responsive website there are some elements that has to be cloned and used doubled - for example a navigation for the burger-style-menu on mobile and the mega-menu on a large screen.

Instead of loading both at once, what, if it would be possible to load a module only when a certain viewport width/height is valid, like:

import { ModuleSignature } from 'gluebert/module';

const NAVIGATION_MODULE = new ModuleSignature(`menu`, `.c-navigation`, { viewport: width: min: 123, max: 789 }, height: { min: 123, max: 678 }  })
    .setImportController(() => import('./navigation.controller').then((controller) => controller.NavigationController))
    .setImportStyles(() => import('./navigation.styles.scss'));

export {
    NAVIGATION_MODULE,
};