pragmate-ui/menu/menu.browser.mjs

An advanced, on-demand React UI library optimized for BeyondJS. Pragmate UI provides modular, responsive, and accessible components with a focus on efficient bundle sizes and a streamlined development process.

import * as dependency_0 from '@beyond-js/kernel/bundle';
import * as dependency_1 from '@beyond-js/kernel/styles';
import * as dependency_2 from 'react';
import * as dependency_3 from 'pragmate-ui/icons';
import * as dependency_4 from 'pragmate-ui/image';
import * as dependency_5 from '@beyond-js/kernel/routing';

const {Bundle: __Bundle} = dependency_0;
const __pkg = new __Bundle({"module":{"vspecifier":"pragmate-ui@1.0.1/menu"},"type":"code"}, import.meta.url).package();;

__pkg.dependencies.update([['@beyond-js/kernel/styles', dependency_1],['react', dependency_2],['pragmate-ui/icons', dependency_3],['pragmate-ui/image', dependency_4],['@beyond-js/kernel/routing', dependency_5]]);

brequire('@beyond-js/kernel/styles').styles.register('pragmate-ui@1.0.1/menu')


const ims = new Map();

/*************************
INTERNAL MODULE: ./content
*************************/

ims.set('./content', {hash: 2796574182, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SideMenuContent = void 0;
var _react = require("react");
var _list = require("./list");
var _icons = require("pragmate-ui/icons");
var _context = require("./context");
const SideMenuContent = ({
  title
}) => {
  const {
    toggleMenu,
    isOpen
  } = (0, _context.useMenuContext)();
  const cls = isOpen ? "side-menu__content" : "side-menu__content__hide side-menu__content";
  const defaultTitle = title ?? "Title";
  return _react.default.createElement("div", {
    className: cls
  }, _react.default.createElement(_icons.IconButton, {
    icon: "close",
    className: "side-menu__toggle",
    onClick: toggleMenu
  }), _react.default.createElement("header", null, _react.default.createElement("span", null, defaultTitle)), _react.default.createElement(_list.SideMenuList, null));
};
exports.SideMenuContent = SideMenuContent;
}});

/*************************
INTERNAL MODULE: ./context
*************************/

ims.set('./context', {hash: 4010051245, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useMenuContext = exports.MenuContext = void 0;
var _react = require("react");
const MenuContext = exports.MenuContext = (0, _react.createContext)({});
const useMenuContext = () => (0, _react.useContext)(MenuContext);
exports.useMenuContext = useMenuContext;
}});

/***********************
INTERNAL MODULE: ./index
***********************/

ims.set('./index', {hash: 3369479835, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Menu = void 0;
var _react = require("react");
var _content = require("./content");
var _icons = require("pragmate-ui/icons");
var _context = require("./context");
/*bundle*/const Menu = ({
  items,
  title
}) => {
  const [isOpen, setIsOpen] = (0, _react.useState)(false);
  const toggleMenu = () => {
    setIsOpen(!isOpen);
  };
  return _react.default.createElement(_context.MenuContext.Provider, {
    value: {
      isOpen,
      items,
      toggleMenu
    }
  }, _react.default.createElement(_icons.IconButton, {
    onClick: toggleMenu,
    icon: "menu"
  }), _react.default.createElement(_content.SideMenuContent, {
    title: title
  }), isOpen && _react.default.createElement("div", {
    onClick: toggleMenu,
    className: "background-black"
  }));
};
exports.Menu = Menu;
}});

/***********************
INTERNAL MODULE: ./items
***********************/

ims.set('./items', {hash: 2650623906, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.menuItems = void 0;
const menuItems = exports.menuItems = [{
  title: "Sub title",
  link: "#",
  icon: "user"
}, {
  title: "Sub title",
  link: "#",
  icon: "favorite"
}, {
  title: "Sub title",
  link: "#",
  icon: "star"
}, {
  title: "Sub title",
  link: "#",
  icon: "off"
}, {
  title: "Sub title",
  link: "#",
  icon: "bell"
}];
}});

/****************************
INTERNAL MODULE: ./list/index
****************************/

ims.set('./list/index', {hash: 1267445682, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SideMenuList = void 0;
var _react = require("react");
var _context = require("../context");
var _item = require("./item");
const SideMenuList = () => {
  const {
    items
  } = (0, _context.useMenuContext)();
  const output = items.map(item => _react.default.createElement(_item.SideMenuItem, {
    key: item.icon,
    item: item
  }));
  return _react.default.createElement("ul", {
    className: 'side-menu__list'
  }, output);
};
exports.SideMenuList = SideMenuList;
}});

/***************************
INTERNAL MODULE: ./list/item
***************************/

ims.set('./list/item', {hash: 2834511559, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SideMenuItem = void 0;
var _react = require("react");
var _icons = require("pragmate-ui/icons");
var _routing = require("@beyond-js/kernel/routing");
var _context = require("../context");
const SideMenuItem = ({
  item
}) => {
  const {
    title,
    link,
    icon
  } = item;
  const {
    toggleMenu
  } = (0, _context.useMenuContext)();
  const onClick = event => {
    event.preventDefault();
    event.stopPropagation();
    _routing.routing.pushState(link);
    toggleMenu();
  };
  return _react.default.createElement("li", {
    className: "side-menu__item"
  }, _react.default.createElement("a", {
    onClick: onClick
  }, _react.default.createElement(_icons.Icon, {
    icon: icon
  }), _react.default.createElement("span", null, title)));
};
exports.SideMenuItem = SideMenuItem;
}});

__pkg.exports.descriptor = [{"im":"./index","from":"Menu","name":"Menu"}];

export let Menu;

// Module exports
__pkg.exports.process = function({require, prop, value}) {
    (require || prop === 'Menu') && (Menu = require ? require('./index').Menu : value);

};
export const __beyond_pkg = __pkg;

export const hmr = new (function () {
    this.on = (event, listener) => void 0;
    this.off = (event, listener) => void 0;
});


__pkg.initialise(ims);
//# sourceMappingURL=menu.browser.mjs.map