@reusable-ui/hamburger-menu-button/dist/styles/styles.js

A toggleable hamburger button for showing/hiding menu in Navbar.

// cssfn:
import { 
// writes css in javascript:
states, ifNthChild, children, style, 
// strongly typed of css variables:
switchOf, 
// reads/writes css variables configuration:
usesCssProps, 
// writes complex stylesheets in simpler way:
watchChanges, } from '@cssfn/core'; // writes css in javascript
// reusable-ui core:
import { 
// a typography management system:
typos, 
// size options of UI:
usesResizable, 
// a capability of UI to be highlighted/selected/activated:
ifActive, markActive, 
// a capability of UI to be focused:
ifFocus, 
// adds an interactive feel to a UI:
ifArrive, 
// a capability of UI to be clicked:
ifPress, } from '@reusable-ui/core'; // a set of reusable-ui packages which are responsible for building any component
// reusable-ui components:
import { 
// configs:
basics, cssBasicConfig, } from '@reusable-ui/basic'; // a base component
import { 
// styles:
onButtonStylesChange, usesButtonLayout, usesButtonVariants, usesButtonStates, } from '@reusable-ui/button'; // a base component
// internals:
import { 
// states:
usesHamburgerable, } from '../states/hamburgerable.js';
import { 
// elements:
svgElm, } from './elements.js';
import { 
// configs:
hamburgerMenuButtons, cssHamburgerMenuButtonConfig, } from './config.js';
// defaults:
const _defaultMarkActiveOptions = { mild: null };
// styles:
export const onHamburgerMenuButtonStylesChange = watchChanges(cssBasicConfig.onChange, onButtonStylesChange, cssHamburgerMenuButtonConfig.onChange);
export const usesHamburgerLayout = () => {
    // dependencies:
    // states:
    const { hamburgerableVars } = usesHamburgerable();
    return style({
        // appearances:
        overflow: 'visible',
        // sizes:
        // fills the entire parent text's height:
        inlineSize: 'auto',
        blockSize: `calc(1em * ${switchOf(basics.lineHeight, typos.lineHeight)})`,
        // children:
        ...children('polyline', {
            // appearances:
            stroke: 'currentColor',
            strokeWidth: '4',
            strokeLinecap: 'square',
            // animations:
            transformOrigin: '50% 50%',
            ...ifNthChild(0, 1, {
                transform: hamburgerableVars.topTransform,
                anim: hamburgerableVars.topAnim,
            }),
            ...ifNthChild(0, 2, {
                transform: hamburgerableVars.midTransform,
                anim: hamburgerableVars.midAnim,
            }),
            ...ifNthChild(0, 3, {
                transform: hamburgerableVars.btmTransform,
                anim: hamburgerableVars.btmAnim,
            }),
        }),
    });
};
export const usesHamburgerMenuButtonLayout = () => {
    return style({
        // layouts:
        ...usesButtonLayout(),
        ...style({
            // children:
            ...children(svgElm, {
                // layouts:
                ...usesHamburgerLayout(),
            }),
            // customize:
            ...usesCssProps(hamburgerMenuButtons), // apply config's cssProps
        }),
    });
};
export const usesHamburgerMenuButtonVariants = () => {
    // dependencies:
    // variants:
    const { resizableRule } = usesResizable(hamburgerMenuButtons);
    return style({
        // variants:
        ...usesButtonVariants(),
        ...resizableRule(),
    });
};
export const usesHamburgerMenuButtonStates = () => {
    // dependencies:
    // states:
    const { hamburgerableRule } = usesHamburgerable(hamburgerMenuButtons);
    const markActiveRule = markActive(_defaultMarkActiveOptions);
    return style({
        // states:
        ...usesButtonStates(),
        ...hamburgerableRule(),
        ...states([
            ifActive(markActiveRule),
            ifFocus(markActiveRule),
            ifArrive(markActiveRule),
            ifPress(markActiveRule),
        ]),
    });
};
export default () => style({
    // layouts:
    ...usesHamburgerMenuButtonLayout(),
    // variants:
    ...usesHamburgerMenuButtonVariants(),
    // states:
    ...usesHamburgerMenuButtonStates(),
});