{"_id":"@blackcube/aurelia2-tailwind","_rev":"7-a4d340ba6dd1ad90084a5b370aa3b66d","name":"@blackcube/aurelia2-tailwind","dist-tags":{"latest":"2.3.1"},"versions":{"2.2.1":{"name":"@blackcube/aurelia2-tailwind","version":"2.2.1","author":{"name":"Gaultier Philippe","email":"pgaultier@gmail.com"},"license":"BSD-3-Clause","_id":"@blackcube/aurelia2-tailwind@2.2.1","maintainers":[{"name":"pgaultier","email":"pgaultier@gmail.com"}],"homepage":"https://github.com/blackcubeio/blackcube-aurelia2#readme","bugs":{"url":"https://github.com/blackcubeio/blackcube-aurelia2/issues"},"dist":{"shasum":"fcac9d2e55c5b1266db9c7e954101219c202162f","tarball":"https://registry.npmjs.org/@blackcube/aurelia2-tailwind/-/aurelia2-tailwind-2.2.1.tgz","fileCount":38,"integrity":"sha512-Jo8uE5EZnIMddlnMaFjs4qHNTY5yrIoV4pO3kgojwt9K0BM1oWO3HhiXDxZM6FKD4w4M6VPqLsOv+ypStv59Nw==","signatures":[{"sig":"MEYCIQCogki4XuN6SPyVpvMgzIv1hjUEhvfo7iAoJukTIV0vDQIhAJqOwyO28QsgP61zGAjcjWR6V1Cx2o6R70VO3KhHuQ+L","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":195001},"main":"./dist/index.js","type":"module","types":"./dist/types/index.d.ts","module":"./dist/index.es.js","gitHead":"69d922919770c813532ef80e41a2555c50c26743","scripts":{"build":"rimraf dist && rollup -c && rimraf .rollup.cache","clean":"rimraf dist && rimraf .rollup.cache","deploy":"npm publish --access public"},"_npmUser":{"name":"pgaultier","email":"pgaultier@gmail.com"},"repository":{"url":"git+https://github.com/blackcubeio/blackcube-aurelia2.git","type":"git"},"_npmVersion":"10.8.3","description":"Allow easy setup of tailwind components using aurelia2","directories":{},"_nodeVersion":"22.9.0","dependencies":{"aurelia":"latest","@blackcube/aurelia2-aria":"latest","@blackcube/aurelia2-transition":"latest"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.6.3","rimraf":"^5.0.7","rollup":"^4.24.0","@rollup/plugin-typescript":"^11.1.6"},"_npmOperationalInternal":{"tmp":"tmp/aurelia2-tailwind_2.2.1_1729787202030_0.740152555995532","host":"s3://npm-registry-packages"}},"2.2.2":{"name":"@blackcube/aurelia2-tailwind","version":"2.2.2","author":{"name":"Gaultier Philippe","email":"pgaultier@gmail.com"},"license":"BSD-3-Clause","_id":"@blackcube/aurelia2-tailwind@2.2.2","maintainers":[{"name":"pgaultier","email":"pgaultier@gmail.com"}],"homepage":"https://github.com/blackcubeio/blackcube-aurelia2#readme","bugs":{"url":"https://github.com/blackcubeio/blackcube-aurelia2/issues"},"dist":{"shasum":"5587efdc55eb2bfdd54d873c54cbab456066eeb2","tarball":"https://registry.npmjs.org/@blackcube/aurelia2-tailwind/-/aurelia2-tailwind-2.2.2.tgz","fileCount":38,"integrity":"sha512-64eMuvsonT5O8NjGsJs0N5SXzwEmdw8Gy/dSxv7ZCny6m0bcBWr8MdRiRpjGh0qcSbUeJi2gklokIwRQLC58Sw==","signatures":[{"sig":"MEYCIQCRi0uzHOjymHUlSKKkyQ89+VriPRjIcLuqnNUH8mXO7QIhAIti/UsJ/W8laen3NF6ZB+oMmECMuHw1Mxz3A0uokcA0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":195265},"main":"./dist/index.js","type":"module","types":"./dist/types/index.d.ts","module":"./dist/index.es.js","gitHead":"69d922919770c813532ef80e41a2555c50c26743","scripts":{"build":"rimraf dist && rollup -c && rimraf .rollup.cache","clean":"rimraf dist && rimraf .rollup.cache","deploy":"npm publish --access public"},"_npmUser":{"name":"pgaultier","email":"pgaultier@gmail.com"},"repository":{"url":"git+https://github.com/blackcubeio/blackcube-aurelia2.git","type":"git"},"_npmVersion":"10.8.3","description":"Allow easy setup of tailwind components using aurelia2","directories":{},"_nodeVersion":"22.9.0","dependencies":{"aurelia":"latest","@blackcube/aurelia2-aria":"latest","@blackcube/aurelia2-transition":"latest"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.6.3","rimraf":"^5.0.7","rollup":"^4.24.0","@rollup/plugin-typescript":"^11.1.6"},"_npmOperationalInternal":{"tmp":"tmp/aurelia2-tailwind_2.2.2_1729789107987_0.025895813783951338","host":"s3://npm-registry-packages"}},"2.2.3":{"name":"@blackcube/aurelia2-tailwind","version":"2.2.3","author":{"name":"Gaultier Philippe","email":"pgaultier@gmail.com"},"license":"BSD-3-Clause","_id":"@blackcube/aurelia2-tailwind@2.2.3","maintainers":[{"name":"pgaultier","email":"pgaultier@gmail.com"}],"homepage":"https://github.com/blackcubeio/blackcube-aurelia2#readme","bugs":{"url":"https://github.com/blackcubeio/blackcube-aurelia2/issues"},"dist":{"shasum":"5d30007cdb782d6826b77412ffb712632ea222a8","tarball":"https://registry.npmjs.org/@blackcube/aurelia2-tailwind/-/aurelia2-tailwind-2.2.3.tgz","fileCount":38,"integrity":"sha512-cvBtu42n+h2/jsWKPF2H5Lut4C3dUGwVAP0KLMvTm1X/xca+HvbJeQxFqUeBWDguS1D+0sIhlgu5uA2bHRly+g==","signatures":[{"sig":"MEQCIB1S6W0+9gUmGlZnYtQEurCba5X7MvCSzZ0q0HNwIElfAiABQPaf1Y43kmlnSNxRQSVEJ3E0ny/B+ev0MIvKKLcQbA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198771},"main":"./dist/index.js","type":"module","types":"./dist/types/index.d.ts","module":"./dist/index.es.js","gitHead":"14577e38fb4d179a269f97d4f02d39bba4fa89c8","scripts":{"build":"rimraf dist && rollup -c && rimraf .rollup.cache","clean":"rimraf dist && rimraf .rollup.cache","deploy":"npm publish --access public"},"_npmUser":{"name":"pgaultier","email":"pgaultier@gmail.com"},"repository":{"url":"git+https://github.com/blackcubeio/blackcube-aurelia2.git","type":"git"},"_npmVersion":"10.8.3","description":"Allow easy setup of tailwind components using aurelia2","directories":{},"_nodeVersion":"22.9.0","dependencies":{"aurelia":"latest","@blackcube/aurelia2-aria":"latest","@blackcube/aurelia2-transition":"latest"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.6.3","rimraf":"^5.0.7","rollup":"^4.24.0","@rollup/plugin-typescript":"^11.1.6"},"_npmOperationalInternal":{"tmp":"tmp/aurelia2-tailwind_2.2.3_1729851652087_0.7567120299462553","host":"s3://npm-registry-packages"}},"2.2.4":{"name":"@blackcube/aurelia2-tailwind","version":"2.2.4","author":{"name":"Gaultier Philippe","email":"pgaultier@gmail.com"},"license":"BSD-3-Clause","_id":"@blackcube/aurelia2-tailwind@2.2.4","maintainers":[{"name":"pgaultier","email":"pgaultier@gmail.com"}],"homepage":"https://github.com/blackcubeio/blackcube-aurelia2#readme","bugs":{"url":"https://github.com/blackcubeio/blackcube-aurelia2/issues"},"dist":{"shasum":"cb97c24e9ff1639a4a777be5dff696da50ff4429","tarball":"https://registry.npmjs.org/@blackcube/aurelia2-tailwind/-/aurelia2-tailwind-2.2.4.tgz","fileCount":38,"integrity":"sha512-IwlZ1TMd+t6nZ4oBays7reLJqVU7o2t4B0t6NMPhYhFsn5U/bShHVRqXpKfuqZ89kGRsq8fSPMydTf8oKGEBMQ==","signatures":[{"sig":"MEQCIER6BqOHD1/GB+w1xr25sP4HRJl7Eb+GLhwl6wZ0RZBVAiBeHqjM2jO3Y6aTEjK/MQ1GQkm6wwkxtPnlDkhaCAsKZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212320},"main":"./dist/index.js","type":"module","types":"./dist/types/index.d.ts","module":"./dist/index.es.js","gitHead":"14577e38fb4d179a269f97d4f02d39bba4fa89c8","scripts":{"build":"rimraf dist && rollup -c && rimraf .rollup.cache","clean":"rimraf dist && rimraf .rollup.cache","deploy":"npm publish --access public"},"_npmUser":{"name":"pgaultier","email":"pgaultier@gmail.com"},"repository":{"url":"git+https://github.com/blackcubeio/blackcube-aurelia2.git","type":"git"},"_npmVersion":"10.8.3","description":"Allow easy setup of tailwind components using aurelia2","directories":{},"_nodeVersion":"22.9.0","dependencies":{"aurelia":"latest","@blackcube/aurelia2-aria":"latest","@blackcube/aurelia2-transition":"latest"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.6.3","rimraf":"^5.0.7","rollup":"^4.24.0","@rollup/plugin-typescript":"^11.1.6"},"_npmOperationalInternal":{"tmp":"tmp/aurelia2-tailwind_2.2.4_1729880701138_0.15281361172002184","host":"s3://npm-registry-packages"}},"2.3.0":{"name":"@blackcube/aurelia2-tailwind","version":"2.3.0","author":{"name":"Gaultier Philippe","email":"pgaultier@gmail.com"},"license":"BSD-3-Clause","_id":"@blackcube/aurelia2-tailwind@2.3.0","maintainers":[{"name":"pgaultier","email":"pgaultier@gmail.com"}],"homepage":"https://github.com/blackcubeio/blackcube-aurelia2#readme","bugs":{"url":"https://github.com/blackcubeio/blackcube-aurelia2/issues"},"dist":{"shasum":"a876ddd5598f269cd79093281a5240f9f9e6c6ab","tarball":"https://registry.npmjs.org/@blackcube/aurelia2-tailwind/-/aurelia2-tailwind-2.3.0.tgz","fileCount":38,"integrity":"sha512-U0QmFiivuo2mk/H6gsZFWwfnjgkoIWIVJoJ5yHJOuxM6kIcBLzwBmKe4Z/63Md220SBiTEEAj1YERw61CD0Ctg==","signatures":[{"sig":"MEUCIARu+cts65SdQUhbjWJ30XwKDvcQMhe2ELg46vJNg6MaAiEA9iasDrMQuBR7j3lz6tiGDPFDrVKHmsUvM5/g22dx3Kg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212320},"main":"./dist/index.js","type":"module","types":"./dist/types/index.d.ts","module":"./dist/index.es.js","gitHead":"14577e38fb4d179a269f97d4f02d39bba4fa89c8","scripts":{"build":"rimraf dist && rollup -c && rimraf .rollup.cache","clean":"rimraf dist && rimraf .rollup.cache","deploy":"npm publish --access public"},"_npmUser":{"name":"pgaultier","email":"pgaultier@gmail.com"},"repository":{"url":"git+https://github.com/blackcubeio/blackcube-aurelia2.git","type":"git"},"_npmVersion":"10.8.3","description":"Allow easy setup of tailwind components using aurelia2","directories":{},"_nodeVersion":"22.9.0","dependencies":{"aurelia":"latest","@blackcube/aurelia2-aria":"latest","@blackcube/aurelia2-transition":"latest"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.6.3","rimraf":"^5.0.7","rollup":"^4.24.0","@rollup/plugin-typescript":"^11.1.6"},"_npmOperationalInternal":{"tmp":"tmp/aurelia2-tailwind_2.3.0_1729896370549_0.8610894446565907","host":"s3://npm-registry-packages"}},"2.3.1":{"name":"@blackcube/aurelia2-tailwind","version":"2.3.1","repository":{"type":"git","url":"git+https://github.com/blackcubeio/blackcube-aurelia2.git"},"author":{"name":"Gaultier Philippe","email":"pgaultier@gmail.com"},"license":"BSD-3-Clause","type":"module","module":"./dist/index.es.js","main":"./dist/index.js","types":"./dist/types/index.d.ts","scripts":{"build":"rimraf dist && rollup -c && rimraf .rollup.cache","deploy":"npm publish --access public","clean":"rimraf dist && rimraf .rollup.cache"},"dependencies":{"aurelia":"latest","@blackcube/aurelia2-aria":"latest","@blackcube/aurelia2-transition":"latest"},"devDependencies":{"@rollup/plugin-typescript":"^11.1.6","rimraf":"^5.0.7","rollup":"^4.24.0","tslib":"^2.6.3"},"_id":"@blackcube/aurelia2-tailwind@2.3.1","gitHead":"83fa718d0ee10acc1ba21729689c218287ebd48c","description":"Allow easy setup of tailwind components using aurelia2","bugs":{"url":"https://github.com/blackcubeio/blackcube-aurelia2/issues"},"homepage":"https://github.com/blackcubeio/blackcube-aurelia2#readme","_nodeVersion":"22.9.0","_npmVersion":"10.8.3","dist":{"integrity":"sha512-TF1UPJ1onNZD6nsl0k/M/Q0grvy4a9rmaqp6LPHs+vRUh9Hs4e05Lq4mjU9d+I8rBXmWb0ZubY5IRMLzFuVv/g==","shasum":"fd0ab58b31314975482193da79ee5aa7b41da939","tarball":"https://registry.npmjs.org/@blackcube/aurelia2-tailwind/-/aurelia2-tailwind-2.3.1.tgz","fileCount":38,"unpackedSize":217020,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGMWHdLe0y+oX+qnJjGuosCMqEDMvIe/LVAWo3BKvOZbAiEAhW8h/A2zKLU8bra+WZHOXDs2u+k5piua+gRDS+U36bk="}]},"_npmUser":{"name":"pgaultier","email":"pgaultier@gmail.com"},"directories":{},"maintainers":[{"name":"pgaultier","email":"pgaultier@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/aurelia2-tailwind_2.3.1_1730026977667_0.1488213798440139"},"_hasShrinkwrap":false}},"time":{"created":"2024-10-24T16:26:41.875Z","modified":"2024-10-27T11:02:58.082Z","2.2.0":"2024-10-24T13:50:59.820Z","2.2.1":"2024-10-24T16:26:42.237Z","2.2.2":"2024-10-24T16:58:28.142Z","2.2.3":"2024-10-25T10:20:52.309Z","2.2.4":"2024-10-25T18:25:01.425Z","2.3.0":"2024-10-25T22:46:10.775Z","2.3.1":"2024-10-27T11:02:57.890Z"},"bugs":{"url":"https://github.com/blackcubeio/blackcube-aurelia2/issues"},"author":{"name":"Gaultier Philippe","email":"pgaultier@gmail.com"},"license":"BSD-3-Clause","homepage":"https://github.com/blackcubeio/blackcube-aurelia2#readme","repository":{"type":"git","url":"git+https://github.com/blackcubeio/blackcube-aurelia2.git"},"description":"Allow easy setup of tailwind components using aurelia2","maintainers":[{"name":"pgaultier","email":"pgaultier@gmail.com"}],"readme":"# Redcat Aurelia 2 tailwind toolkit\n\nAllow easy setup of tailwind components using aurelia2\n\n## Using it:\n\n``` \nnpm install @blackcube/aurelia2-tailwind\n```\n### Registering it in app\n\n```typescript\nimport Aurelia, { ConsoleSink, LoggerConfiguration, LogLevel} from 'aurelia';\nimport { TailwindConfiguration } from \"@blackcube/aurelia2-tailwind\";\nimport { MyApp } from './my-app';\nAurelia\n    .register(TailwindConfiguration)\n    .register(LoggerConfiguration.create({\n        level: LogLevel.trace,\n        colorOptions: 'colors',\n        sinks: [ConsoleSink]\n    }))\n    .app(MyApp)\n    .start();\n\n\n```\n\n### `bc-tw-form-dropdown` attribute\n\n* datasets used in main html:\n  * `[data-form-dropdown=\"button\"]` - element used to toggle dropdown\n  * `[data-form-dropdown=\"input\"]` - input element used to let user filter elements\n  * `[data-form-dropdown=\"panel\"]` - panel containing dropdown items\n* datasets used in option template :\n  * `[data-form-dropdown=\"option-button\"]` - button used to select option\n   \n#### Example:\n\nselect element will be hidden and updated with selected value from dropdown\n\n```html\n<div bc-tw-form-dropdown=\"\">\n    <select tabindex=\"-1\" class=\"hidden\">\n        <option value=\"1\">1 Choice</option>\n        <option value=\"2\">2 Choice</option>\n        <option value=\"3\">3 Choice</option>\n        <option value=\"4\">4 Choice</option>\n        <option value=\"5\">5 Choice</option>\n    </select>\n        <label class=\"block text-sm font-medium leading-6 text-gray-900\">Assigned to</label>\n        <div class=\"relative mt-2\">\n            <input data-form-dropdown=\"input\" type=\"text\" class=\"w-full rounded-md border-0 bg-white py-1.5 pl-3 pr-12 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6\" role=\"combobox\" aria-controls=\"options\" aria-expanded=\"false\">\n            <button data-form-dropdown=\"button\" type=\"button\" tabindex=\"-1\" class=\"absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none\">\n                <svg class=\"h-5 w-5 text-gray-400\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n                    <path fill-rule=\"evenodd\" d=\"M10.53 3.47a.75.75 0 0 0-1.06 0L6.22 6.72a.75.75 0 0 0 1.06 1.06L10 5.06l2.72 2.72a.75.75 0 1 0 1.06-1.06l-3.25-3.25Zm-4.31 9.81 3.25 3.25a.75.75 0 0 0 1.06 0l3.25-3.25a.75.75 0 1 0-1.06-1.06L10 14.94l-2.72-2.72a.75.75 0 0 0-1.06 1.06Z\" clip-rule=\"evenodd\" />\n                </svg>\n            </button>\n\n            <ul data-form-dropdown=\"panel\" class=\"hidden absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm\" id=\"options\" role=\"listbox\">\n                <template>\n                    <!--\n                      Combobox option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation.\n\n                      Active: \"text-white bg-indigo-600\", Not Active: \"text-gray-900\"\n                    -->\n                    <li data-form-dropdown=\"option\">\n                        <button data-form-dropdown=\"option-button\" tabindex=-1\" class=\"w-full text-left group relative py-2 pl-8 pr-4 text-gray-900 hover:text-white hover:bg-indigo-600 cursor-pointer\">\n                        <!-- Selected: \"font-semibold\" -->\n                        <span class=\"block truncate\" data-value=\"\"></span>\n                        <!--\n                          Checkmark, only display for selected option.\n\n                          Active: \"text-white\", Not Active: \"text-indigo-600\"\n                        -->\n                        <span data-selected=\"\" class=\"absolute inset-y-0 left-0 flex items-center pl-1.5 text-indigo-600 group-hover:text-white\">\n                            <svg class=\"h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n                                <path fill-rule=\"evenodd\" d=\"M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z\" clip-rule=\"evenodd\" />\n                            </svg>\n                        </span>\n                        </button>\n                    </li>\n                </template>\n            </ul>\n        </div>\n    </div>\n```\n\n### `bc-tw-menu-mobile` attribute\n\n* datasets used in main html:\n  * `[data-menu-mobile=\"open\"]` - element used to open menu\n  * `[data-menu-mobile=\"close\"]` - element used to close menu\n  * `[data-menu-mobile=\"overlay\"]` - overlay element\n  * `[data-menu-mobile=\"offcanvas\"]` - offcanvas element\n\n#### Example:\n\n```html\n\n<!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->\n<div class=\"relative z-50 lg:hidden\" role=\"dialog\" aria-modal=\"true\" bc-tw-menu-mobile=\"\">\n    <!--\n      Off-canvas menu backdrop, show/hide based on off-canvas menu state.\n\n      Entering: \"transition-opacity ease-linear duration-300\"\n        From: \"opacity-0\"\n        To: \"opacity-100\"\n      Leaving: \"transition-opacity ease-linear duration-300\"\n        From: \"opacity-100\"\n        To: \"opacity-0\"\n    -->\n    <div class=\"fixed inset-0 bg-gray-900/80 opacity-0\" aria-hidden=\"true\" data-menu-mobile=\"overlay\"></div>\n\n    <div class=\"fixed inset-0 flex\">\n        <!--\n          Off-canvas menu, show/hide based on off-canvas menu state.\n\n          Entering: \"transition ease-in-out duration-300 transform\"\n            From: \"-translate-x-full\"\n            To: \"translate-x-0\"\n          Leaving: \"transition ease-in-out duration-300 transform\"\n            From: \"translate-x-0\"\n            To: \"-translate-x-full\"\n        -->\n        <div class=\"relative mr-16 flex w-full max-w-xs flex-1 -translate-x-full\" data-menu-mobile=\"offcanvas\">\n            <!--\n              Close button, show/hide based on off-canvas menu state.\n\n              Entering: \"ease-in-out duration-300\"\n                From: \"opacity-0\"\n                To: \"opacity-100\"\n              Leaving: \"ease-in-out duration-300\"\n                From: \"opacity-100\"\n                To: \"opacity-0\"\n            -->\n            <div class=\"absolute left-full top-0 flex w-16 justify-center pt-5 opacity-0\">\n                <button type=\"button\" class=\"-m-2.5 p-2.5\"  data-menu-mobile=\"close\">\n                    <span class=\"sr-only\">Close sidebar</span>\n                    <svg class=\"h-6 w-6 text-white\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" />\n                    </svg>\n                </button>\n            </div>\n            <!-- Sidebar component, swap this element with another sidebar if you like -->\n            <div class=\"flex grow flex-col gap-y-5 overflow-y-auto bg-white px-6 pb-4\">\n                <!-- sidebar -->\n            </div>\n        </div>\n    </div>\n</div>\n```\n\n### `bc-tw-menu-sidebar` attribute\n\n* datasets used in main html:\n  * `[data-menu-sidebar-arrow]` - arrow showing if there is submenu and if it's open or closed\n  * `[data-menu-sidebar=\"<value>\"]` - value is the name of the menu item. The name is used to store in local storage if the menu is open or closed\n\n#### Example:\n\n```html\n<nav class=\"flex flex-1 flex-col\" bc-tw-menu-sidebar=\"\">\n        <ul role=\"list\" class=\"flex flex-1 flex-col gap-y-7\">\n            <li>\n                <ul role=\"list\" class=\"-mx-2 space-y-1\">\n                    <li>\n                        <!-- Current: \"bg-gray-50 text-indigo-600\", Default: \"text-gray-700 hover:text-indigo-600 hover:bg-gray-50\" -->\n                        <a href=\"#\">\n                            <svg class=\"h-6 w-6 shrink-0 text-indigo-600\">\n                                <!-- Heroicon name: outline/home -->\n                            </svg>\n                            Dashboard\n                        </a>\n                    </li>\n                    <li>\n                        <a href=\"#\" class=\"group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 bg-gray-50 text-indigo-600\">\n                            <svg class=\"h-6 w-6 shrink-0 text-gray-400\">\n                                <!-- Heroicon name: outline/collection -->\n                            </svg>\n                            Team\n                    </li>\n                    <li>\n                        <div>\n                            <button type=\"button\" class=\"flex w-full items-center gap-x-3 rounded-md p-2 text-left text-sm font-semibold leading-6 text-gray-700 hover:bg-gray-50\">\n                                <svg class=\"h-6 w-6 shrink-0 text-gray-400\">\n                                    <!-- Heroicon name: outline/users -->\n                                </svg>\n                                Users\n                                <!-- Expanded: \"rotate-90 text-gray-500\", Collapsed: \"text-gray-400\" -->\n                                <svg class=\"ml-auto h-5 w-5 shrink-0 text-gray-400\" data-menu-sidebar-arrow=\"\">\n                                    <!-- Heroicon name: outline/chevron-right -->\n                                </svg>\n                            </button>\n                            \n                            <!-- Expandable link section, show/hide based on state. -->\n                            <ul class=\"mt-1 px-2 hidden\" id=\"sub-menu-users\">\n                                <li>\n                                    <!-- 44px -->\n                                    <a href=\"#\" class=\"block rounded-md py-2 pl-9 pr-2 text-sm leading-6 text-gray-700 hover:bg-gray-50\">\n                                        Teachers\n                                    </a>\n                                </li>\n                                <li>\n                                    <!-- 44px -->\n                                    <a href=\"#\" class=\"block rounded-md py-2 pl-9 pr-2 text-sm leading-6 text-gray-700 hover:bg-gray-50\">\n                                        Students\n                                    </a>\n                                </li>\n                            </ul>\n                        </div>\n                    </li>\n                </ul>\n            </li>\n            <!-- stuff for sidebar -->\n        </ul>\n    </nav>\n```","readmeFilename":"README.md"}