├── .github ├── codeql │ └── codeql-config.yml ├── FUNDING.yml └── workflows │ ├── badges.yml │ ├── ci.yml │ └── codeql.yml ├── .gitignore ├── docs ├── assets │ ├── img │ │ ├── favicon.ico │ │ ├── navbar.png │ │ └── apple-touch-icon.png │ └── css │ │ ├── prism.css │ │ └── style.css └── src │ ├── css │ ├── navbar-bootstrap.min.css.map │ ├── navbar-left-menu.min.css.map │ ├── navbar-left.min.css.map │ ├── navbar-bootstrap-extended.min.css.map │ ├── navbar-right.min.css.map │ ├── navbar-combo.min.css.map │ ├── navbar-combo-rtl.min.css.map │ ├── navbar-bootstrap.min.css │ ├── navbar-left-menu.min.css │ ├── navbar-left.min.css │ ├── navbar.min.css │ ├── navbar-bootstrap-extended.min.css │ ├── navbar-right.min.css │ ├── navbar-combo.min.css │ └── navbar-combo-rtl.min.css │ └── js │ └── navbar.js ├── src ├── ts │ ├── index.ts │ └── init.ts └── scss │ ├── navbar-bootstrap.scss │ ├── navbar.scss │ ├── navbar-left.scss │ ├── navbar-bootstrap-extended.scss │ ├── navbar-combo.scss │ ├── navbar-combo-rtl.scss │ ├── navbar-right.scss │ ├── navbar-left-menu.scss │ ├── _root.scss │ ├── _variables.scss │ ├── _mixins-bs.scss │ └── _functions.scss ├── test └── fixtures │ ├── style.css │ └── getMarkup.ts ├── .npmignore ├── vitest.config.ts ├── vitest.config-ui.ts ├── vite.config.ts ├── dist ├── js │ ├── navbar.d.ts │ ├── navbar.cjs │ ├── navbar.js │ └── navbar.mjs └── css │ ├── navbar.min.css.map │ ├── navbar.css.map │ ├── navbar.min.css │ └── navbar.css ├── LICENSE ├── tsconfig.json ├── README.md ├── package.json └── .stylelintrc.json /.github/codeql/codeql-config.yml: -------------------------------------------------------------------------------- 1 | paths: 2 | - src/ts -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .nyc_output 2 | node_modules 3 | experiments 4 | coverage 5 | test/__screenshots__ -------------------------------------------------------------------------------- /docs/assets/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thednp/navbar/HEAD/docs/assets/img/favicon.ico -------------------------------------------------------------------------------- /docs/assets/img/navbar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thednp/navbar/HEAD/docs/assets/img/navbar.png -------------------------------------------------------------------------------- /src/ts/index.ts: -------------------------------------------------------------------------------- 1 | import Navbar from "./navbar"; 2 | import "./init"; 3 | 4 | export default Navbar; 5 | -------------------------------------------------------------------------------- /docs/assets/img/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thednp/navbar/HEAD/docs/assets/img/apple-touch-icon.png -------------------------------------------------------------------------------- /test/fixtures/style.css: -------------------------------------------------------------------------------- 1 | @import "../../docs/assets/css/style.css"; 2 | @import "../../dist/css/navbar.css"; 3 | 4 | @media (min-width: 768px) { 5 | .nav li > .subnav { transition-duration: 0.1s; } 6 | } 7 | -------------------------------------------------------------------------------- /src/scss/navbar-bootstrap.scss: -------------------------------------------------------------------------------- 1 | @use "variables"; 2 | @use "mixins"; 3 | @use "mixins-bs"; 4 | @use "root"; 5 | @include mixins-bs.navbar-style-bs; 6 | @include mixins-bs.nav-layout-bs; 7 | @include mixins-bs.main-menu-bs; 8 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .github 2 | .gitignore 3 | .nyc_output 4 | node_modules 5 | docs 6 | experiments 7 | coverage 8 | test 9 | src 10 | compile.cjs 11 | tsconfig.json 12 | .stylelintrc.json 13 | vite.config.mts 14 | vitest.config.mts 15 | vitest.config-ui.mts -------------------------------------------------------------------------------- /src/scss/navbar.scss: -------------------------------------------------------------------------------- 1 | @use "variables"; 2 | @use "mixins"; 3 | @use "root"; 4 | @include mixins.navbar-mobile-layout; 5 | @include mixins.navbar-desktop-layout; 6 | @include mixins.navbar-style; 7 | @include mixins.nav-layout; 8 | @include mixins.nav-style; 9 | @include mixins.subnav-style; 10 | @include mixins.main-menu; 11 | -------------------------------------------------------------------------------- /src/scss/navbar-left.scss: -------------------------------------------------------------------------------- 1 | @use "variables"; 2 | @use "mixins"; 3 | @use "root"; 4 | @include mixins.navbar-mobile-layout; 5 | @include mixins.navbar-desktop-side-layout; 6 | @include mixins.navbar-style; 7 | @include mixins.nav-layout; 8 | @include mixins.nav-style; 9 | @include mixins.subnav-style; 10 | @include mixins.left-side; 11 | -------------------------------------------------------------------------------- /src/scss/navbar-bootstrap-extended.scss: -------------------------------------------------------------------------------- 1 | @use "variables"; 2 | @use "mixins"; 3 | @use "root"; 4 | @include mixins.navbar-mobile-layout; 5 | @include mixins.navbar-desktop-layout; 6 | @include mixins.navbar-style; 7 | @include mixins.nav-layout; 8 | @include mixins.nav-style; 9 | @include mixins.subnav-style; 10 | @include mixins.main-menu; 11 | -------------------------------------------------------------------------------- /src/scss/navbar-combo.scss: -------------------------------------------------------------------------------- 1 | @use "variables"; 2 | @use "mixins"; 3 | @use "root"; 4 | @include mixins.navbar-mobile-layout; 5 | @include mixins.navbar-desktop-layout; 6 | @include mixins.navbar-style; 7 | @include mixins.nav-layout; 8 | @include mixins.nav-style; 9 | @include mixins.subnav-style; 10 | 11 | // main menu 12 | .navbar { 13 | @include mixins.main-menu; 14 | } 15 | 16 | // side modules 17 | .left { 18 | @include mixins.left-side(1); 19 | } 20 | 21 | .right { 22 | @include mixins.right-side(1); 23 | } 24 | -------------------------------------------------------------------------------- /src/scss/navbar-combo-rtl.scss: -------------------------------------------------------------------------------- 1 | @use "variables"; 2 | @use "mixins"; 3 | @use "root"; 4 | @include mixins.navbar-mobile-layout; 5 | @include mixins.navbar-desktop-layout; 6 | @include mixins.navbar-style; 7 | @include mixins.nav-layout; 8 | @include mixins.nav-style; 9 | @include mixins.subnav-style; 10 | 11 | // main menu 12 | .navbar { 13 | @include mixins.main-menu-rtl; 14 | } 15 | 16 | // side modules 17 | .right { 18 | @include mixins.left-side(1); 19 | } 20 | 21 | .left { 22 | @include mixins.right-side(1); 23 | } 24 | -------------------------------------------------------------------------------- /src/ts/init.ts: -------------------------------------------------------------------------------- 1 | import { 2 | DOMContentLoadedEvent, 3 | getDocument, 4 | getElementsByTagName, 5 | matches, 6 | } from "@thednp/shorty"; 7 | import { addListener } from "@thednp/event-listener"; 8 | 9 | import Navbar from "./navbar"; 10 | 11 | // DATA API 12 | /** 13 | * Navbar initialization callback 14 | * 15 | * @param context Element 16 | */ 17 | const initNavbar = (context?: ParentNode) => { 18 | const { selector, init } = Navbar; 19 | const collection = getElementsByTagName("*", getDocument(context)); 20 | 21 | [...collection].filter((x) => matches(x, selector)).forEach(init); 22 | }; 23 | 24 | // initialize when loaded 25 | if (document.body) initNavbar(); 26 | else {addListener(document, DOMContentLoadedEvent, () => initNavbar(), { 27 | once: true, 28 | });} 29 | -------------------------------------------------------------------------------- /src/scss/navbar-right.scss: -------------------------------------------------------------------------------- 1 | // $primary_color: #8032cd; 2 | // $navbar_background: #463654; 3 | // $subnav_padding: .5rem; 4 | // $subnav_shadow: -2px 2px 3px 2px rgba(0,0,0,.3), -1px 1px 0 0 rgba(0,0,0,.2) inset; 5 | // $root_item_hover_color: #fff; 6 | // $root_item_hover_background: #251038; 7 | // $brand_link_background: #48444c; 8 | // $brand_link_background_hover: #28064a; 9 | // $subnav_background: inherit; 10 | // $subnav_item_hover_background: #2d1344; 11 | // $subnav_item_hover_color: #eee; 12 | 13 | @use "variables"; 14 | @use "mixins"; 15 | @use "root"; 16 | @include mixins.navbar-mobile-layout; 17 | @include mixins.navbar-desktop-side-layout; 18 | @include mixins.navbar-style; 19 | @include mixins.nav-layout; 20 | @include mixins.nav-style; 21 | @include mixins.subnav-style; 22 | @include mixins.right-side; 23 | -------------------------------------------------------------------------------- /vitest.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vitest/config"; 2 | import { resolve } from 'node:path'; 3 | 4 | export default defineConfig({ 5 | resolve: { 6 | alias: { 7 | "~": resolve(__dirname, "src"), 8 | }, 9 | }, 10 | optimizeDeps: { 11 | include: [ 12 | "@vitest/coverage-istanbul" 13 | ] 14 | }, 15 | test: { 16 | css: true, 17 | globals: true, 18 | coverage: { 19 | provider: "istanbul", 20 | reporter: ["html", "text", "lcov"], 21 | enabled: true, 22 | include: ["src/ts/navbar.ts"], 23 | }, 24 | browser: { 25 | provider: 'playwright', // or 'webdriverio' 26 | enabled: true, 27 | headless: true, 28 | instances: [ 29 | { 30 | browser: 'chromium', // browser name is required 31 | } 32 | ] 33 | }, 34 | }, 35 | }); 36 | -------------------------------------------------------------------------------- /vitest.config-ui.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vitest/config"; 2 | import { resolve } from 'node:path'; 3 | 4 | export default defineConfig({ 5 | resolve: { 6 | alias: { 7 | "~": resolve(__dirname, "src"), 8 | }, 9 | }, 10 | optimizeDeps: { 11 | include: [ 12 | "@vitest/coverage-istanbul" 13 | ] 14 | }, 15 | test: { 16 | css: true, 17 | globals: true, 18 | coverage: { 19 | provider: "istanbul", 20 | reporter: ["html", "text", "lcov"], 21 | enabled: true, 22 | include: ["src/ts/navbar.ts"], 23 | }, 24 | browser: { 25 | // provider: 'webdriverio', // or 'webdriverio' 26 | enabled: true, 27 | headless: false, 28 | instances: [ 29 | { 30 | browser: 'chromium', // browser name is required 31 | } 32 | ] 33 | }, 34 | }, 35 | }); 36 | -------------------------------------------------------------------------------- /src/scss/navbar-left-menu.scss: -------------------------------------------------------------------------------- 1 | @use "variables"; 2 | @use "mixins"; 3 | @use "root"; 4 | 5 | // special design 6 | // .sidebar .nav { 7 | // --nv-item-margin: 0 0 2px 0; 8 | // --nv-subnav-item-margin: 0 0 2px 2px; 9 | // --nv-bg: transparent; 10 | // --nv-subnav-bg: transparent; 11 | // --nv-subnav-padding-x: #{functions.real-size(0, 1)}; 12 | // --nv-subnav-padding-y: #{functions.real-size(0, 1)}; 13 | // --nv-item-hover-color: #eee; 14 | // --nv-item-hover-bg: #222; 15 | // --nv-subnav-item-bg: rgba(0,0,0,.8); 16 | // --nv-subnav-item-hover-color: #fff; 17 | // --nv-subnav-item-hover-bg: rgba(50,50,50,.95); 18 | // --nv-subnav-shadow: none; 19 | // --nv-subnav-larger-width: calc(var(--nv-subnav-width) * 3); 20 | // } 21 | 22 | @include mixins.nav-layout(1); 23 | @include mixins.nav-style; 24 | @include mixins.subnav-style; 25 | @include mixins.left-side; 26 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [thednp] # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry 12 | polar: # Replace with a single Polar username 13 | buy_me_a_coffee: # Replace with a single Buy Me a Coffee username 14 | thanks_dev: # Replace with a single thanks.dev username 15 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 16 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import {resolve} from 'path'; 2 | import { defineConfig } from 'vite'; 3 | import dts from "vite-plugin-dts"; 4 | import strip from "vite-plugin-strip-comments"; 5 | import { name } from './package.json'; 6 | 7 | const getPackageName = () => { 8 | return name.includes('@') ? name.split('/')[1] : name; 9 | }; 10 | 11 | const NAME = 'Navbar'; 12 | 13 | const fileName = { 14 | es: `${getPackageName()}.mjs`, 15 | cjs: `${getPackageName()}.cjs`, 16 | iife: `${getPackageName()}.js`, 17 | }; 18 | 19 | export default defineConfig({ 20 | base: './', 21 | resolve: { 22 | alias: { 23 | "~": resolve(__dirname, "src"), 24 | }, 25 | }, 26 | plugins: [ 27 | dts({ 28 | outDir: 'dist/js', 29 | copyDtsFiles: true, 30 | rollupTypes: true, 31 | }), 32 | strip(), 33 | ], 34 | build: { 35 | emptyOutDir: true, 36 | outDir: 'dist/js', 37 | lib: { 38 | entry: resolve(__dirname, 'src/ts/index.ts'), 39 | name: NAME, 40 | formats: ['es', 'cjs', 'iife'], 41 | fileName: (format: string) => fileName[format], 42 | }, 43 | sourcemap: true, 44 | } 45 | }); 46 | 47 | -------------------------------------------------------------------------------- /dist/js/navbar.d.ts: -------------------------------------------------------------------------------- 1 | /** Creates a new Navbar for desktop and mobile navigation. */ 2 | declare class Navbar { 3 | static selector: string; 4 | static init: (element: Element | string) => Navbar; 5 | static getInstance: (element: Element) => Navbar | null; 6 | static version: string; 7 | menu: HTMLElement; 8 | navbarToggle: HTMLElement | null; 9 | items: HTMLCollectionOf; 10 | options: NavbarOptions; 11 | _observer: ResizeObserver; 12 | /** 13 | * @param target HTMLElement or selector 14 | * @param config instance options 15 | */ 16 | constructor(target: string | Element, config?: Partial); 17 | get defaults(): NavbarOptions; 18 | get name(): string; 19 | /** 20 | * Window `resize` event listener. 21 | */ 22 | listenResize: () => void; 23 | /** 24 | * Destroy Navbar instance. 25 | */ 26 | dispose(): void; 27 | } 28 | export default Navbar; 29 | 30 | declare type NavbarOptions = { 31 | breakpoint: number; 32 | toggleSiblings: boolean; 33 | delay: number; 34 | }; 35 | 36 | export { } 37 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 thednp 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // https://janessagarrow.com/blog/typescript-and-esbuild/ 3 | "compilerOptions": { 4 | "lib": ["DOM", "ESNext", "DOM.Iterable"], 5 | // "types": ["vite", "vite/client", "cypress", "@thednp/shorty", "@thednp/event-listener"], 6 | "types": ["@thednp/event-listener", "@thednp/shorty"], 7 | "rootDir": "./", 8 | "baseUrl": "./", 9 | "module": "ESNext", 10 | "target": "ESNext", 11 | "moduleResolution": "Bundler", 12 | "allowJs": true, 13 | "forceConsistentCasingInFileNames": true, 14 | "useDefineForClassFields": true, 15 | "strict": true, 16 | "sourceMap": true, 17 | "resolveJsonModule": true, 18 | "esModuleInterop": true, 19 | "isolatedModules": true, 20 | "noUnusedLocals": true, 21 | "noUnusedParameters": true, 22 | "noImplicitReturns": true, 23 | "removeComments": false, 24 | "allowSyntheticDefaultImports": true, 25 | "noEmit": true, 26 | "checkJs": true, 27 | "skipLibCheck": true // allows dts-bundle-generator to import from package.json 28 | }, 29 | "include": ["src/*", "src/**/*"], 30 | "exclude": ["node_modules", "experiments", "coverage", "dist"], 31 | } 32 | -------------------------------------------------------------------------------- /docs/src/css/navbar-bootstrap.min.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["../../../src/scss/_root.scss","../../../src/scss/_mixins-bs.scss","../../../src/scss/_mixins.scss","../../../src/scss/_variables.scss"],"names":[],"mappings":"AAGA,MAEE,qBACA,qBACA,yBACA,qBACA,yBACA,iBACA,2CACA,2CACA,iDACA,wBACA,4CACA,4CACA,kDACA,0BACA,8BACA,4BACA,0BACA,oBACA,oCACA,sCACA,qDACA,qDACA,2BACA,2BACA,gCACA,sEACA,iDAGA,4BACA,4BACA,iCACA,+BACA,yBACA,4FACA,2CACA,0BACA,iDACA,wCACA,6BACA,6CACA,4CACA,iCACA,wDACA,8CACA,oCACA,oDACA,uBACA,yBACA,qCACA,0BACA,6CACA,+FC/CE,6BACE,oCAIA,0CACE,kCACA,uCAOJ,sEACE,mCAIA,gGACE,mCACA,wCAKN,yBAEE,uBACE,mCAIA,sBACE,sBAKE,iGACE,oCAQN,wDACE,4CAKE,0NACE,qCAUJ,8FACE,uBASR,QACE,gDAIF,0DAGc,aAGZ,0FAEW,cCkjBb,wBAEE,4BACA,6BACA,kCACA,kBACA,kBAGF,WACE,0CDtjBF,gBACE,UACA,qCAGF,eACE,yBACA,SACA,cEdU,OFkBZ,wBAEE,gBACA,sBACA,uCAKA,eACE,kBACA,aACA,mBACA,mBACA,8BACA,gBAIF,sBACE,aACA,mBACA,mBACA,8BACA,qBAEA,2BACE,gBACA,uBACA,mBAKN,yBAEE,4BAEA,kDAGE,aAIF,8BACuB,aAGrB,4DACyB,aAG3B,UACE,gBAIF,QACE,kBAKF,cACE,UAGF,uBACW,sBACX,iCAGA,uCACA,mDAGA,uBACE,+BAGF,qCAEE,oEAGF,gBACE,+CACA,wCAMJ,yBAGM,uBACE,aACA,cACA,UACA,+CACA,8BAGF,qDAEA,wCACE,MACA,UAIJ,qCACE,SACA,OACA,gCAGF,4BACE,UACA","file":"navbar-bootstrap.min.css"} -------------------------------------------------------------------------------- /.github/workflows/badges.yml: -------------------------------------------------------------------------------- 1 | name: badges 2 | on: 3 | push: 4 | # update README badge only if the README file changes 5 | # or if the package.json file changes, or this file changes 6 | # IMPORTANT: branches must match 7 | branches: 8 | - master 9 | paths: 10 | - README.md 11 | - package.json 12 | - .github/workflows/badges.yml 13 | pull_request: 14 | # update README badge only if the README file changes 15 | # or if the package.json file changes, or this file changes 16 | # IMPORTANT: branches must match 17 | branches: 18 | - master 19 | paths: 20 | - README.md 21 | - package.json 22 | - .github/workflows/badges.yml 23 | 24 | jobs: 25 | badges: 26 | runs-on: ubuntu-24.04 27 | steps: 28 | - name: Checkout 🛎 29 | uses: actions/checkout@v3 30 | 31 | - name: Update version badges 🏷 32 | run: npx -p dependency-version-badge update-badge typescript vite vitest 33 | 34 | - name: Commit any changed files 💾 35 | uses: stefanzweifel/git-auto-commit-action@v4 36 | with: 37 | branch: master 38 | file_pattern: README.md 39 | commit_message: Updated badges 40 | -------------------------------------------------------------------------------- /docs/src/css/navbar-left-menu.min.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["../../../src/scss/_root.scss","../../../src/scss/_mixins.scss"],"names":[],"mappings":"AAGA,MAEE,qBACA,qBACA,yBACA,qBACA,yBACA,iBACA,2CACA,2CACA,iDACA,wBACA,4CACA,4CACA,kDACA,0BACA,8BACA,4BACA,0BACA,oBACA,oCACA,sCACA,qDACA,qDACA,2BACA,2BACA,gCACA,sEACA,iDAGA,4BACA,4BACA,iCACA,+BACA,yBACA,4FACA,2CACA,0BACA,iDACA,wCACA,6BACA,6CACA,4CACA,iCACA,wDACA,8CACA,oCACA,oDACA,uBACA,yBACA,qCACA,0BACA,6CACA,+FCyDA,uDAIE,0DACA,6BAIF,6FAME,aACA,mBACA,mBACA,8BAOF,KAEE,aAIE,8BACA,kCAIF,aACE,UACA,SACA,gBAGF,QACE,8BAEA,uBACE,iBACA,gBACA,mCACA,uCAIJ,+BAGA,iCAEE,gBACA,uBACA,mBAKJ,8BAEE,aACA,mBACA,kBACA,iCACA,qCACA,+BACA,oCAIF,0FAGE,cAGF,0BACE,oCAIF,0DAGS,aAIP,qCACE,uCAKJ,wBAEE,gBACA,sBACA,YACA,uCAGF,WACE,gBAobF,wBAEE,4BACA,6BACA,kCACA,kBACA,kBAGF,WACE,0CAxbF,gBACE,UACA,6CAGF,yBACE,QACE,yBAGF,iDAEE,kBAIF,kDAGE,aAIF,8BACuB,aAGrB,4DACyB,aAI3B,8BACiB,aAGjB,QAEE,kBACA,cACA,2CACA,iDACA,UAEA,6BAGE,gBACA,mDACA,uDAKJ,cACE,UAGF,qCAEE,8DAGF,0BACY,sBAKZ,eACE,gBACA,gBACA,qCAIF,oCAEE,eAWF,6CAIE,wEACA,oCAIF,gBACE,+BAIF,gBACE,+CACA,uCAIF,UACE,6BAGF,WAGE,wCAEA,cACE,sCAGF,oFACA,sFACA,sFACA,uFAUF,uBAEE,2BAIF,oBACE,uCAGF,yBAGI,uBAEE,mCAQF,oEAEE,iCACA,yCAQF,qIAEE,kCACA,2CAOR,8BAEE,mBACA,+BAEA,0CACE,mBACA,sCACA,aAKF,gFAEE,2BACA,kCAQJ,yBACE,QAEE,qCAGA,mCAIE,6BAEE,kCACA,0CAGF,eACE,0CAMA,qCACE,wCACA,gDAOF,kGAEE,yCACA,iDAOR,oCAEE,kCASE,4GACE,wCACA,gDAMN,WACE,kCAIA,iDACE,kCAGF,qCACE,yCA+EN,KACE,sBAEA,yBAEI,gBACE,aACA,cACA,UACA,iDACA,2BAGF,UACE,gBAIJ,8BACE,gDAGF,qBACE,iCAGF,gBACE,aACA","file":"navbar-left-menu.min.css"} -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: ci 2 | on: 3 | push: 4 | branches: 5 | - master 6 | paths: 7 | - src 8 | - test 9 | - package.json 10 | - .github/workflows/ci.yml 11 | pull_request: 12 | branches: 13 | - master 14 | paths: 15 | - src 16 | - test 17 | - package.json 18 | - .github/workflows/ci.yml 19 | jobs: 20 | test: 21 | runs-on: ubuntu-24.04 22 | name: Test on Node 23 | steps: 24 | - name: Checkout 25 | uses: actions/checkout@v4 26 | 27 | - name: Install pnpm 28 | uses: pnpm/action-setup@v3 29 | 30 | - name: Deno Setup 31 | uses: denoland/setup-deno@v2 32 | with: 33 | deno-version: v2.x 34 | 35 | - name: Setup Node 36 | uses: actions/setup-node@v4 37 | with: 38 | node-version: 22 39 | cache: pnpm 40 | 41 | - name: Install 42 | run: pnpm install --no-frozen-lockfile 43 | 44 | - name: Install Playwright 45 | run: pnpm exec playwright install 46 | 47 | - name: Lint TS & CSS 48 | run: pnpm lint 49 | 50 | - name: Build JS 51 | run: pnpm build 52 | 53 | - name: Build CSS 54 | run: pnpm compile 55 | 56 | - name: Run tests 57 | run: pnpm test 58 | 59 | 60 | - name: Upload coverage report on Node 20 to coveralls.io... 61 | uses: coverallsapp/github-action@master 62 | with: 63 | github-token: ${{ secrets.GITHUB_TOKEN }} -------------------------------------------------------------------------------- /dist/css/navbar.min.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["../../src/scss/_root.scss","../../src/scss/_mixins.scss"],"names":[],"mappings":"AAGA,MAEE,qBACA,qBACA,yBACA,qBACA,yBACA,iBACA,2CACA,2CACA,iDACA,wBACA,4CACA,4CACA,kDACA,0BACA,8BACA,4BACA,0BACA,oBACA,oCACA,sCACA,qDACA,qDACA,2BACA,2BACA,gCACA,sEACA,iDAGA,4BACA,4BACA,iCACA,+BACA,yBACA,4FACA,2CACA,0BACA,iDACA,wCACA,6BACA,6CACA,4CACA,iCACA,wDACA,8CACA,oCACA,oDACA,uBACA,yBACA,qCACA,0BACA,6CACA,+FCpDA,QACE,aACA,mBACA,8BACA,gDACA,8BAGA,kCAEA,YACE,aACA,gBACA,sBACA,YAGF,wBACE,aAGF,aACE,sBAGF,eACE,aACA,mBACA,gCACA,oCACA,wCACA,qBACA,mBAMJ,yBACE,QACE,kBACA,qBACA,mBACA,2BAEA,YACE,aACA,gBACA,mBACA,mBACA,8BAGF,aACE,oBA6BJ,kGACE,2BAIJ,yBAEI,qCACE,kCAMN,QACE,2BACA,8BAEA,eACE,iCAOJ,uDAIE,0DACA,6BAIF,6FAME,aACA,mBACA,mBACA,8BAOF,KAEE,aASA,aACE,UACA,SACA,gBAGF,QACE,8BAEA,uBACE,iBACA,gBACA,mCACA,uCAIJ,+BAGA,iCAEE,gBACA,uBACA,mBAKJ,8BAEE,aACA,mBACA,kBACA,iCACA,qCACA,+BACA,oCAIF,0FAGE,cAGF,0BACE,oCAIF,0DAGS,aAIP,qCACE,uCAKJ,wBAEE,gBACA,sBACA,YACA,uCAGF,WACE,gBAobF,wBAEE,4BACA,6BACA,kCACA,kBACA,kBAGF,WACE,0CAxbF,gBACE,UACA,6CAGF,yBACE,QACE,yBAGF,iDAEE,kBAIF,kDAGE,aAIF,8BACuB,aAGrB,4DACyB,aAI3B,8BACiB,aAGjB,QAEE,kBACA,cACA,2CACA,iDACA,UAEA,6BAGE,gBACA,mDACA,uDAKJ,cACE,UAGF,qCAEE,8DAGF,0BACY,sBAKZ,eACE,gBACA,gBACA,qCAIF,oCAEE,eAWF,6CAIE,wEACA,oCAIF,gBACE,+BAIF,gBACE,+CACA,uCAIF,UACE,6BAGF,WAGE,wCAEA,cACE,sCAGF,oFACA,sFACA,sFACA,uFAUF,uBAEE,2BAIF,oBACE,uCAGF,yBAGI,uBAEE,mCAQF,oEAEE,iCACA,yCAQF,qIAEE,kCACA,2CAOR,8BAEE,mBACA,+BAEA,0CACE,mBACA,sCACA,aAKF,gFAEE,2BACA,kCAQJ,yBACE,QAEE,qCAGA,mCAIE,6BAEE,kCACA,0CAGF,eACE,0CAMA,qCACE,wCACA,gDAOF,kGAEE,yCACA,iDAOR,oCAEE,kCASE,4GACE,wCACA,gDAMN,WACE,kCAIA,iDACE,kCAGF,qCACE,yCASJ,yBAGI,gBACE,2BACA,iDACA,8BAGF,8CAEA,iCACE,gBAIJ,8BACE,gDAGF,qBACE","file":"navbar.min.css"} -------------------------------------------------------------------------------- /docs/src/css/navbar-left.min.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["../../../src/scss/_root.scss","../../../src/scss/_mixins.scss"],"names":[],"mappings":"AAGA,MAEE,qBACA,qBACA,yBACA,qBACA,yBACA,iBACA,2CACA,2CACA,iDACA,wBACA,4CACA,4CACA,kDACA,0BACA,8BACA,4BACA,0BACA,oBACA,oCACA,sCACA,qDACA,qDACA,2BACA,2BACA,gCACA,sEACA,iDAGA,4BACA,4BACA,iCACA,+BACA,yBACA,4FACA,2CACA,0BACA,iDACA,wCACA,6BACA,6CACA,4CACA,iCACA,wDACA,8CACA,oCACA,oDACA,uBACA,yBACA,qCACA,0BACA,6CACA,+FCpDA,QACE,aACA,mBACA,8BACA,gDACA,8BAGA,kCAEA,YACE,aACA,gBACA,sBACA,YAGF,wBACE,aAGF,aACE,sBAGF,eACE,aACA,mBACA,gCACA,oCACA,wCACA,qBACA,mBA6BJ,yBACE,QACE,wBACA,2BACA,YAEA,YACE,aACA,sBAGF,aACE,uBAUJ,kGACE,2BAIJ,yBAEI,qCACE,kCAMN,QACE,2BACA,8BAEA,eACE,iCAOJ,uDAIE,0DACA,6BAIF,6FAME,aACA,mBACA,mBACA,8BAOF,KAEE,aASA,aACE,UACA,SACA,gBAGF,QACE,8BAEA,uBACE,iBACA,gBACA,mCACA,uCAIJ,+BAGA,iCAEE,gBACA,uBACA,mBAKJ,8BAEE,aACA,mBACA,kBACA,iCACA,qCACA,+BACA,oCAIF,0FAGE,cAGF,0BACE,oCAIF,0DAGS,aAIP,qCACE,uCAKJ,wBAEE,gBACA,sBACA,YACA,uCAGF,WACE,gBAobF,wBAEE,4BACA,6BACA,kCACA,kBACA,kBAGF,WACE,0CAxbF,gBACE,UACA,6CAGF,yBACE,QACE,yBAGF,iDAEE,kBAIF,kDAGE,aAIF,8BACuB,aAGrB,4DACyB,aAI3B,8BACiB,aAGjB,QAEE,kBACA,cACA,2CACA,iDACA,UAEA,6BAGE,gBACA,mDACA,uDAKJ,cACE,UAGF,qCAEE,8DAGF,0BACY,sBAKZ,eACE,gBACA,gBACA,qCAIF,oCAEE,eAWF,6CAIE,wEACA,oCAIF,gBACE,+BAIF,gBACE,+CACA,uCAIF,UACE,6BAGF,WAGE,wCAEA,cACE,sCAGF,oFACA,sFACA,sFACA,uFAUF,uBAEE,2BAIF,oBACE,uCAGF,yBAGI,uBAEE,mCAQF,oEAEE,iCACA,yCAQF,qIAEE,kCACA,2CAOR,8BAEE,mBACA,+BAEA,0CACE,mBACA,sCACA,aAKF,gFAEE,2BACA,kCAQJ,yBACE,QAEE,qCAGA,mCAIE,6BAEE,kCACA,0CAGF,eACE,0CAMA,qCACE,wCACA,gDAOF,kGAEE,yCACA,iDAOR,oCAEE,kCASE,4GACE,wCACA,gDAMN,WACE,kCAIA,iDACE,kCAGF,qCACE,yCA+EN,KACE,sBAEA,yBAEI,gBACE,aACA,cACA,UACA,iDACA,2BAGF,UACE,gBAIJ,8BACE,gDAGF,qBACE,iCAGF,gBACE,aACA","file":"navbar-left.min.css"} -------------------------------------------------------------------------------- /docs/src/css/navbar-bootstrap-extended.min.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["../../../src/scss/_root.scss","../../../src/scss/_mixins.scss"],"names":[],"mappings":"AAGA,MAEE,qBACA,qBACA,yBACA,qBACA,yBACA,iBACA,2CACA,2CACA,iDACA,wBACA,4CACA,4CACA,kDACA,0BACA,8BACA,4BACA,0BACA,oBACA,oCACA,sCACA,qDACA,qDACA,2BACA,2BACA,gCACA,sEACA,iDAGA,4BACA,4BACA,iCACA,+BACA,yBACA,4FACA,2CACA,0BACA,iDACA,wCACA,6BACA,6CACA,4CACA,iCACA,wDACA,8CACA,oCACA,oDACA,uBACA,yBACA,qCACA,0BACA,6CACA,+FCpDA,QACE,aACA,mBACA,8BACA,gDACA,8BAGA,kCAEA,YACE,aACA,gBACA,sBACA,YAGF,wBACE,aAGF,aACE,sBAGF,eACE,aACA,mBACA,gCACA,oCACA,wCACA,qBACA,mBAMJ,yBACE,QACE,kBACA,qBACA,mBACA,2BAEA,YACE,aACA,gBACA,mBACA,mBACA,8BAGF,aACE,oBA6BJ,kGACE,2BAIJ,yBAEI,qCACE,kCAMN,QACE,2BACA,8BAEA,eACE,iCAOJ,uDAIE,0DACA,6BAIF,6FAME,aACA,mBACA,mBACA,8BAOF,KAEE,aASA,aACE,UACA,SACA,gBAGF,QACE,8BAEA,uBACE,iBACA,gBACA,mCACA,uCAIJ,+BAGA,iCAEE,gBACA,uBACA,mBAKJ,8BAEE,aACA,mBACA,kBACA,iCACA,qCACA,+BACA,oCAIF,0FAGE,cAGF,0BACE,oCAIF,0DAGS,aAIP,qCACE,uCAKJ,wBAEE,gBACA,sBACA,YACA,uCAGF,WACE,gBAobF,wBAEE,4BACA,6BACA,kCACA,kBACA,kBAGF,WACE,0CAxbF,gBACE,UACA,6CAGF,yBACE,QACE,yBAGF,iDAEE,kBAIF,kDAGE,aAIF,8BACuB,aAGrB,4DACyB,aAI3B,8BACiB,aAGjB,QAEE,kBACA,cACA,2CACA,iDACA,UAEA,6BAGE,gBACA,mDACA,uDAKJ,cACE,UAGF,qCAEE,8DAGF,0BACY,sBAKZ,eACE,gBACA,gBACA,qCAIF,oCAEE,eAWF,6CAIE,wEACA,oCAIF,gBACE,+BAIF,gBACE,+CACA,uCAIF,UACE,6BAGF,WAGE,wCAEA,cACE,sCAGF,oFACA,sFACA,sFACA,uFAUF,uBAEE,2BAIF,oBACE,uCAGF,yBAGI,uBAEE,mCAQF,oEAEE,iCACA,yCAQF,qIAEE,kCACA,2CAOR,8BAEE,mBACA,+BAEA,0CACE,mBACA,sCACA,aAKF,gFAEE,2BACA,kCAQJ,yBACE,QAEE,qCAGA,mCAIE,6BAEE,kCACA,0CAGF,eACE,0CAMA,qCACE,wCACA,gDAOF,kGAEE,yCACA,iDAOR,oCAEE,kCASE,4GACE,wCACA,gDAMN,WACE,kCAIA,iDACE,kCAGF,qCACE,yCASJ,yBAGI,gBACE,2BACA,iDACA,8BAGF,8CAEA,iCACE,gBAIJ,8BACE,gDAGF,qBACE","file":"navbar-bootstrap-extended.min.css"} -------------------------------------------------------------------------------- /docs/src/css/navbar-right.min.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["../../../src/scss/_root.scss","../../../src/scss/_mixins.scss"],"names":[],"mappings":"AAGA,MAEE,qBACA,qBACA,yBACA,qBACA,yBACA,iBACA,2CACA,2CACA,iDACA,wBACA,4CACA,4CACA,kDACA,0BACA,8BACA,4BACA,0BACA,oBACA,oCACA,sCACA,qDACA,qDACA,2BACA,2BACA,gCACA,sEACA,iDAGA,4BACA,4BACA,iCACA,+BACA,yBACA,4FACA,2CACA,0BACA,iDACA,wCACA,6BACA,6CACA,4CACA,iCACA,wDACA,8CACA,oCACA,oDACA,uBACA,yBACA,qCACA,0BACA,6CACA,+FCpDA,QACE,aACA,mBACA,8BACA,gDACA,8BAGA,kCAEA,YACE,aACA,gBACA,sBACA,YAGF,wBACE,aAGF,aACE,sBAGF,eACE,aACA,mBACA,gCACA,oCACA,wCACA,qBACA,mBA6BJ,yBACE,QACE,wBACA,2BACA,YAEA,YACE,aACA,sBAGF,aACE,uBAUJ,kGACE,2BAIJ,yBAEI,qCACE,kCAMN,QACE,2BACA,8BAEA,eACE,iCAOJ,uDAIE,0DACA,6BAIF,6FAME,aACA,mBACA,mBACA,8BAOF,KAEE,aASA,aACE,UACA,SACA,gBAGF,QACE,8BAEA,uBACE,iBACA,gBACA,mCACA,uCAIJ,+BAGA,iCAEE,gBACA,uBACA,mBAKJ,8BAEE,aACA,mBACA,kBACA,iCACA,qCACA,+BACA,oCAIF,0FAGE,cAGF,0BACE,oCAIF,0DAGS,aAIP,qCACE,uCAKJ,wBAEE,gBACA,sBACA,YACA,uCAGF,WACE,gBAobF,wBAEE,4BACA,6BACA,kCACA,kBACA,kBAGF,WACE,0CAxbF,gBACE,UACA,6CAGF,yBACE,QACE,yBAGF,iDAEE,kBAIF,kDAGE,aAIF,8BACuB,aAGrB,4DACyB,aAI3B,8BACiB,aAGjB,QAEE,kBACA,cACA,2CACA,iDACA,UAEA,6BAGE,gBACA,mDACA,uDAKJ,cACE,UAGF,qCAEE,8DAGF,0BACY,sBAKZ,eACE,gBACA,gBACA,qCAIF,oCAEE,eAWF,6CAIE,wEACA,oCAIF,gBACE,+BAIF,gBACE,+CACA,uCAIF,UACE,6BAGF,WAGE,wCAEA,cACE,sCAGF,oFACA,sFACA,sFACA,uFAUF,uBAEE,2BAIF,oBACE,uCAGF,yBAGI,uBAEE,mCAQF,oEAEE,iCACA,yCAQF,qIAEE,kCACA,2CAOR,8BAEE,mBACA,+BAEA,0CACE,mBACA,sCACA,aAKF,gFAEE,2BACA,kCAQJ,yBACE,QAEE,qCAGA,mCAIE,6BAEE,kCACA,0CAGF,eACE,0CAMA,qCACE,wCACA,gDAOF,kGAEE,yCACA,iDAOR,oCAEE,kCASE,4GACE,wCACA,gDAMN,WACE,kCAIA,iDACE,kCAGF,qCACE,yCAmHN,KACE,sBAEA,yBAEI,gBACE,aACA,yBACA,UACA,iDACA,0BAGF,UACE,gBAIJ,8BACE,iDAGF,qBACE,iCAGF,gBACE,aACA,iCAGF,qBACE,wCACA","file":"navbar-right.min.css"} -------------------------------------------------------------------------------- /dist/css/navbar.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["../../src/scss/_root.scss","../../src/scss/_mixins.scss"],"names":[],"mappings":"AAGA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACpDA;EACE;EACA;EACA;EACA;EACA;EAGA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMJ;EACE;IACE;IACA;IACA;IACA;;EAEA;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;;;AA6BJ;AAAA;AAAA;EACE;;;AAIJ;EAEI;IACE;;;AAMN;EACE;EACA;;AAEA;EACE;;;AAOJ;AAAA;AAAA;AAAA;EAIE;EACA;;;AAIF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;EACA;EACA;;;AAOF;EAEE;;AASA;EACE;EACA;EACA;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EAAS;;AAGT;AAAA;EAEE;EACA;EACA;;;AAKJ;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;AAAA;AAAA;EAGE;;;AAGF;EACE;;;AAIF;AAAA;AAAA;AAAA;EAGS;;;AAIP;EACE;;;AAKJ;AAAA;EAEE;EACA;EACA;EACA;;;AAGF;EACE;;;AAobF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAxbF;EACE;EACA;;;AAGF;EACE;IACE;;EAGF;AAAA;IAEE;;EAIF;AAAA;AAAA;IAGE;;EAIF;AAAA;IACuB;;EAGrB;AAAA;IACyB;;EAI3B;AAAA;IACiB;;EAGjB;IAEE;IACA;IACA;IACA;IACA;;EAEA;AAAA;IAGE;IACA;IACA;;EAKJ;IACE;;EAGF;AAAA;IAEE;;EAGF;AAAA;IACY;;EAKZ;IACE;IACA;;EACA;IAAgB;;EAIlB;AAAA;IAEE;;EAWF;AAAA;AAAA;IAIE;IACA;;EAIF;IACE;;EAIF;IACE;IACA;;EAIF;IACE;;EAGF;IAGE;;EAEA;IACE;IAAoB;IAAY;;EAGlC;IAAO;;EACP;IAAO;;EACP;IAAO;;EACP;IAAO;;;AAUT;AAAA;EAEE;;AAIF;EACE;;AAGF;EAGI;AAAA;IAEE;;EAQF;AAAA;AAAA;AAAA;IAEE;IACA;;EAQF;AAAA;AAAA;AAAA;AAAA;AAAA;IAEE;IACA;;;;AAOR;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;EACA;EACA;;;AAKF;AAAA;EAEE;EACA;;;AAQJ;EACE;IAEE;IAGA;;EAIE;AAAA;IAEE;IACA;;EAGF;IACE;;EAMA;IACE;IACA;;EAOF;AAAA;AAAA;IAEE;IACA;;EAOR;AAAA;IAEE;;EASE;AAAA;AAAA;AAAA;IACE;IACA;;EAMN;IACE;;EAIA;IACE;;EAGF;IACE;;;AASJ;EAGI;IACE;IAAe;IACf;IACA;;EAGF;IAAe;;EAEf;IACE;IAAQ;;EAIZ;IACE;IAAW;IAAS;;EAGtB;IACE;IAAY","file":"navbar.css"} -------------------------------------------------------------------------------- /docs/src/css/navbar-combo.min.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["../../../src/scss/_root.scss","../../../src/scss/_mixins.scss"],"names":[],"mappings":"AAGA,MAEE,qBACA,qBACA,yBACA,qBACA,yBACA,iBACA,2CACA,2CACA,iDACA,wBACA,4CACA,4CACA,kDACA,0BACA,8BACA,4BACA,0BACA,oBACA,oCACA,sCACA,qDACA,qDACA,2BACA,2BACA,gCACA,sEACA,iDAGA,4BACA,4BACA,iCACA,+BACA,yBACA,4FACA,2CACA,0BACA,iDACA,wCACA,6BACA,6CACA,4CACA,iCACA,wDACA,8CACA,oCACA,oDACA,uBACA,yBACA,qCACA,0BACA,6CACA,+FCpDA,QACE,aACA,mBACA,8BACA,gDACA,8BAGA,kCAEA,YACE,aACA,gBACA,sBACA,YAGF,wBACE,aAGF,aACE,sBAGF,eACE,aACA,mBACA,gCACA,oCACA,wCACA,qBACA,mBAMJ,yBACE,QACE,kBACA,qBACA,mBACA,2BAEA,YACE,aACA,gBACA,mBACA,mBACA,8BAGF,aACE,oBA6BJ,kGACE,2BAIJ,yBAEI,qCACE,kCAMN,QACE,2BACA,8BAEA,eACE,iCAOJ,uDAIE,0DACA,6BAIF,6FAME,aACA,mBACA,mBACA,8BAOF,KAEE,aASA,aACE,UACA,SACA,gBAGF,QACE,8BAEA,uBACE,iBACA,gBACA,mCACA,uCAIJ,+BAGA,iCAEE,gBACA,uBACA,mBAKJ,8BAEE,aACA,mBACA,kBACA,iCACA,qCACA,+BACA,oCAIF,0FAGE,cAGF,0BACE,oCAIF,0DAGS,aAIP,qCACE,uCAKJ,wBAEE,gBACA,sBACA,YACA,uCAGF,WACE,gBAobF,wBAEE,4BACA,6BACA,kCACA,kBACA,kBAGF,WACE,0CAxbF,gBACE,UACA,6CAGF,yBACE,QACE,yBAGF,iDAEE,kBAIF,kDAGE,aAIF,8BACuB,aAGrB,4DACyB,aAI3B,8BACiB,aAGjB,QAEE,kBACA,cACA,2CACA,iDACA,UAEA,6BAGE,gBACA,mDACA,uDAKJ,cACE,UAGF,qCAEE,8DAGF,0BACY,sBAKZ,eACE,gBACA,gBACA,qCAIF,oCAEE,eAWF,6CAIE,wEACA,oCAIF,gBACE,+BAIF,gBACE,+CACA,uCAIF,UACE,6BAGF,WAGE,wCAEA,cACE,sCAGF,oFACA,sFACA,sFACA,uFAUF,uBAEE,2BAIF,oBACE,uCAGF,yBAGI,uBAEE,mCAQF,oEAEE,iCACA,yCAQF,qIAEE,kCACA,2CAOR,8BAEE,mBACA,+BAEA,0CACE,mBACA,sCACA,aAKF,gFAEE,2BACA,kCAQJ,yBACE,QAEE,qCAGA,mCAIE,6BAEE,kCACA,0CAGF,eACE,0CAMA,qCACE,wCACA,gDAOF,kGAEE,yCACA,iDAOR,oCAEE,kCASE,4GACE,wCACA,gDAMN,WACE,kCAIA,iDACE,kCAGF,qCACE,yCASJ,yBAGI,wBACE,2BACA,iDACA,8BAGF,sDAEA,yCACE,gBAIJ,sCACE,gDAGF,6BACE,kCAiDN,UACE,sBAEA,yBAEI,qBACE,aACA,cACA,UACA,iDACA,2BAGF,eACE,gBAIJ,mCACE,gDAGF,0BACE,iCAGF,qBACE,aACA,iCAQN,WACE,sBAEA,yBAEI,sBACE,aACA,yBACA,UACA,iDACA,0BAGF,gBACE,gBAIJ,oCACE,iDAGF,2BACE,iCAGF,sBACE,aACA,iCAGF,2BACE,wCACA","file":"navbar-combo.min.css"} -------------------------------------------------------------------------------- /docs/src/css/navbar-combo-rtl.min.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["../../../src/scss/_root.scss","../../../src/scss/_mixins.scss"],"names":[],"mappings":"AAGA,MAEE,qBACA,qBACA,yBACA,qBACA,yBACA,iBACA,2CACA,2CACA,iDACA,wBACA,4CACA,4CACA,kDACA,0BACA,8BACA,4BACA,0BACA,oBACA,oCACA,sCACA,qDACA,qDACA,2BACA,2BACA,gCACA,sEACA,iDAGA,4BACA,4BACA,iCACA,+BACA,yBACA,4FACA,2CACA,0BACA,iDACA,wCACA,6BACA,6CACA,4CACA,iCACA,wDACA,8CACA,oCACA,oDACA,uBACA,yBACA,qCACA,0BACA,6CACA,+FCpDA,QACE,aACA,mBACA,8BACA,gDACA,8BAGA,kCAEA,YACE,aACA,gBACA,sBACA,YAGF,wBACE,aAGF,aACE,sBAGF,eACE,aACA,mBACA,gCACA,oCACA,wCACA,qBACA,mBAMJ,yBACE,QACE,kBACA,qBACA,mBACA,2BAEA,YACE,aACA,gBACA,mBACA,mBACA,8BAGF,aACE,oBA6BJ,kGACE,2BAIJ,yBAEI,qCACE,kCAMN,QACE,2BACA,8BAEA,eACE,iCAOJ,uDAIE,0DACA,6BAIF,6FAME,aACA,mBACA,mBACA,8BAOF,KAEE,aASA,aACE,UACA,SACA,gBAGF,QACE,8BAEA,uBACE,iBACA,gBACA,mCACA,uCAIJ,+BAGA,iCAEE,gBACA,uBACA,mBAKJ,8BAEE,aACA,mBACA,kBACA,iCACA,qCACA,+BACA,oCAIF,0FAGE,cAGF,0BACE,oCAIF,0DAGS,aAIP,qCACE,uCAKJ,wBAEE,gBACA,sBACA,YACA,uCAGF,WACE,gBAobF,wBAEE,4BACA,6BACA,kCACA,kBACA,kBAGF,WACE,0CAxbF,gBACE,UACA,6CAGF,yBACE,QACE,yBAGF,iDAEE,kBAIF,kDAGE,aAIF,8BACuB,aAGrB,4DACyB,aAI3B,8BACiB,aAGjB,QAEE,kBACA,cACA,2CACA,iDACA,UAEA,6BAGE,gBACA,mDACA,uDAKJ,cACE,UAGF,qCAEE,8DAGF,0BACY,sBAKZ,eACE,gBACA,gBACA,qCAIF,oCAEE,eAWF,6CAIE,wEACA,oCAIF,gBACE,+BAIF,gBACE,+CACA,uCAIF,UACE,6BAGF,WAGE,wCAEA,cACE,sCAGF,oFACA,sFACA,sFACA,uFAUF,uBAEE,2BAIF,oBACE,uCAGF,yBAGI,uBAEE,mCAQF,oEAEE,iCACA,yCAQF,qIAEE,kCACA,2CAOR,8BAEE,mBACA,+BAEA,0CACE,mBACA,sCACA,aAKF,gFAEE,2BACA,kCAQJ,yBACE,QAEE,qCAGA,mCAIE,6BAEE,kCACA,0CAGF,eACE,0CAMA,qCACE,wCACA,gDAOF,kGAEE,yCACA,iDAOR,oCAEE,kCASE,4GACE,wCACA,gDAMN,WACE,kCAIA,iDACE,kCAGF,qCACE,yCAsCJ,yBAGI,wBACE,4BACA,iDACA,8BAGF,qDAEA,yCACE,2BAIJ,sCACE,2DAGF,6BACE,iCAGF,6BACE,wCACA,eAKJ,6BACE,UACA,8CACA,cAOJ,WACE,sBAEA,yBAEI,sBACE,aACA,cACA,UACA,iDACA,2BAGF,gBACE,gBAIJ,oCACE,gDAGF,2BACE,iCAGF,sBACE,aACA,iCAQN,UACE,sBAEA,yBAEI,qBACE,aACA,yBACA,UACA,iDACA,0BAGF,eACE,gBAIJ,mCACE,iDAGF,0BACE,iCAGF,qBACE,aACA,iCAGF,0BACE,wCACA","file":"navbar-combo-rtl.min.css"} -------------------------------------------------------------------------------- /.github/workflows/codeql.yml: -------------------------------------------------------------------------------- 1 | # For most projects, this workflow file will not need changing; you simply need 2 | # to commit it to your repository. 3 | # 4 | # You may wish to alter this file to override the set of languages analyzed, 5 | # or to provide custom queries or build logic. 6 | # 7 | # ******** NOTE ******** 8 | # We have attempted to detect the languages in your repository. Please check 9 | # the `language` matrix defined below to confirm you have the correct set of 10 | # supported CodeQL languages. 11 | # 12 | name: "CodeQL" 13 | 14 | on: 15 | push: 16 | branches: [ master ] 17 | paths: 18 | - src 19 | - test 20 | - package.json 21 | - .github/workflows/ci.yml 22 | pull_request: 23 | # The branches below must be a subset of the branches above 24 | branches: [ master ] 25 | paths: 26 | - src 27 | - test 28 | - package.json 29 | - .github/workflows/ci.yml 30 | 31 | jobs: 32 | analyze: 33 | name: Analyze 34 | runs-on: ubuntu-latest 35 | permissions: 36 | actions: read 37 | contents: read 38 | security-events: write 39 | 40 | strategy: 41 | fail-fast: false 42 | matrix: 43 | language: [ 'typescript' ] 44 | # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ] 45 | # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support 46 | 47 | steps: 48 | - name: Checkout repository 49 | uses: actions/checkout@v3 50 | 51 | # Initializes the CodeQL tools for scanning. 52 | - name: Initialize CodeQL 53 | uses: github/codeql-action/init@v2 54 | with: 55 | languages: ${{ matrix.language }} 56 | # If you wish to specify custom queries, you can do so here or in a config file. 57 | # By default, queries listed here will override any specified in a config file. 58 | # Prefix the list here with "+" to use these queries and those in the config file. 59 | # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs 60 | # queries: security-extended,security-and-quality 61 | config-file: ./.github/codeql/codeql-config.yml 62 | 63 | # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). 64 | # If this step fails, then you should remove it and run the build manually (see below) 65 | - name: Autobuild 66 | uses: github/codeql-action/autobuild@v2 67 | 68 | # ℹ️ Command-line programs to run using the OS shell. 69 | # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun 70 | 71 | # If the Autobuild fails above, remove it and uncomment the following three lines. 72 | # modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance. 73 | 74 | # - run: | 75 | # echo "Run, Build Application using script" 76 | # ./location_of_script_within_repo/buildscript.sh 77 | 78 | - name: Perform CodeQL Analysis 79 | uses: github/codeql-action/analyze@v2 80 | -------------------------------------------------------------------------------- /src/scss/_root.scss: -------------------------------------------------------------------------------- 1 | @use "variables"; 2 | @use "functions"; 3 | 4 | :root { 5 | // paddings must have a unit 6 | --nv-padding-x: #{functions.real-size(variables.$navbar_padding_x, 1)}; 7 | --nv-padding-y: #{functions.real-size(variables.$navbar_padding_y, 1)}; 8 | --nv-line-height: #{variables.$navbar_line_height}; 9 | --nv-font-size: #{variables.$navbar_font_size}; 10 | --nv-primary-color: #{variables.$primary_color}; 11 | --nv-bg: #{variables.$navbar_background}; 12 | --nv-text-color: #{functions.get-color(variables.$navbar_text_color, variables.$navbar_background, .55)}; 13 | --nv-link-color: #{functions.get-color(variables.$navbar_link_color, variables.$navbar_background, .75)}; 14 | --nv-link-color-hover: #{functions.get-color(variables.$navbar_link_color_hover, variables.$navbar_background, .95)}; 15 | --nv-subnav-bg: #{variables.$subnav_background}; 16 | --nv-subnav-text-color: #{functions.get-color(variables.$subnav_text_color, variables.$subnav_background, .55)}; 17 | --nv-subnav-link-color: #{functions.get-color(variables.$subnav_link_color, variables.$subnav_background, .75)}; 18 | --nv-subnav-link-color-hover: #{functions.get-color(variables.$subnav_link_color_hover, variables.$subnav_background, .95)}; 19 | --nv-item-font-size: #{variables.$root_item_font_size}; 20 | --nv-item-line-height: #{variables.$root_item_line_height}; 21 | --nv-item-padding-y: #{variables.$item_padding_y}; 22 | --nv-item-padding-x: #{variables.$item_padding_x}; 23 | --nv-item-margin: #{variables.$root_item_margin}; 24 | --nv-subnav-item-font-size: #{variables.$subnav_item_font_size}; 25 | --nv-subnav-item-line-height: #{variables.$subnav_item_line_height}; 26 | --nv-subnav-item-padding-x: var(--nv-item-padding-x); 27 | --nv-subnav-item-padding-y: var(--nv-item-padding-y); 28 | --nv-subnav-item-margin: #{variables.$subnav_item_margin}; 29 | --nv-brand-font-size: #{variables.$brand_font_size}; 30 | --nv-brand-line-height: #{variables.$brand_line_height}; 31 | --nv-brand-padding: var(--nv-item-padding-y) var(--nv-item-padding-x); 32 | --nv-brand-link-color: #{functions.get-color(variables.$brand_link_color, variables.$navbar_background, .95)}; 33 | 34 | // paddings must have a unit 35 | --nv-subnav-padding-x: #{functions.real-size(variables.$subnav_padding_x, 1)}; 36 | --nv-subnav-padding-y: #{functions.real-size(variables.$subnav_padding_y, 1)}; 37 | --nv-subnav-line-height: #{variables.$subnav_line_height}; 38 | --nv-subnav-font-size: #{variables.$subnav_font_size}; 39 | --nv-subnav-width: #{variables.$subnav_width}; 40 | --nv-subnav-larger-width: calc(var(--nv-subnav-width) * 3 + var(--nv-subnav-padding-x) * 2); 41 | --nv-item-color: #{functions.get-item-color(variables.$root_item_color, variables.$root_item_background, variables.$navbar_background, .65)}; 42 | --nv-item-bg: #{variables.$root_item_background}; 43 | --nv-item-hover-color: #{functions.get-item-color(variables.$root_item_hover_color, variables.$root_item_hover_background, variables.$navbar_background, .85)}; 44 | --nv-item-hover-bg: #{variables.$root_item_hover_background}; 45 | --nv-item-active-color: #{functions.get-item-color(variables.$root_item_active_color, variables.$root_item_active_background, variables.$navbar_background, 1)}; 46 | --nv-item-active-bg: var(--nv-primary-color); 47 | --nv-subnav-item-color: #{functions.get-item-color(variables.$subnav_item_color, variables.$subnav_item_background, variables.$subnav_background, .65)}; 48 | --nv-subnav-item-bg: #{variables.$subnav_item_background}; 49 | --nv-subnav-item-hover-color: #{functions.get-item-color(variables.$subnav_item_hover_color, variables.$subnav_item_hover_background, variables.$subnav_background, .85)}; 50 | --nv-subnav-item-hover-bg: #{variables.$subnav_item_hover_background}; 51 | --nv-subnav-item-active-color: #{functions.get-item-color(variables.$subnav_item_active_color, variables.$subnav_item_active_background, variables.$subnav_background, 1)}; 52 | --nv-subnav-item-active-bg: var(--nv-primary-color); 53 | --nv-subnav-zindex: #{variables.$subnav_zindex}; 54 | --nv-icon-height: #{functions.get-icon-height()}; 55 | --nv-toggle-padding: #{variables.$navbar_toggle_padding}; 56 | --nv-base-radius: #{variables.$base_radius}; 57 | --nv-expanded-bg: #{variables.$mobile_expanded_background}; 58 | --nv-subnav-shadow: #{variables.$subnav_shadow}; 59 | } 60 | -------------------------------------------------------------------------------- /test/fixtures/getMarkup.ts: -------------------------------------------------------------------------------- 1 | export default function getMarkup() { 2 | const markup = ` 3 |
4 | 78 |
79 | `; 80 | 81 | const container = document.createElement('div'); 82 | container.innerHTML = markup; 83 | 84 | return container; 85 | } 86 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Navbar - Modern Navigation Component 2 | [![Coverage Status](https://coveralls.io/repos/github/thednp/navbar/badge.svg)](https://coveralls.io/github/thednp/navbar) 3 | [![ci](https://github.com/thednp/navbar/actions/workflows/ci.yml/badge.svg)](https://github.com/thednp/navbar/actions/workflows/ci.yml) 4 | [![NPM Version](https://img.shields.io/npm/v/@thednp/navbar.svg)](https://www.npmjs.com/package/@thednp/navbar) 5 | [![NPM Downloads](https://img.shields.io/npm/dm/@thednp/navbar.svg)](http://npm-stat.com/charts.html?package=@thednp/navbar) 6 | [![jsDeliver](https://data.jsdelivr.com/v1/package/npm/@thednp/navbar/badge)](https://www.jsdelivr.com/package/npm/@thednp/navbar) 7 | [![typescript version](https://img.shields.io/badge/typescript-5.8.3-brightgreen)](https://www.typescriptlang.org/) 8 | [![vitest version](https://img.shields.io/badge/vitest-3.1.4-brightgreen)](https://vitest.dev/) 9 | [![vite version](https://img.shields.io/badge/vite-6.3.5-brightgreen)](https://github.com/vitejs) 10 | 11 | The mobile first menu navigation for today's modern web, sourced with Typescript and packed with lots of features. 12 | 13 | 14 | ## Demo 15 | Download the package and check the **docs** folder, or check it online [here](http://thednp.github.io/navbar). 16 | 17 | # Navbar Highlights 18 | * Mobile First Design 19 | * Accessibility Focus 20 | * TypeScript sourced and powerful build tools 21 | * SCSS sources with flexible mixins and CSS variables 22 | * very light footprint, `5kb` in size when minified 23 | * 3 sets of positions top (main), left or right 24 | * provides a set of options for JavaScript initialization 25 | * DATA API allows you to automatically initiate without JS invocation 26 | * modern browsers supported 27 | 28 | 29 | ## How It Works 30 | **On mobile** 31 | * uses the native events behavior, it requires some elements to click on 32 | * shows the ` 87 |
88 | 92 |
93 | 94 | ``` 95 | 96 | Alternatively you can use only the menu itself and use the specific attribute: 97 | 98 | ```html 99 |
100 | 104 |
105 | ``` 106 | 107 | Other initialization and markup options apply, explained in [the demo](http://thednp.github.io/navbar/). 108 | 109 | 110 | ## Typescript / ES 111 | ```ts 112 | import Navbar from '@thednp/navbar' 113 | 114 | const myNav = new Navbar('#myNav') 115 | ``` 116 | 117 | 118 | ## License 119 | Navbar is released under [MIT License](https://github.com/thednp/navbar/blob/master/LICENSE). 120 | -------------------------------------------------------------------------------- /docs/src/css/navbar-bootstrap.min.css: -------------------------------------------------------------------------------- 1 | :root{--nv-padding-x: 0rem;--nv-padding-y: 0rem;--nv-line-height: 1.5rem;--nv-font-size: 14px;--nv-primary-color: #069;--nv-bg: #687c86;--nv-text-color: rgba(255, 255, 255, 0.55);--nv-link-color: rgba(255, 255, 255, 0.75);--nv-link-color-hover: rgba(255, 255, 255, 0.95);--nv-subnav-bg: #dadee0;--nv-subnav-text-color: rgba(0, 0, 0, 0.55);--nv-subnav-link-color: rgba(0, 0, 0, 0.75);--nv-subnav-link-color-hover: rgba(0, 0, 0, 0.95);--nv-item-font-size: 14px;--nv-item-line-height: 1.5rem;--nv-item-padding-y: 0.5rem;--nv-item-padding-x: 1rem;--nv-item-margin: 0;--nv-subnav-item-font-size: inherit;--nv-subnav-item-line-height: inherit;--nv-subnav-item-padding-x: var(--nv-item-padding-x);--nv-subnav-item-padding-y: var(--nv-item-padding-y);--nv-subnav-item-margin: 0;--nv-brand-font-size: 18px;--nv-brand-line-height: inherit;--nv-brand-padding: var(--nv-item-padding-y) var(--nv-item-padding-x);--nv-brand-link-color: rgba(255, 255, 255, 0.95);--nv-subnav-padding-x: 0rem;--nv-subnav-padding-y: 0rem;--nv-subnav-line-height: inherit;--nv-subnav-font-size: inherit;--nv-subnav-width: 200px;--nv-subnav-larger-width: calc(var(--nv-subnav-width) * 3 + var(--nv-subnav-padding-x) * 2);--nv-item-color: rgba(255, 255, 255, 0.65);--nv-item-bg: transparent;--nv-item-hover-color: rgba(255, 255, 255, 0.85);--nv-item-hover-bg: rgba(0, 0, 0, 0.35);--nv-item-active-color: #fff;--nv-item-active-bg: var(--nv-primary-color);--nv-subnav-item-color: rgba(0, 0, 0, 0.65);--nv-subnav-item-bg: transparent;--nv-subnav-item-hover-color: rgba(255, 255, 255, 0.85);--nv-subnav-item-hover-bg: rgba(0, 0, 0, 0.4);--nv-subnav-item-active-color: #fff;--nv-subnav-item-active-bg: var(--nv-primary-color);--nv-subnav-zindex: 50;--nv-icon-height: 1.5rem;--nv-toggle-padding: 0.125rem 0.5rem;--nv-base-radius: 0.25rem;--nv-expanded-bg: rgba(255, 255, 255, 0.075);--nv-subnav-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.25), 1px 1px 0 0 rgba(0, 0, 0, 0.15) inset}.navbar-light .subnav-toggle{color:rgb(var(--bs-dark-rgb), 0.55)}.navbar-light .open-mobile>.subnav-toggle{color:rgb(var(--bs-dark-rgb)/75%);background:rgb(var(--bs-dark-rgb)/15%)}.navbar-dark .subnav-toggle,.navbar:not(.navbar-light) .subnav-toggle{color:rgb(var(--bs-light-rgb)/55%)}.navbar-dark .open-mobile>.subnav-toggle,.navbar:not(.navbar-light) .open-mobile>.subnav-toggle{color:rgb(var(--bs-light-rgb)/75%);background:rgb(var(--bs-light-rgb)/15%)}@media(min-width: 768px){.navbar-nav li>.subnav{box-shadow:var(--nv-subnav-shadow)}.navbar-light .subnav{background-color:#fff}.navbar-light .navbar-nav li li.open>a.nav-link,.navbar-light .navbar-nav li li:hover>a.nav-link{color:rgb(var(--bs-dark-rgb), 0.75)}.navbar:not(.navbar-light) .subnav,.navbar-dark .subnav{background-color:rgb(var(--bs-dark-rgb), 1)}.navbar:not(.navbar-light) .navbar-nav li li.open>a.nav-link,.navbar:not(.navbar-light) .navbar-nav li li:hover>a.nav-link,.navbar-dark .navbar-nav li li.open>a.nav-link,.navbar-dark .navbar-nav li li:hover>a.nav-link{color:rgb(var(--bs-light-rgb), 0.75)}.navbar .navbar-nav li li.active>a.nav-link,.navbar .navbar-nav li li.active:hover>a.nav-link{color:var(--bs-white)}}.navbar{padding:var(--nv-padding-y) var(--nv-padding-x)}.subnav,.subnav-toggle+ul,.subnav-toggle+div,.parent-icon{display:none}li.open-mobile>.subnav-toggle+div,li.open-mobile>.subnav-toggle+ul,li.open-mobile>.subnav{display:block}.menu-icon,.parent-icon{width:var(--nv-icon-height);height:var(--nv-icon-height);line-height:var(--nv-icon-height);text-align:center;fill:currentcolor}.menu-icon{font-size:calc(var(--nv-icon-height)*.94)}.menu-icon+span{flex:auto;margin-left:var(--nv-item-padding-x)}.subnav-toggle{background:rgba(0,0,0,0);border:0;border-radius:.25rem}ul.subnav,div.subnav ul{flex-basis:100%;flex-direction:column;padding:0 0 0 var(--nv-item-padding-x)}.navbar-nav li{position:relative;display:flex;flex-flow:row wrap;align-items:center;justify-content:space-between;list-style:none}.navbar-nav .nav-link{display:flex;flex-direction:row;align-items:center;justify-content:space-between;text-decoration:none}.navbar-nav .nav-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(min-width: 768px){.subnav-toggle{display:none}.parent-icon,.subnav-toggle+div,.subnav-toggle+ul{display:flex}ul.subnav>li,div.subnav>ul>li{display:none}.open-position>ul.subnav>li,.open-position>div.subnav>ul>li{display:flex}.nav-link{flex-basis:100%}.subnav{position:absolute}div.subnav ul{padding:0}.navbar-text,ul.subnav{flex-direction:column}div.subnav>ul{flex-direction:row}ul.subnav{width:var(--nv-subnav-width)}div.subnav{min-width:var(--nv-subnav-larger-width)}.navbar-nav>li>.subnav{margin-top:var(--nv-padding-y)}ul.subnav,div.subnav,.subnav .subnav{padding:var(--nv-subnav-padding-y, 0) var(--nv-subnav-padding-x, 0)}.subnav .subnav{margin-top:calc(var(--nv-subnav-padding-y)*-1);margin-left:var(--nv-subnav-padding-x)}}@media(min-width: 768px){.navbar-nav li>.subnav{top:-99999em;display:block;opacity:0;transition:transform .5s ease,opacity .4s ease;transform:translate(0, -10px)}.navbar-nav li li>.subnav{transform:translate(-10px)}.navbar-nav li li.open-position>.subnav{top:0;left:100%}.navbar-nav li.open-position>.subnav{top:100%;left:0;z-index:var(--nv-subnav-zindex)}.navbar-nav li.open>.subnav{opacity:1;transform:translate(0)}}/*# sourceMappingURL=navbar-bootstrap.min.css.map */ 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@thednp/navbar", 3 | "version": "3.3.1", 4 | "description": "🧭 Navbar Modern Navigation Component", 5 | "author": "thednp", 6 | "license": "MIT", 7 | "homepage": "https://thednp.github.io/navbar", 8 | "source": "./src/ts/index.ts", 9 | "main": "./dist/js/navbar.js", 10 | "module": "./dist/js/navbar.mjs", 11 | "style": "./dist/css/navbar.min.css", 12 | "sass": "./src/scss/navbar.scss", 13 | "exports": { 14 | ".": { 15 | "types": "./dist/js/navbar.d.ts", 16 | "require": "./dist/js/navbar.cjs", 17 | "import": "./dist/js/navbar.mjs" 18 | }, 19 | "./navbar.css": { 20 | "require": "./dist/css/navbar.css", 21 | "import": "./dist/css/navbar.css" 22 | }, 23 | "./navbar.scss": { 24 | "require": "./src/scss/navbar.scss", 25 | "import": "./src/scss/navbar.scss" 26 | }, 27 | "./navbar-bootstrap.scss": { 28 | "require": "./src/scss/navbar-bootstrap.scss", 29 | "import": "./src/scss/navbar-bootstrap.scss" 30 | }, 31 | "./navbar-bootstrap-extended.scss": { 32 | "require": "./src/scss/navbar-bootstrap-extended.scss", 33 | "import": "./src/scss/navbar-bootstrap-extended.scss" 34 | } 35 | }, 36 | "scripts": { 37 | "pre-test": "pnpm clean-coverage", 38 | "dev": "vite --open ./docs/index-dev.html --port 8577", 39 | "test": "pnpm pre-test && vitest --config vitest.config.ts", 40 | "test-ui": "pnpm pre-test && vitest --config vitest.config-ui.ts", 41 | "clean-coverage": "rm -rf coverage .nyc_output", 42 | "badges": "npx -p dependency-version-badge update-badge typescript vite vitest", 43 | "format": "deno fmt src/ts", 44 | "lint": "pnpm lint:ts && pnpm check:ts && pnpm lint:css", 45 | "fix:ts": "deno lint src/ts --fix", 46 | "lint:ts": "deno lint src/ts", 47 | "check:ts": "tsc --noEmit", 48 | "fix:css": "stylelint --config .stylelintrc.json --fix scss \"src/scss/*.scss\"", 49 | "lint:css": "stylelint --config .stylelintrc.json scss \"src/scss/*.scss\"", 50 | "build": "pnpm build-vite && pnpm copy-js", 51 | "build-vite": "vite build", 52 | "copy-js": "cp dist/js/navbar.js docs/src/js/navbar.js && cp dist/js/navbar.js.map docs/src/js/navbar.js.map", 53 | "compile": "pnpm run --parallel /^compile-/ && pnpm copy-css", 54 | "compile-css": "pnpm sass src/scss/navbar.scss dist/css/navbar.css --pkg-importer=node --style=expanded --load-path=src/scss", 55 | "compile-css-min": "pnpm sass src/scss/navbar.scss dist/css/navbar.min.css --pkg-importer=node --style=compressed --load-path=src/scss", 56 | "compile-bs": "pnpm sass src/scss/navbar-bootstrap.scss docs/src/css/navbar-bootstrap.min.css --pkg-importer=node --style=compressed --load-path=src/scss", 57 | "compile-bs-ext": "pnpm sass src/scss/navbar-bootstrap-extended.scss docs/src/css/navbar-bootstrap-extended.min.css --pkg-importer=node --style=compressed --load-path=src/scss", 58 | "compile-combo": "pnpm sass src/scss/navbar-combo.scss docs/src/css/navbar-combo.min.css --pkg-importer=node --style=compressed --load-path=src/scss", 59 | "compile-combo-rtl": "pnpm sass src/scss/navbar-combo-rtl.scss docs/src/css/navbar-combo-rtl.min.css --pkg-importer=node --style=compressed --load-path=src/scss", 60 | "compile-left": "pnpm sass src/scss/navbar-left.scss docs/src/css/navbar-left.min.css --pkg-importer=node --style=compressed --load-path=src/scss", 61 | "compile-left-m-menu": "pnpm sass src/scss/navbar-left-menu.scss docs/src/css/navbar-left-menu.min.css --pkg-importer=node --style=compressed --load-path=src/scss", 62 | "compile-right": "pnpm sass src/scss/navbar-right.scss docs/src/css/navbar-right.min.css --pkg-importer=node --style=compressed --load-path=src/scss", 63 | "copy-css": "cp dist/css/navbar.min.css docs/src/css/navbar.min.css", 64 | "prepublishOnly": "pnpm up --latest && pnpm format && pnpm lint && pnpm build && pnpm compile && pnpm badges" 65 | }, 66 | "bugs": { 67 | "url": "https://github.com/thednp/navbar/issues" 68 | }, 69 | "repository": { 70 | "type": "git", 71 | "url": "git+https://github.com/thednp/navbar.git" 72 | }, 73 | "publishConfig": { 74 | "access": "public", 75 | "registry": "https://registry.npmjs.org/" 76 | }, 77 | "keywords": [ 78 | "navbar", 79 | "navigation", 80 | "menu", 81 | "typescript", 82 | "bootstrap" 83 | ], 84 | "dependencies": { 85 | "@thednp/event-listener": "^2.0.10", 86 | "@thednp/shorty": "^2.0.11" 87 | }, 88 | "devDependencies": { 89 | "@types/node": "^22.15.23", 90 | "@vitest/browser": "^3.1.4", 91 | "@vitest/coverage-istanbul": "^3.1.4", 92 | "@vitest/ui": "^3.1.4", 93 | "playwright": "^1.52.0", 94 | "sass": "^1.89.0", 95 | "stylelint": "^16.19.1", 96 | "stylelint-config-standard": "^38.0.0", 97 | "stylelint-config-standard-scss": "^15.0.1", 98 | "stylelint-order": "^7.0.0", 99 | "stylelint-scss": "^6.12.0", 100 | "typescript": "5.8.3", 101 | "vite": "^6.3.5", 102 | "vite-plugin-dts": "^4.5.4", 103 | "vite-plugin-strip-comments": "^0.0.5", 104 | "vitest": "^3.1.4" 105 | }, 106 | "packageManager": "pnpm@8.6.12", 107 | "engines": { 108 | "node": ">=16", 109 | "pnpm": ">=8.6.0" 110 | } 111 | } 112 | -------------------------------------------------------------------------------- /docs/assets/css/prism.css: -------------------------------------------------------------------------------- 1 | /* PrismJS 1.20.0 2 | https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+scss&plugins=line-highlight+line-numbers */ 3 | /** 4 | * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML 5 | * Based on https://github.com/chriskempson/tomorrow-theme 6 | * @author Rose Pritchard 7 | */ 8 | 9 | code[class*="language-"], 10 | pre[class*="language-"] { 11 | color: #ccc; 12 | background: none; 13 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 14 | font-size: 1em; 15 | text-align: left; 16 | white-space: pre; 17 | word-spacing: normal; 18 | word-break: normal; 19 | word-wrap: normal; 20 | line-height: 1.5; 21 | 22 | -moz-tab-size: 4; 23 | -o-tab-size: 4; 24 | tab-size: 4; 25 | 26 | -webkit-hyphens: none; 27 | -moz-hyphens: none; 28 | -ms-hyphens: none; 29 | hyphens: none; 30 | 31 | } 32 | 33 | /* Code blocks */ 34 | pre[class*="language-"] { 35 | padding: 1em; 36 | margin: .5em 0; 37 | overflow: auto; 38 | } 39 | 40 | :not(pre) > code[class*="language-"], 41 | pre[class*="language-"] { 42 | background: #2c3c44; 43 | border-radius: 1rem; 44 | } 45 | 46 | /* Inline code */ 47 | :not(pre) > code[class*="language-"] { 48 | padding: .1em; 49 | border-radius: .3em; 50 | white-space: normal; 51 | } 52 | 53 | .token.comment, 54 | .token.block-comment, 55 | .token.prolog, 56 | .token.doctype, 57 | .token.cdata { 58 | color: #999; 59 | } 60 | 61 | .token.punctuation { 62 | color: #ccc; 63 | } 64 | 65 | .token.tag, 66 | .token.attr-name, 67 | .token.namespace, 68 | .token.deleted { 69 | color: #77a5bd; 70 | } 71 | 72 | .token.function-name { 73 | color: #6196cc; 74 | } 75 | 76 | .token.boolean, 77 | .token.number, 78 | .token.function { 79 | color: #f08d49; 80 | } 81 | 82 | .token.property, 83 | .token.class-name, 84 | .token.constant, 85 | .token.symbol { 86 | color: #f8c555; 87 | } 88 | 89 | .token.selector, 90 | .token.important, 91 | .token.atrule, 92 | .token.keyword, 93 | .token.builtin { 94 | color: #cc99cd; 95 | } 96 | 97 | .token.string, 98 | .token.char, 99 | .token.attr-value, 100 | .token.regex, 101 | .token.variable { 102 | color: #7ec699; 103 | } 104 | 105 | .token.operator, 106 | .token.entity, 107 | .token.url { 108 | color: #67cdcc; 109 | } 110 | 111 | .token.important, 112 | .token.bold { 113 | font-weight: bold; 114 | } 115 | .token.italic { 116 | font-style: italic; 117 | } 118 | 119 | .token.entity { 120 | cursor: help; 121 | } 122 | 123 | .token.inserted { 124 | color: green; 125 | } 126 | 127 | pre[data-line] { 128 | position: relative; 129 | padding: 1em 0 1em 3em; 130 | } 131 | 132 | .line-highlight { 133 | position: absolute; 134 | left: 0; 135 | right: 0; 136 | padding: inherit 0; 137 | margin-top: 1em; /* Same as .prism’s padding-top */ 138 | 139 | background: hsla(24, 20%, 50%,.08); 140 | background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0)); 141 | 142 | pointer-events: none; 143 | 144 | line-height: inherit; 145 | white-space: pre; 146 | } 147 | 148 | .line-highlight:before, 149 | .line-highlight[data-end]:after { 150 | content: attr(data-start); 151 | position: absolute; 152 | top: .4em; 153 | left: .6em; 154 | min-width: 1em; 155 | padding: 0 .5em; 156 | background-color: hsla(24, 20%, 50%,.4); 157 | color: hsl(24, 20%, 95%); 158 | font: bold 65%/1.5 sans-serif; 159 | text-align: center; 160 | vertical-align: .3em; 161 | border-radius: 999px; 162 | text-shadow: none; 163 | box-shadow: 0 1px white; 164 | } 165 | 166 | .line-highlight[data-end]:after { 167 | content: attr(data-end); 168 | top: auto; 169 | bottom: .4em; 170 | } 171 | 172 | .line-numbers .line-highlight:before, 173 | .line-numbers .line-highlight:after { 174 | content: none; 175 | } 176 | 177 | pre[id].linkable-line-numbers span.line-numbers-rows { 178 | pointer-events: all; 179 | } 180 | pre[id].linkable-line-numbers span.line-numbers-rows > span:before { 181 | cursor: pointer; 182 | } 183 | pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before { 184 | background-color: rgba(128, 128, 128, .2); 185 | } 186 | 187 | pre[class*="language-"].line-numbers { 188 | position: relative; 189 | padding-left: 3.8em; 190 | counter-reset: linenumber; 191 | } 192 | 193 | pre[class*="language-"].line-numbers > code { 194 | position: relative; 195 | white-space: inherit; 196 | } 197 | 198 | .line-numbers .line-numbers-rows { 199 | position: absolute; 200 | pointer-events: none; 201 | top: 0; 202 | font-size: 100%; 203 | left: -3.8em; 204 | width: 3em; /* works for line-numbers below 1000 lines */ 205 | letter-spacing: -1px; 206 | border-right: 1px solid #999; 207 | 208 | -webkit-user-select: none; 209 | -moz-user-select: none; 210 | -ms-user-select: none; 211 | user-select: none; 212 | 213 | } 214 | 215 | .line-numbers-rows > span { 216 | display: block; 217 | counter-increment: linenumber; 218 | } 219 | 220 | .line-numbers-rows > span:before { 221 | content: counter(linenumber); 222 | color: #999; 223 | display: block; 224 | padding-right: 0.8em; 225 | text-align: right; 226 | } 227 | 228 | -------------------------------------------------------------------------------- /src/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | // VARIABLES 2 | 3 | // NAVBAR METRIX 4 | $navbar-padding-x: 0 !default; 5 | $navbar-padding-y: 0 !default; 6 | 7 | // $navbar-line-height must be numeric, 8 | // sets the global line-height and is REQUIRED for icon-size 9 | $navbar-font-size: 14px !default; 10 | $navbar-line-height: 1.5rem !default; 11 | 12 | // BRAND COLOR 13 | $primary-color: #069 !default; // sets the active colors 14 | 15 | // NAVBAR AND SUBNAV BACKGROUND COLOR 16 | $navbar-background: #687c86 !default; // [HEX|RGBA|RGB|transparent] transparent value will disable that style rule 17 | $subnav-background: #dadee0 !default; // [HEX|RGBA|RGB|inherit|transparent] transparent value will disable that style rule 18 | 19 | // NAVBAR TEXT COLORS 20 | // * inheritable values 21 | // * [HEX|RGBA|RGB|auto|transparent] 22 | // * auto color based on $navbar-background, 23 | // * transparent value will disable that style rule 24 | // these values are used for non menu-item text color 25 | $navbar-text-color: auto !default; // [HEX|RGBA|RGB|auto|transparent] auto sets a color based on $navbar-background 26 | $navbar-link-color: auto !default; // [HEX|RGBA|RGB|auto|transparent] auto sets a color based on $navbar-background 27 | $navbar-link-color-hover: auto !default; // [HEX|RGBA|RGB|auto|transparent] auto sets a color based on $navbar-background 28 | 29 | // SUBNAV TEXT COLORS 30 | // these values are used for non menu-item text color, especially mega-menu 31 | $subnav-text-color: auto !default; // [HEX|RGBA|RGB|auto|transparent] auto sets a color based on $subnav-background/$subnav-item-background 32 | $subnav-link-color: auto !default; // [HEX|RGBA|RGB|auto|transparent] auto sets a color based on $subnav-background/$subnav-item-background 33 | $subnav-link-color-hover: auto !default; // [HEX|RGBA|RGB|auto|transparent] auto sets a color based on $subnav-background/$subnav-item-background 34 | 35 | // MENU ITEM METRIX 36 | $root-item-font-size: $navbar-font-size !default; // inherit $navbar-font-size 37 | $root-item-line-height: $navbar-line-height !default; // inherit $navbar-line-height 38 | $subnav-item-font-size: inherit !default; // inherit $root-item-font-size 39 | $subnav-item-line-height: inherit !default; // inherit $root-item-line-height 40 | // item spacing 41 | $item-padding-y: .5rem !default; // used for $root-item-padding and $root-item-padding 42 | $item-padding-x: 1rem !default; // used for $root-item-padding and $root-item-padding 43 | // $root-item-padding is DEPRECATED 44 | // $root-item-margin applies only to root menu items 45 | $root-item-margin: 0 !default; // $root-item-margin mostly for special design 46 | // $subnav-item-padding is DEPRECATED 47 | $subnav-item-margin: 0 !default; // [inherit|valid value|0] inherit value will inherit the above $root-item-padding, 0 value will disable the style rule 48 | 49 | // BRAND METRIX 50 | $brand-font-size: 18px !default; // [valid value|0] can be either a valid value or 0 which removes the style rule 51 | $brand-line-height: inherit !default; // [valid value|0] can be either a valid value or 0 which removes the style rule 52 | // $brand-padding is DEPRECATED 53 | // $brand-padding: $item-padding-y $item-padding-x !default; // [valid value|0] 0 value will disable style rule, applies to [a.brand] selector 54 | 55 | // SUBNAV METRIX 56 | $subnav-padding-x: 0 !default; // [valid value|0] sets a padding for the LVL1 Element.subnav 57 | $subnav-padding-y: 0 !default; // [valid value|0] sets a padding for the LVL1 Element.subnav 58 | $subnav-line-height: inherit !default; // [valid value|inherit] inherits the above $navbar-line-height 59 | $subnav-font-size: inherit !default; // [valid value|inherit] inherits the above $navbar-font-size 60 | $subnav-width: 200px !default; // [valid value|0] sets a width for regular submenu 61 | $subnav-larger-width: ($subnav-width * 3) !default; // [valid value|0] sets a minimum width for mega wrapper 62 | 63 | // MENU ITEM COLOR STYLING 64 | // - auto - sets a menu item color based on its background or .navbar / .nav background 65 | // - HEX / rgba / rgb - accepted values 66 | // - transparent value removes the rule 67 | // root items 68 | $root-item-color: auto !default; 69 | $root-item-background: transparent !default; 70 | $root-item-hover-color: auto !default; // cannot be transparent 71 | $root-item-hover-background: rgb(0 0 0 / 35%) !default; // rgba(255,255,255,0.85) 72 | $root-item-active-color: #fff !default; 73 | $root-item-active-background: $primary-color !default; 74 | 75 | // SUBNAV MENU ITEM COLORS 76 | $subnav-item-color: auto !default; 77 | $subnav-item-background: transparent !default; 78 | $subnav-item-hover-color: auto !default; 79 | $subnav-item-hover-background: rgb(0 0 0 / 40%) !default; 80 | $subnav-item-active-color: #fff !default; 81 | $subnav-item-active-background: $primary-color !default; 82 | 83 | // BRAND LINK COLORS 84 | $brand-link-color: auto !default; 85 | 86 | // Bootstrap Grid Breakpoints 87 | $xs: 320px; 88 | $sm: 576px; 89 | $md: 768px; 90 | $lg: 992px; 91 | $xl: 1200px; 92 | $xxl: 1400px; 93 | 94 | // MISC 95 | $responsive-breakpoint: $md !default; // default is 768px 96 | $subnav-zindex: 50 !default; // should go above carousel instances 97 | $icon-height: auto !default; // sets icon size in any unit, when using icons, this variable is a must 98 | $navbar-toggle-padding: .125rem .5rem !default; // toggle button 99 | $base-radius: .25rem !default; // [valid value|0] can be either a valid value or 0 which removes the style rule 100 | $mobile-expanded-background: rgb(255 255 255 / 7.5%) !default; // mobile view only, [auto|transparent|none|rgba/rgb/hex] accepted values 101 | $subnav-shadow: 1px 1px 4px 1px rgb(0 0 0 / 25%), 1px 1px 0 0 rgb(0 0 0 / 15%) inset !default; // [valid|0] sets a shadow for LVL1 .subnav, 0 will remove the rule 102 | -------------------------------------------------------------------------------- /src/scss/_mixins-bs.scss: -------------------------------------------------------------------------------- 1 | // BOOTSTRAP MIXINS 2 | @use "functions"; 3 | @use "variables"; 4 | @use "mixins"; 5 | 6 | $dark-navbar-bg: #343a40; 7 | 8 | // bootstrap navbar style 9 | @mixin navbar-style-bs { 10 | .navbar-light { 11 | .subnav-toggle { 12 | color: rgb(var(--bs-dark-rgb), .55); 13 | } 14 | 15 | .open-mobile { 16 | > .subnav-toggle { 17 | color: rgb(var(--bs-dark-rgb) / 75%); 18 | background: rgb(var(--bs-dark-rgb) / 15%); 19 | } 20 | } 21 | } 22 | 23 | .navbar-dark, 24 | .navbar:not(.navbar-light) { 25 | .subnav-toggle { 26 | color: rgb(var(--bs-light-rgb) / 55%); 27 | } 28 | 29 | .open-mobile { 30 | > .subnav-toggle { 31 | color: rgb(var(--bs-light-rgb) / 75%); 32 | background: rgb(var(--bs-light-rgb) / 15%); 33 | } 34 | } 35 | } 36 | 37 | @media (min-width: variables.$responsive_breakpoint) { 38 | // set LVL1 subnav box-shadow 39 | .navbar-nav li > .subnav { 40 | box-shadow: var(--nv-subnav-shadow); 41 | } 42 | 43 | .navbar-light { 44 | .subnav { 45 | background-color: #fff; 46 | } 47 | 48 | .navbar-nav li { 49 | li.open, li:hover { // hover 50 | > a.nav-link { 51 | color: rgb(var(--bs-dark-rgb), .75); 52 | } 53 | } 54 | } 55 | } 56 | 57 | .navbar:not(.navbar-light), 58 | .navbar-dark { 59 | .subnav { 60 | background-color: rgb(var(--bs-dark-rgb), 1); 61 | } 62 | 63 | .navbar-nav li { 64 | li.open, li:hover { // hover 65 | > a.nav-link { 66 | color: rgb(var(--bs-light-rgb), .75); 67 | } 68 | } 69 | 70 | } 71 | } 72 | 73 | // lvl 2 active 74 | .navbar .navbar-nav li { 75 | li.active, li.active:hover { // active 76 | > a.nav-link { 77 | color: var(--bs-white); 78 | } 79 | } 80 | } 81 | } 82 | } 83 | 84 | @mixin nav-layout-bs() { 85 | // set navbar padding 86 | .navbar { 87 | padding: var(--nv-padding-y) var(--nv-padding-x); 88 | } 89 | 90 | // mobile view visibility 91 | .subnav, 92 | .subnav-toggle + ul, 93 | .subnav-toggle + div, 94 | .parent-icon {display: none;} 95 | 96 | li.open-mobile { 97 | > .subnav-toggle + div, 98 | > .subnav-toggle + ul, 99 | > .subnav {display: block;} 100 | } 101 | 102 | // menu icons 103 | @include mixins.navbar-icon; 104 | 105 | .menu-icon + span { 106 | flex: auto; 107 | margin-left: var(--nv-item-padding-x); 108 | } 109 | 110 | .subnav-toggle { 111 | background: transparent; 112 | border: 0; 113 | border-radius: variables.$base_radius; 114 | } 115 | 116 | // mobile view menu tree highlight padding 117 | ul.subnav, 118 | div.subnav ul { 119 | flex-basis: 100%; 120 | flex-direction: column; 121 | padding: 0 0 0 var(--nv-item-padding-x); 122 | } 123 | 124 | // general menu layout 125 | .navbar-nav { 126 | li { 127 | position: relative; 128 | display: flex; 129 | flex-flow: row wrap; 130 | align-items: center; 131 | justify-content: space-between; 132 | list-style: none; 133 | } 134 | 135 | // general item styling 136 | .nav-link { 137 | display: flex; 138 | flex-direction: row; 139 | align-items: center; 140 | justify-content: space-between; 141 | text-decoration: none; 142 | 143 | span { 144 | overflow: hidden; 145 | text-overflow: ellipsis; 146 | white-space: nowrap; 147 | } 148 | } 149 | } 150 | 151 | @media (min-width: variables.$responsive_breakpoint) { 152 | // desktop view visibility 153 | .subnav-toggle { display: none; } 154 | 155 | .parent-icon, 156 | .subnav-toggle + div, 157 | .subnav-toggle + ul { 158 | display: flex; 159 | } 160 | 161 | // disable focus on hidden menu items 162 | ul.subnav > li, 163 | div.subnav > ul > li { display: none; } 164 | 165 | .open-position { 166 | > ul.subnav > li, 167 | > div.subnav > ul > li { display: flex; } 168 | } 169 | 170 | .nav-link { 171 | flex-basis: 100%; 172 | } 173 | 174 | // set subnav position 175 | .subnav { 176 | position: absolute; 177 | } 178 | 179 | // reset menu tree highlight padding 180 | // ul.subnav, 181 | div.subnav ul { 182 | padding: 0; 183 | } 184 | 185 | .navbar-text, 186 | ul.subnav {flex-direction: column;} 187 | div.subnav > ul {flex-direction: row;} 188 | 189 | // set submenu width 190 | ul.subnav { width: var(--nv-subnav-width); } 191 | div.subnav { min-width: var(--nv-subnav-larger-width); } 192 | 193 | // set margin and padding 194 | .navbar-nav > li > .subnav { 195 | margin-top: var(--nv-padding-y); 196 | } 197 | 198 | ul.subnav, div.subnav, 199 | .subnav .subnav { 200 | padding: var(--nv-subnav-padding-y, variables.$navbar_padding_y) var(--nv-subnav-padding-x, variables.$navbar_padding_x); 201 | } 202 | 203 | .subnav .subnav { 204 | margin-top: calc(var(--nv-subnav-padding-y) * -1); 205 | margin-left: var(--nv-subnav-padding-x); 206 | } 207 | } 208 | } 209 | 210 | @mixin main-menu-bs() { 211 | @media (min-width: variables.$responsive_breakpoint) { 212 | .navbar-nav { 213 | li { 214 | > .subnav { 215 | top: -99999em; 216 | display: block; 217 | opacity: 0; 218 | transition: transform .5s ease, opacity .4s ease; 219 | transform: translate(0,-10px); 220 | } 221 | 222 | li > .subnav { transform: translate(-10px); } 223 | 224 | li.open-position > .subnav { 225 | top: 0; 226 | left: 100%; 227 | } 228 | } 229 | 230 | li.open-position > .subnav { 231 | top: 100%; 232 | left: 0; 233 | z-index: var(--nv-subnav-zindex); 234 | } 235 | 236 | li.open > .subnav { 237 | opacity: 1; 238 | transform: translate(0); 239 | } 240 | } 241 | } 242 | } 243 | -------------------------------------------------------------------------------- /src/scss/_functions.scss: -------------------------------------------------------------------------------- 1 | @use "sass:color"; 2 | @use "sass:meta"; 3 | @use "sass:math"; 4 | @use 'variables'; 5 | 6 | @function real-color($color) { 7 | @return meta.type-of($color) == "color" and $color != "none" and $color != transparent and $color != currentColor and $color != inherit and $color != initial; 8 | } 9 | 10 | // 1 up to 4 decimals only 11 | @function decimal-round($number:0, $decimals:0) { 12 | @if $decimals == 1 { 13 | @return math.round($number * 10) * .1; 14 | } @else if $decimals == 2 { 15 | @return math.round($number * 100) * .01; 16 | } @else if $decimals == 3 { 17 | @return math.round($number * 1000) * .001; 18 | } @else if $decimals == 4 { 19 | @return math.round($number * 10000) * .0001; 20 | } @else { 21 | @return math.round($number); 22 | } 23 | } 24 | 25 | @function real-size($size, $rem:0) { // all unit sizes, except % 26 | $result: 0; 27 | 28 | @if meta.type-of($size) == "number" { 29 | $unit: math.unit($size); 30 | 31 | @if $rem != 0 { 32 | @if $unit == "rem" { 33 | $result: $size; 34 | } @else if $unit == "em" { 35 | $result: $size * 1rem; 36 | } @else if $unit == "px" { 37 | $result: decimal-round($size * .0625, 2) * 1rem; // 1/16 = 0.0625 38 | } @else { // no unit 39 | $result: $size * 1rem; 40 | } 41 | } @else { 42 | @if $unit == "rem" { 43 | $result: $size * 16px; 44 | } @else if $unit == "em" { 45 | $result: $size * 16px; 46 | } @else { // no unit 47 | $result: $size * 1px; 48 | } 49 | } 50 | 51 | // @debug($result); 52 | } 53 | 54 | @return $result; 55 | } 56 | 57 | @function sum-size($a:0, $b:0) { 58 | $result: 0; 59 | 60 | @if meta.type-of($a) == "number" and meta.type-of($b) == "number" { 61 | @if math.unit($a) != math.unit($b) { 62 | @if math.unit($a) == "rem" or math.unit($b) == "rem" { 63 | $result: real-size($a,1) + real-size($b,1); 64 | } @else { 65 | $result: real-size($a) + real-size($b); 66 | } 67 | } @else { 68 | $result: $a + $b; 69 | } 70 | } 71 | 72 | @return $result; 73 | } 74 | 75 | @function get-icon-height() { 76 | $height: variables.$icon_height; 77 | 78 | @if variables.$icon_height == auto or variables.$icon_height == inherit or variables.$icon_height == 0 or meta.type-of(variables.$icon_height) != "number" { 79 | @if meta.type-of(variables.$root_item_line_height) == "number" and meta.type-of(variables.$subnav_item_line_height) == "number" { 80 | @if real-size($root_item_line_height) > real-size($subnav_item_line_height) { 81 | $height: $subnav_item_line_height; 82 | } @else { 83 | $height: $root_item_line_height; 84 | } 85 | } @else if meta.type-of(variables.$subnav_line_height) == "number" and meta.type-of(variables.$navbar_line_height) == "number" { 86 | @if real-size(variables.$navbar_line_height) > real-size(variables.$subnav_line_height) { 87 | $height: variables.$subnav_line_height; 88 | } @else { 89 | $height: variables.$navbar_line_height; 90 | } 91 | } @else if meta.type-of(variables.$subnav_line_height) == "number" { 92 | $height: variables.$subnav_line_height; 93 | } @else if meta.type-of(variables.$navbar_line_height) == "number" { 94 | $height: variables.$navbar_line_height; 95 | } @else { 96 | $height: 16px; // ICONS MUST HAVE A SIZE 97 | } 98 | } 99 | 100 | @return $height; 101 | } 102 | 103 | @function get-color($color, $bg, $alpha: 1) { 104 | $result: $color; 105 | 106 | @if real-color($color) { 107 | $result: $color; 108 | } @else if $color == currentColor { 109 | $result: currentcolor; 110 | } @else if $color == auto and real-color($bg) { 111 | // @if color.lightness($bg) > 60 { 112 | @if color.channel($bg, "lightness", $space: hsl) > 60 { 113 | $result: rgba(#000, $alpha); 114 | } @else { 115 | $result: rgba(#fff, $alpha); 116 | } 117 | 118 | // if transparent, cancel rule 119 | } @else { 120 | $result: unset; 121 | } 122 | 123 | @return $result; 124 | } 125 | 126 | // $color: text-color, $bg: bg-color, $inherit-bg: used when $bg is undefined/transparent 127 | @function get-item-color($color, $bg, $inherit-bg, $alpha: 1) { 128 | $item-color: $color; 129 | $item-bg: $bg; 130 | 131 | @if real-color($bg) { 132 | $item-bg: $bg; 133 | } @else if real-color($inherit-bg) { 134 | $item-bg: $inherit-bg; 135 | } 136 | 137 | // @if color.lightness($item-bg) > 60 { 138 | @if color.channel($item-bg, "lightness", $space: hsl) > 60 { 139 | $item-color: #000; 140 | } @else { 141 | $item-color: #fff; 142 | } 143 | 144 | @if $alpha < 1 { 145 | @return rgba($item-color, $alpha); 146 | } @else { 147 | @return $item-color; 148 | } 149 | 150 | } 151 | 152 | // STYLING UTIL MIXINS 153 | @mixin set-background($bg) { 154 | @if meta.type-of($bg) == "list" or real-color($bg) { 155 | background: $bg; 156 | } @else if $bg == currentColor { 157 | background: currentcolor; 158 | 159 | // } @else { 160 | // @debug "set-background(#{$bg}); value-type '#{type-of($bg)}:#{$bg}' is ignored, style rule removed."; 161 | } 162 | } 163 | 164 | @mixin set-color($color, $bg, $alpha) { 165 | $result: get-color($color, $bg, $alpha); 166 | 167 | @if $result != inherit { 168 | color: $result; 169 | } 170 | } 171 | 172 | @mixin set-metric($prop, $value, $inherited:0) { 173 | @if $value == inherit and (meta.type-of($inherited) == "list" or meta.type-of($inherited) == "number" and $inherited != 0) { 174 | #{$prop}: $inherited; 175 | } @else if meta.type-of($value) == "list" { 176 | $total-size: 0; 177 | 178 | @each $one in $value { 179 | @if real-size($one) { 180 | $total-size: sum-size($one,$total-size); 181 | } @else if meta.type-of($one) == "color" { 182 | $total-size: sum-size(1,$total-size); 183 | } 184 | } 185 | 186 | @if $total-size > 0 or $value { 187 | #{$prop}: $value; 188 | } 189 | 190 | } @else if meta.type-of($value) == "number" and $value != 0 { 191 | #{$prop}: $value; 192 | 193 | // } @else { 194 | } 195 | 196 | // @debug "set-metric(#{$prop},#{$value},#{$inherited}); value-type '#{type-of($value)}:#{$value}' is ignored, style rule removed."; 197 | } 198 | -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "stylelint-scss", 4 | "stylelint-order" 5 | ], 6 | "extends": ["stylelint-config-standard-scss"], 7 | "rules": { 8 | "color-named": "never", 9 | "declaration-block-no-duplicate-properties": true, 10 | "no-descending-specificity": null, 11 | "color-function-notation": null, 12 | "block-no-empty": true, 13 | "color-hex-length": "short", 14 | "color-no-invalid-hex": true, 15 | "max-nesting-depth": 4, 16 | "selector-max-compound-selectors": 5, 17 | "order/properties-order": [ 18 | "position", 19 | "top", 20 | "right", 21 | "bottom", 22 | "left", 23 | "z-index", 24 | "box-sizing", 25 | "display", 26 | "flex", 27 | "flex-align", 28 | "flex-basis", 29 | "flex-direction", 30 | "flex-wrap", 31 | "flex-flow", 32 | "flex-grow", 33 | "flex-order", 34 | "flex-pack", 35 | "align-items", 36 | "align-self", 37 | "justify-content", 38 | "float", 39 | "width", 40 | "min-width", 41 | "max-width", 42 | "height", 43 | "min-height", 44 | "max-height", 45 | "padding", 46 | "padding-top", 47 | "padding-right", 48 | "padding-bottom", 49 | "padding-left", 50 | "margin", 51 | "margin-top", 52 | "margin-right", 53 | "margin-bottom", 54 | "margin-left", 55 | "overflow", 56 | "overflow-x", 57 | "overflow-y", 58 | "-webkit-overflow-scrolling", 59 | "-ms-overflow-style", 60 | "clip", 61 | "clear", 62 | "font", 63 | "font-family", 64 | "font-size", 65 | "font-style", 66 | "font-weight", 67 | "font-variant", 68 | "font-size-adjust", 69 | "font-stretch", 70 | "font-effect", 71 | "font-emphasize", 72 | "font-emphasize-position", 73 | "font-emphasize-style", 74 | "font-smooth", 75 | "hyphens", 76 | "line-height", 77 | "color", 78 | "text-align", 79 | "text-align-last", 80 | "text-emphasis", 81 | "text-emphasis-color", 82 | "text-emphasis-style", 83 | "text-emphasis-position", 84 | "text-decoration", 85 | "text-indent", 86 | "text-justify", 87 | "text-outline", 88 | "text-overflow", 89 | "text-overflow-ellipsis", 90 | "text-overflow-mode", 91 | "text-shadow", 92 | "text-transform", 93 | "text-wrap", 94 | "-webkit-text-size-adjust", 95 | "-ms-text-size-adjust", 96 | "letter-spacing", 97 | "word-break", 98 | "word-spacing", 99 | "word-wrap", 100 | "overflow-wrap", 101 | "tab-size", 102 | "white-space", 103 | "vertical-align", 104 | "list-style", 105 | "list-style-position", 106 | "list-style-type", 107 | "list-style-image", 108 | "pointer-events", 109 | "touch-action", 110 | "cursor", 111 | "visibility", 112 | "zoom", 113 | "table-layout", 114 | "empty-cells", 115 | "caption-side", 116 | "border-spacing", 117 | "border-collapse", 118 | "content", 119 | "quotes", 120 | "counter-reset", 121 | "counter-increment", 122 | "resize", 123 | "user-select", 124 | "nav-index", 125 | "nav-up", 126 | "nav-right", 127 | "nav-down", 128 | "nav-left", 129 | "background", 130 | "background-color", 131 | "background-image", 132 | "filter", 133 | "background-repeat", 134 | "background-attachment", 135 | "background-position", 136 | "background-position-x", 137 | "background-position-y", 138 | "background-clip", 139 | "background-origin", 140 | "background-size", 141 | "border", 142 | "border-color", 143 | "border-style", 144 | "border-width", 145 | "border-top", 146 | "border-top-color", 147 | "border-top-style", 148 | "border-top-width", 149 | "border-right", 150 | "border-right-color", 151 | "border-right-style", 152 | "border-right-width", 153 | "border-bottom", 154 | "border-bottom-color", 155 | "border-bottom-style", 156 | "border-bottom-width", 157 | "border-left", 158 | "border-left-color", 159 | "border-left-style", 160 | "border-left-width", 161 | "border-radius", 162 | "border-top-left-radius", 163 | "border-top-right-radius", 164 | "border-bottom-right-radius", 165 | "border-bottom-left-radius", 166 | "border-image", 167 | "border-image-source", 168 | "border-image-slice", 169 | "border-image-width", 170 | "border-image-outset", 171 | "border-image-repeat", 172 | "outline", 173 | "outline-width", 174 | "outline-style", 175 | "outline-color", 176 | "outline-offset", 177 | "box-shadow", 178 | "opacity", 179 | "-ms-interpolation-mode", 180 | "transition", 181 | "transition-delay", 182 | "transition-timing-function", 183 | "transition-duration", 184 | "transition-property", 185 | "transform", 186 | "transform-origin", 187 | "animation", 188 | "animation-name", 189 | "animation-duration", 190 | "animation-play-state", 191 | "animation-timing-function", 192 | "animation-delay", 193 | "animation-iteration-count", 194 | "animation-direction" 195 | ], 196 | "function-url-no-scheme-relative": true, 197 | "function-url-quotes": "always", 198 | "length-zero-no-unit": true, 199 | "property-no-unknown": true, 200 | "property-no-vendor-prefix": true, 201 | "scss/dollar-variable-colon-space-before": "never", 202 | "scss/selector-no-redundant-nesting-selector": true, 203 | "shorthand-property-no-redundant-values": true, 204 | "unit-allowed-list": [ 205 | "ch", 206 | "em", 207 | "ex", 208 | "rem", 209 | "cm", 210 | "in", 211 | "mm", 212 | "pc", 213 | "pt", 214 | "px", 215 | "q", 216 | "vh", 217 | "vw", 218 | "vmin", 219 | "vmax", 220 | "fr", 221 | "deg", 222 | "grad", 223 | "rad", 224 | "turn", 225 | "ms", 226 | "s", 227 | "Hz", 228 | "kHz", 229 | "dpi", 230 | "dpcm", 231 | "dppx", 232 | "%" 233 | ], 234 | "value-no-vendor-prefix": true 235 | } 236 | } 237 | -------------------------------------------------------------------------------- /dist/js/navbar.cjs: -------------------------------------------------------------------------------- 1 | "use strict";var Oe=Object.defineProperty;var Pe=(e,n,t)=>n in e?Oe(e,n,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[n]=t;var A=(e,n,t)=>Pe(e,typeof n!="symbol"?n+"":n,t);const M={},ve=e=>{const{type:n,currentTarget:t}=e;M[n].forEach((s,i)=>{t===i&&s.forEach((o,a)=>{a.apply(i,[e]),typeof o=="object"&&o.once&&pe(i,n,a,o)})})},he=(e,n,t,s)=>{M[n]||(M[n]=new Map);const i=M[n];i.has(e)||i.set(e,new Map);const o=i.get(e),{size:a}=o;o.set(t,s),a||e.addEventListener(n,ve,s)},pe=(e,n,t,s)=>{const i=M[n],o=i&&i.get(e),a=o&&o.get(t),l=a!==void 0?a:s;o&&o.has(t)&&o.delete(t),i&&(!o||!o.size)&&i.delete(e),(!i||!i.size)&&delete M[n],(!o||!o.size)&&e.removeEventListener(n,ve,l)},y="aria-expanded",De="DOMContentLoaded",Re="keydown",Fe="keyup",ae="click",je="mouseenter",He="mouseleave",_="ArrowDown",Y="ArrowUp",G="ArrowLeft",J="ArrowRight",Ie="Escape",ee="Space",We="transitionDuration",Ke="transitionDelay",Q="transitionend",be="transitionProperty",Ue=(e,n)=>e.getAttribute(n),N=(e,n,t)=>e.setAttribute(n,t),ne=(e,...n)=>{e.classList.add(...n)},I=(e,...n)=>{e.classList.remove(...n)},E=(e,n)=>e.classList.contains(n),V=e=>e!=null&&typeof e=="object"||!1,O=e=>V(e)&&typeof e.nodeType=="number"&&[1,2,3,4,5,6,7,8,9,10,11].some(n=>e.nodeType===n)||!1,g=e=>O(e)&&e.nodeType===1||!1,L=new Map,F={data:L,set:(e,n,t)=>{g(e)&&(L.has(n)||L.set(n,new Map),L.get(n).set(e,t))},getAllFor:e=>L.get(e)||null,get:(e,n)=>{if(!g(e)||!n)return null;const t=F.getAllFor(n);return e&&t&&t.get(e)||null},remove:(e,n)=>{const t=F.getAllFor(n);!t||!g(e)||(t.delete(e),t.size===0&&L.delete(n))}},Ve=(e,n)=>F.get(e,n),Ze=e=>e==null?void 0:e.trim().replace(/(?:^\w|[A-Z]|\b\w)/g,(n,t)=>t===0?n.toLowerCase():n.toUpperCase()).replace(/\s+/g,""),xe=e=>V(e)&&e.constructor.name==="Window"||!1,me=e=>O(e)&&e.nodeType===9||!1,w=e=>me(e)?e:O(e)?e.ownerDocument:xe(e)?e.document:globalThis.document,qe=(e,...n)=>Object.assign(e,...n),d=(e,n)=>e.dispatchEvent(n),S=(e,n,t)=>{const s=getComputedStyle(e,t),i=n.replace("webkit","Webkit").replace(/([A-Z])/g,"-$1").toLowerCase();return s.getPropertyValue(i)},Be=e=>{const n=S(e,be),t=S(e,Ke),s=t.includes("ms")?1:1e3,i=n&&n!=="none"?parseFloat(t)*s:0;return Number.isNaN(i)?0:i},Ge=e=>{const n=S(e,be),t=S(e,We),s=t.includes("ms")?1:1e3,i=n&&n!=="none"?parseFloat(t)*s:0;return Number.isNaN(i)?0:i},Ee=(e,n)=>{let t=0;const s=new Event(Q),i=Ge(e),o=Be(e);if(i){const a=l=>{l.target===e&&(n.apply(e,[l]),e.removeEventListener(Q,a),t=1)};e.addEventListener(Q,a),setTimeout(()=>{t||d(e,s)},i+o+17)}else n.apply(e,[s])},le=e=>["true",!0].includes(e)?!0:["false",!1].includes(e)?!1:["null","",null,void 0].includes(e)?null:e!==""&&!Number.isNaN(+e)?+e:e,X=e=>Object.entries(e),Je=(e,n,t,s)=>{if(!g(e))return n;const i={...t},o={...e.dataset},a={...n},l={},c="title";return X(o).forEach(([r,u])=>{const P=Ze(r);l[P]=le(u)}),X(i).forEach(([r,u])=>{i[r]=le(u)}),X(n).forEach(([r,u])=>{r in i?a[r]=i[r]:r in l?a[r]=l[r]:a[r]=r===c?Ue(e,c):u}),a},Qe=e=>Object.keys(e),Z=(e,n)=>{const t=new CustomEvent(e,{cancelable:!0,bubbles:!0});return V(n)&&qe(t,n),t},ce=e=>V(e)&&e.constructor.name==="Map"||!1,Xe=e=>typeof e=="number"||!1,m=new Map,C={set:(e,n,t,s)=>{g(e)&&(s&&s.length?(m.has(e)||m.set(e,new Map),m.get(e).set(s,setTimeout(n,t))):m.set(e,setTimeout(n,t)))},get:(e,n)=>{if(!g(e))return null;const t=m.get(e);return n&&t&&ce(t)?t.get(n)||null:Xe(t)?t:null},clear:(e,n)=>{if(!g(e))return;const t=m.get(e);n&&n.length&&ce(t)?(clearTimeout(t.get(n)),t.delete(n),t.size===0&&m.delete(e)):(clearTimeout(t),m.delete(e))}},_e=e=>g(e)&&"offsetWidth"in e||!1,Ye=e=>w(e).documentElement,en=e=>{var n;return e?me(e)?e.defaultView:O(e)?(n=e==null?void 0:e.ownerDocument)==null?void 0:n.defaultView:e:window},we=(e,n)=>e.matches(n),nn=e=>Ye(e).dir==="rtl",f=(e,n)=>!e||!n?null:e.closest(n)||f(e.getRootNode().host,n)||null,tn=(e,n)=>g(e)?e:(g(n)?n:w()).querySelector(e),ye=(e,n)=>(O(n)?n:w()).getElementsByTagName(e),p=(e,n)=>(n&&O(n)?n:w()).getElementsByClassName(e),sn="3.3.1",b="navbar",R="Navbar",x=`[data-function="${b}"]`,Ne=`${x},.${b}`,h="open",oe="open-position",v="open-mobile",j="subnav",q=`${j}-toggle`,Te=`${b}-toggle`,ue={breakpoint:768,toggleSiblings:!0,delay:500},W=Z(`show.${b}`),Ce=Z(`shown.${b}`),K=Z(`hide.${b}`),te=Z(`hidden.${b}`),k=e=>Ve(e,R),on=e=>new T(e),U=({menu:e,_observer:n},t)=>{t?n.observe(e):n.disconnect()},B=e=>{const{options:n,menu:t}=e,[s]=p(q,t);return s&&S(s,"display")!=="none"||en(t).innerWidth{const t=n?he:pe,{items:s,navbarToggle:i,menu:o}=e,a=w(o);Array.from(s).forEach(l=>{const{lastElementChild:c}=l;c&&E(c,j)&&(t(l,je,Ae),t(l,He,se));const[r]=p(q,l);r&&t(r,ae,de)}),t(a,Re,an),t(a,Fe,ln),i&&t(i,ae,de)},$=(e,n)=>Array.from(e.children).find(t=>we(t,n)),rn=e=>{const n=$(e,`.${j}`),t=$(e,"A");if(t&&(d(t,W),W.defaultPrevented))return;ne(e,oe),ne(e,h);const{parentElement:s}=e;if(s){const o=p(h,s);z(Array.from(o).filter(a=>a!==e))}n&&Ee(n,()=>{C.clear(e,"in"),t&&(d(t,Ce),N(t,y,"true"))})},$e=(e,n)=>{const t=$(e,`.${j}`),s=$(e,"A"),i=$(e,q);if(!([h,v].some(o=>E(e,o))&&s&&(d(s,K),K.defaultPrevented))){if(E(e,h)){const o=()=>{I(e,oe),C.clear(e,"out"),s&&(d(s,te),N(s,y,"false"))};I(e,h),n&&t?Ee(t,o):o()}E(e,v)&&(I(e,v),[i,s].forEach(o=>{o&&N(o,y,"false")}),s&&d(s,te))}},z=e=>{Array.from(e).forEach(n=>$e(n))},an=e=>{const{code:n,target:t}=e;(_e(t)?f(t,Ne):null)&&[_,Y,ee].includes(n)&&e.preventDefault()};function ln(e){const{code:n}=e,{activeElement:t}=w(this),s=t&&f(t,"nav"),i=s&&k(s);if(!i||!t||this&&!this.contains(t))return;const o=f(t,"LI");if(!o)return;const a=B(i),{previousElementSibling:l,nextElementSibling:c}=o,r=f(o,`.${h}`),u=f(o,"UL"),[P]=p(j,o),Le=[ee,_,G,J,Y],H=u&&S(u,"flex-direction")==="column",ie=nn(o),Me=ie?J:G,Se=ie?G:J,ke=u&&l&&(n===Y&&H||n===Me&&!H),ze=u&&c&&(n===_&&H||n===Se&&!H);let D=null;if(n===Ie&&r?(se.call(r),D=r):!a&&P&&n===ee&&(E(o,h)?se.call(o):Ae.call(o)),ke&&o!==u.firstElementChild?D=l:ze&&o!==u.lastElementChild&&(D=c),D){const{firstElementChild:re}=D;re&&re.focus()}!a&&Le.includes(n)&&e.preventDefault()}const de=e=>{e.preventDefault();const{currentTarget:n,target:t}=e,s=f(n,Ne),i=s&&k(s);if(!i)return;const{options:o,navbarToggle:a}=i;if(t!==n&&!(n!=null&&n.contains(t)))return;const l=f(n,"LI")||s,c=f(n,`.${Te}`)===a?a:$(l,`.${q}`),r=c===a?null:$(l,"A"),u=p(v,l);if(E(l,v)){if(r&&(d(r,K),K.defaultPrevented))return;z(u),I(l,v),c&&(N(c,y,"false"),c===a&&U(i)),r&&(N(r,y,"false"),d(r,te))}else{if(r&&(d(r,W),W.defaultPrevented))return;if(c===a)U(i,!0);else{const P=o.toggleSiblings?p(v,l.parentElement):u;z(P)}ne(l,v),c&&N(c,y,"true"),r&&(N(r,y,"true"),d(r,Ce))}};function Ae(){const e=f(this,`${x},.${b}`),n=e&&k(e),t=C.get(this,"out");if(!(!n||B(n))&&(C.clear(this,"out"),!E(this,h)&&!t)){const s=()=>rn(this);C.set(this,s,17,"in")}}function se(){const e=f(this,`${x},.${b}`),n=e&&k(e);if(!(!n||B(n))&&E(this,h)){C.clear(this,"in");const t=()=>{z(p(oe,this)),$e(this,!0)};C.set(this,t,n.options.delay,"out")}}class T{constructor(n,t){A(this,"listenResize",()=>{B(this)||(z(p(v,w(this.menu))),U(this))});const s=tn(n);if(!s)throw new TypeError(`${R} cannot initialize the specified target.`);const[i]=p(Te,s),o=k(s);o&&o.dispose(),this.menu=s,this.options=Je(s,ue,t||{}),this.items=ye("LI",s),this.navbarToggle=i,this._observer=new ResizeObserver(this.listenResize),fe(this,!0),F.set(s,R,this)}get defaults(){return ue}get name(){return R}dispose(){z(this.items),fe(this),U(this),F.remove(this.menu,R),Qe(this).forEach(n=>{delete this[n]})}}A(T,"selector",x),A(T,"init",on),A(T,"getInstance",k),A(T,"version",sn);const ge=e=>{const{selector:n,init:t}=T;[...ye("*",w(e))].filter(i=>we(i,n)).forEach(t)};document.body?ge():he(document,De,()=>ge(),{once:!0});module.exports=T; 2 | //# sourceMappingURL=navbar.cjs.map 3 | -------------------------------------------------------------------------------- /docs/src/css/navbar-left-menu.min.css: -------------------------------------------------------------------------------- 1 | :root{--nv-padding-x: 0rem;--nv-padding-y: 0rem;--nv-line-height: 1.5rem;--nv-font-size: 14px;--nv-primary-color: #069;--nv-bg: #687c86;--nv-text-color: rgba(255, 255, 255, 0.55);--nv-link-color: rgba(255, 255, 255, 0.75);--nv-link-color-hover: rgba(255, 255, 255, 0.95);--nv-subnav-bg: #dadee0;--nv-subnav-text-color: rgba(0, 0, 0, 0.55);--nv-subnav-link-color: rgba(0, 0, 0, 0.75);--nv-subnav-link-color-hover: rgba(0, 0, 0, 0.95);--nv-item-font-size: 14px;--nv-item-line-height: 1.5rem;--nv-item-padding-y: 0.5rem;--nv-item-padding-x: 1rem;--nv-item-margin: 0;--nv-subnav-item-font-size: inherit;--nv-subnav-item-line-height: inherit;--nv-subnav-item-padding-x: var(--nv-item-padding-x);--nv-subnav-item-padding-y: var(--nv-item-padding-y);--nv-subnav-item-margin: 0;--nv-brand-font-size: 18px;--nv-brand-line-height: inherit;--nv-brand-padding: var(--nv-item-padding-y) var(--nv-item-padding-x);--nv-brand-link-color: rgba(255, 255, 255, 0.95);--nv-subnav-padding-x: 0rem;--nv-subnav-padding-y: 0rem;--nv-subnav-line-height: inherit;--nv-subnav-font-size: inherit;--nv-subnav-width: 200px;--nv-subnav-larger-width: calc(var(--nv-subnav-width) * 3 + var(--nv-subnav-padding-x) * 2);--nv-item-color: rgba(255, 255, 255, 0.65);--nv-item-bg: transparent;--nv-item-hover-color: rgba(255, 255, 255, 0.85);--nv-item-hover-bg: rgba(0, 0, 0, 0.35);--nv-item-active-color: #fff;--nv-item-active-bg: var(--nv-primary-color);--nv-subnav-item-color: rgba(0, 0, 0, 0.65);--nv-subnav-item-bg: transparent;--nv-subnav-item-hover-color: rgba(255, 255, 255, 0.85);--nv-subnav-item-hover-bg: rgba(0, 0, 0, 0.4);--nv-subnav-item-active-color: #fff;--nv-subnav-item-active-bg: var(--nv-primary-color);--nv-subnav-zindex: 50;--nv-icon-height: 1.5rem;--nv-toggle-padding: 0.125rem 0.5rem;--nv-base-radius: 0.25rem;--nv-expanded-bg: rgba(255, 255, 255, 0.075);--nv-subnav-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.25), 1px 1px 0 0 rgba(0, 0, 0, 0.15) inset}.nav li>a,.nav li>span,.navbar-content,.subnav-content{padding:var(--nv-item-padding-y) var(--nv-item-padding-x);margin:var(--nv-item-margin)}.nav>li,.row>li,.subnav>li,.subnav-toggle+ul>li,.subnav-toggle+div>li,.nav li>span,.nav li>a{display:flex;flex-flow:row wrap;align-items:center;justify-content:space-between}.nav{display:flex;font-size:var(--nv-font-size);line-height:var(--nv-line-height)}.nav,.nav ul{padding:0;margin:0;list-style:none}.nav li{transition:margin .3s ease 0s}.nav li>span,.nav li>a{flex-wrap:nowrap;overflow:hidden;font-size:var(--nv-item-font-size);line-height:var(--nv-item-line-height)}.nav li>a{text-decoration:none}.nav li>span>span,.nav li>a>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.subnav-toggle,.navbar-toggle{display:flex;align-items:center;align-self:center;padding:var(--nv-toggle-padding);margin:auto var(--nv-item-padding-x);border:1px solid rgba(0,0,0,0);border-radius:var(--nv-base-radius)}li.open-mobile>.subnav-toggle+ul,li.open-mobile>.subnav-toggle+div,li.open-mobile>.subnav{display:block}.open-mobile+.open-mobile{margin-top:var(--nv-item-padding-y)}.parent-icon,.subnav-toggle+ul,.subnav-toggle+div,.subnav{display:none}.subnav-content p,.subnav-content ul{margin-bottom:var(--nv-item-padding-y)}ul.subnav,div.subnav ul{flex-basis:100%;flex-direction:column;flex-grow:1;padding:0 0 0 var(--nv-item-padding-x)}div.subnav{flex-basis:100%}.menu-icon,.parent-icon{width:var(--nv-icon-height);height:var(--nv-icon-height);line-height:var(--nv-icon-height);text-align:center;fill:currentcolor}.menu-icon{font-size:calc(var(--nv-icon-height)*.94)}.menu-icon+span{flex:auto;margin-left:calc(var(--nv-item-padding-x)/2)}@media(min-width: 768px){.row>li{align-content:flex-start}nav li:not(.full-width),.nav li:not(.full-width){position:relative}.parent-icon,.subnav-toggle+ul,.subnav-toggle+div{display:flex}ul.subnav>li,div.subnav>ul>li{display:none}.open-position>ul.subnav>li,.open-position>div.subnav>ul>li{display:flex}.subnav-toggle,.navbar-toggle{display:none}.subnav{position:absolute;display:block;font-size:var(--nv-subnav-font-size, 14px);line-height:var(--nv-subnav-line-height, 1.5rem);opacity:0}.subnav li>span,.subnav li>a{flex-basis:100%;font-size:var(--nv-subnav-item-font-size, inherit);line-height:var(--nv-subnav-item-line-height, inherit)}div.subnav ul{padding:0}ul.subnav,div.subnav,.subnav .subnav{padding:var(--nv-subnav-padding-y) var(--nv-subnav-padding-x)}.subnav-content,ul.subnav{flex-direction:column}li.open-mobile{background:none;transition:none}li.open-mobile+.open-mobile{margin:0}.column-title,div.subnav>ul>li>span{font-size:120%}.subnav li>a,.subnav li>span,.subnav-content{padding:var(--nv-subnav-item-padding-y) var(--nv-subnav-item-padding-x);margin:var(--nv-subnav-item-margin)}.nav>li>.subnav{margin-top:var(--nv-padding-y)}.subnav .subnav{margin-top:calc(var(--nv-subnav-padding-y)*-1);margin-left:var(--nv-subnav-padding-x)}ul.subnav{width:var(--nv-subnav-width)}div.subnav{min-width:var(--nv-subnav-larger-width)}div.subnav>ul{flex-direction:row;padding:0;margin:0}div.subnav.m1{min-width:calc(var(--nv-subnav-width) + var(--nv-subnav-padding-x)*2)}div.subnav.m2{min-width:calc(var(--nv-subnav-width)*2 + var(--nv-subnav-padding-x)*2)}div.subnav.m3{min-width:calc(var(--nv-subnav-width)*3 + var(--nv-subnav-padding-x)*2)}div.subnav.m4{min-width:calc(var(--nv-subnav-width)*4 + var(--nv-subnav-padding-x)*2)}}.nav li>a,.nav li>span{color:var(--nv-item-color)}.nav li.open-mobile{background-color:var(--nv-expanded-bg)}@media(min-width: 768px){.nav>li>span,.nav>li>a{background-color:var(--nv-item-bg)}.nav>li.open>span,.nav>li.open>a,.nav>li:hover>span,.nav>li:hover>a{color:var(--nv-item-hover-color);background-color:var(--nv-item-hover-bg)}.nav>li.active>span,.nav>li.active>a,.nav>li.active.open>span,.nav>li.active.open>a,.nav>li.active:hover>span,.nav>li.active:hover>a{color:var(--nv-item-active-color);background-color:var(--nv-item-active-bg)}}.subnav-toggle,.navbar-toggle{color:currentcolor;background-color:rgba(0,0,0,0)}.subnav-toggle:focus,.navbar-toggle:focus{color:var(--nv-bg);background-color:var(--nv-link-color);outline:none}.open-mobile>.subnav-toggle:not(:focus),.open-mobile>.navbar-toggle:not(:focus){color:var(--nv-item-color);border-color:var(--nv-item-color)}@media(min-width: 768px){.subnav{background-color:var(--nv-subnav-bg);box-shadow:var(--nv-subnav-shadow)}.subnav li>span,.subnav li>a{color:var(--nv-subnav-item-color);background-color:var(--nv-subnav-item-bg)}.subnav li>div{background-color:var(--nv-subnav-item-bg)}.subnav li.open>a,.subnav li:hover>a{color:var(--nv-subnav-item-hover-color);background-color:var(--nv-subnav-item-hover-bg)}.subnav li.active>span,.subnav li.active>a,.subnav li.active:hover>span,.subnav li.active:hover>a{color:var(--nv-subnav-item-active-color);background-color:var(--nv-subnav-item-active-bg)}.column-title,div.subnav>ul>li>span{color:var(--nv-subnav-item-color)}div.subnav li>ul>li.open>span,div.subnav li>ul>li:hover>span,ul.subnav>li.open>span,ul.subnav>li:hover>span{color:var(--nv-subnav-item-hover-color);background-color:var(--nv-subnav-item-hover-bg)}div.subnav{color:var(--nv-subnav-text-color)}.subnav-content a:not([class]),.subnav-content b{color:var(--nv-subnav-link-color)}.subnav-content a:not([class]):hover{color:var(--nv-subnav-link-color-hover)}}.nav{flex-direction:column}@media(min-width: 768px){.nav li>.subnav{top:-99999em;left:-99999em;opacity:0;transition:transform .5s ease,opacity .4s linear;transform:translate(-10px)}.nav li>a{flex-basis:100%}.nav li.open-position>.subnav{top:0;left:100%;z-index:var(--nv-subnav-zindex)}.nav li.open>.subnav{opacity:1;transform:translate(0)}.nav>li>.subnav{margin-top:0;margin-left:var(--nv-padding-x)}}/*# sourceMappingURL=navbar-left-menu.min.css.map */ 2 | -------------------------------------------------------------------------------- /dist/js/navbar.js: -------------------------------------------------------------------------------- 1 | var Navbar=function(){"use strict";var an=Object.defineProperty;var ln=(f,g,T)=>g in f?an(f,g,{enumerable:!0,configurable:!0,writable:!0,value:T}):f[g]=T;var D=(f,g,T)=>ln(f,typeof g!="symbol"?g+"":g,T);const f={},g=e=>{const{type:n,currentTarget:t}=e;f[n].forEach((s,i)=>{t===i&&s.forEach((o,a)=>{a.apply(i,[e]),typeof o=="object"&&o.once&&ae(i,n,a,o)})})},T=(e,n,t,s)=>{f[n]||(f[n]=new Map);const i=f[n];i.has(e)||i.set(e,new Map);const o=i.get(e),{size:a}=o;o.set(t,s),a||e.addEventListener(n,g,s)},ae=(e,n,t,s)=>{const i=f[n],o=i&&i.get(e),a=o&&o.get(t),l=a!==void 0?a:s;o&&o.has(t)&&o.delete(t),i&&(!o||!o.size)&&i.delete(e),(!i||!i.size)&&delete f[n],(!o||!o.size)&&e.removeEventListener(n,g,l)},C="aria-expanded",Le="DOMContentLoaded",Me="keydown",Se="keyup",le="click",ke="mouseenter",ze="mouseleave",Q="ArrowDown",X="ArrowUp",_="ArrowLeft",Y="ArrowRight",Oe="Escape",ee="Space",Pe="transitionDuration",De="transitionDelay",ne="transitionend",ce="transitionProperty",Re=(e,n)=>e.getAttribute(n),$=(e,n,t)=>e.setAttribute(n,t),te=(e,...n)=>{e.classList.add(...n)},W=(e,...n)=>{e.classList.remove(...n)},w=(e,n)=>e.classList.contains(n),K=e=>e!=null&&typeof e=="object"||!1,S=e=>K(e)&&typeof e.nodeType=="number"&&[1,2,3,4,5,6,7,8,9,10,11].some(n=>e.nodeType===n)||!1,v=e=>S(e)&&e.nodeType===1||!1,k=new Map,R={data:k,set:(e,n,t)=>{v(e)&&(k.has(n)||k.set(n,new Map),k.get(n).set(e,t))},getAllFor:e=>k.get(e)||null,get:(e,n)=>{if(!v(e)||!n)return null;const t=R.getAllFor(n);return e&&t&&t.get(e)||null},remove:(e,n)=>{const t=R.getAllFor(n);!t||!v(e)||(t.delete(e),t.size===0&&k.delete(n))}},Fe=(e,n)=>R.get(e,n),je=e=>e==null?void 0:e.trim().replace(/(?:^\w|[A-Z]|\b\w)/g,(n,t)=>t===0?n.toLowerCase():n.toUpperCase()).replace(/\s+/g,""),He=e=>K(e)&&e.constructor.name==="Window"||!1,ue=e=>S(e)&&e.nodeType===9||!1,y=e=>ue(e)?e:S(e)?e.ownerDocument:He(e)?e.document:globalThis.document,Ie=(e,...n)=>Object.assign(e,...n),h=(e,n)=>e.dispatchEvent(n),z=(e,n,t)=>{const s=getComputedStyle(e,t),i=n.replace("webkit","Webkit").replace(/([A-Z])/g,"-$1").toLowerCase();return s.getPropertyValue(i)},We=e=>{const n=z(e,ce),t=z(e,De),s=t.includes("ms")?1:1e3,i=n&&n!=="none"?parseFloat(t)*s:0;return Number.isNaN(i)?0:i},Ke=e=>{const n=z(e,ce),t=z(e,Pe),s=t.includes("ms")?1:1e3,i=n&&n!=="none"?parseFloat(t)*s:0;return Number.isNaN(i)?0:i},fe=(e,n)=>{let t=0;const s=new Event(ne),i=Ke(e),o=We(e);if(i){const a=l=>{l.target===e&&(n.apply(e,[l]),e.removeEventListener(ne,a),t=1)};e.addEventListener(ne,a),setTimeout(()=>{t||h(e,s)},i+o+17)}else n.apply(e,[s])},de=e=>["true",!0].includes(e)?!0:["false",!1].includes(e)?!1:["null","",null,void 0].includes(e)?null:e!==""&&!Number.isNaN(+e)?+e:e,se=e=>Object.entries(e),Ue=(e,n,t,s)=>{if(!v(e))return n;const i={...t},o={...e.dataset},a={...n},l={},c="title";return se(o).forEach(([r,u])=>{const H=je(r);l[H]=de(u)}),se(i).forEach(([r,u])=>{i[r]=de(u)}),se(n).forEach(([r,u])=>{r in i?a[r]=i[r]:r in l?a[r]=l[r]:a[r]=r===c?Re(e,c):u}),a},Ve=e=>Object.keys(e),U=(e,n)=>{const t=new CustomEvent(e,{cancelable:!0,bubbles:!0});return K(n)&&Ie(t,n),t},ge=e=>K(e)&&e.constructor.name==="Map"||!1,Ze=e=>typeof e=="number"||!1,N=new Map,A={set:(e,n,t,s)=>{v(e)&&(s&&s.length?(N.has(e)||N.set(e,new Map),N.get(e).set(s,setTimeout(n,t))):N.set(e,setTimeout(n,t)))},get:(e,n)=>{if(!v(e))return null;const t=N.get(e);return n&&t&&ge(t)?t.get(n)||null:Ze(t)?t:null},clear:(e,n)=>{if(!v(e))return;const t=N.get(e);n&&n.length&&ge(t)?(clearTimeout(t.get(n)),t.delete(n),t.size===0&&N.delete(e)):(clearTimeout(t),N.delete(e))}},qe=e=>v(e)&&"offsetWidth"in e||!1,xe=e=>y(e).documentElement,Be=e=>{var n;return e?ue(e)?e.defaultView:S(e)?(n=e==null?void 0:e.ownerDocument)==null?void 0:n.defaultView:e:window},ve=(e,n)=>e.matches(n),Ge=e=>xe(e).dir==="rtl",d=(e,n)=>!e||!n?null:e.closest(n)||d(e.getRootNode().host,n)||null,Je=(e,n)=>v(e)?e:(v(n)?n:y()).querySelector(e),he=(e,n)=>(S(n)?n:y()).getElementsByTagName(e),p=(e,n)=>(n&&S(n)?n:y()).getElementsByClassName(e),Qe="3.3.1",b="navbar",F="Navbar",V=`[data-function="${b}"]`,pe=`${V},.${b}`,m="open",oe="open-position",E="open-mobile",j="subnav",Z=`${j}-toggle`,be=`${b}-toggle`,me={breakpoint:768,toggleSiblings:!0,delay:500},q=U(`show.${b}`),Ee=U(`shown.${b}`),x=U(`hide.${b}`),ie=U(`hidden.${b}`),O=e=>Fe(e,F),Xe=e=>new M(e),B=({menu:e,_observer:n},t)=>{t?n.observe(e):n.disconnect()},G=e=>{const{options:n,menu:t}=e,[s]=p(Z,t);return s&&z(s,"display")!=="none"||Be(t).innerWidth{const t=n?T:ae,{items:s,navbarToggle:i,menu:o}=e,a=y(o);Array.from(s).forEach(l=>{const{lastElementChild:c}=l;c&&w(c,j)&&(t(l,ke,Te),t(l,ze,re));const[r]=p(Z,l);r&&t(r,le,Ne)}),t(a,Me,Ye),t(a,Se,en),i&&t(i,le,Ne)},L=(e,n)=>Array.from(e.children).find(t=>ve(t,n)),_e=e=>{const n=L(e,`.${j}`),t=L(e,"A");if(t&&(h(t,q),q.defaultPrevented))return;te(e,oe),te(e,m);const{parentElement:s}=e;if(s){const o=p(m,s);P(Array.from(o).filter(a=>a!==e))}n&&fe(n,()=>{A.clear(e,"in"),t&&(h(t,Ee),$(t,C,"true"))})},ye=(e,n)=>{const t=L(e,`.${j}`),s=L(e,"A"),i=L(e,Z);if(!([m,E].some(o=>w(e,o))&&s&&(h(s,x),x.defaultPrevented))){if(w(e,m)){const o=()=>{W(e,oe),A.clear(e,"out"),s&&(h(s,ie),$(s,C,"false"))};W(e,m),n&&t?fe(t,o):o()}w(e,E)&&(W(e,E),[i,s].forEach(o=>{o&&$(o,C,"false")}),s&&h(s,ie))}},P=e=>{Array.from(e).forEach(n=>ye(n))},Ye=e=>{const{code:n,target:t}=e;(qe(t)?d(t,pe):null)&&[Q,X,ee].includes(n)&&e.preventDefault()};function en(e){const{code:n}=e,{activeElement:t}=y(this),s=t&&d(t,"nav"),i=s&&O(s);if(!i||!t||this&&!this.contains(t))return;const o=d(t,"LI");if(!o)return;const a=G(i),{previousElementSibling:l,nextElementSibling:c}=o,r=d(o,`.${m}`),u=d(o,"UL"),[H]=p(j,o),nn=[ee,Q,_,Y,X],J=u&&z(u,"flex-direction")==="column",$e=Ge(o),tn=$e?Y:_,sn=$e?_:Y,on=u&&l&&(n===X&&J||n===tn&&!J),rn=u&&c&&(n===Q&&J||n===sn&&!J);let I=null;if(n===Oe&&r?(re.call(r),I=r):!a&&H&&n===ee&&(w(o,m)?re.call(o):Te.call(o)),on&&o!==u.firstElementChild?I=l:rn&&o!==u.lastElementChild&&(I=c),I){const{firstElementChild:Ae}=I;Ae&&Ae.focus()}!a&&nn.includes(n)&&e.preventDefault()}const Ne=e=>{e.preventDefault();const{currentTarget:n,target:t}=e,s=d(n,pe),i=s&&O(s);if(!i)return;const{options:o,navbarToggle:a}=i;if(t!==n&&!(n!=null&&n.contains(t)))return;const l=d(n,"LI")||s,c=d(n,`.${be}`)===a?a:L(l,`.${Z}`),r=c===a?null:L(l,"A"),u=p(E,l);if(w(l,E)){if(r&&(h(r,x),x.defaultPrevented))return;P(u),W(l,E),c&&($(c,C,"false"),c===a&&B(i)),r&&($(r,C,"false"),h(r,ie))}else{if(r&&(h(r,q),q.defaultPrevented))return;if(c===a)B(i,!0);else{const H=o.toggleSiblings?p(E,l.parentElement):u;P(H)}te(l,E),c&&$(c,C,"true"),r&&($(r,C,"true"),h(r,Ee))}};function Te(){const e=d(this,`${V},.${b}`),n=e&&O(e),t=A.get(this,"out");if(!(!n||G(n))&&(A.clear(this,"out"),!w(this,m)&&!t)){const s=()=>_e(this);A.set(this,s,17,"in")}}function re(){const e=d(this,`${V},.${b}`),n=e&&O(e);if(!(!n||G(n))&&w(this,m)){A.clear(this,"in");const t=()=>{P(p(oe,this)),ye(this,!0)};A.set(this,t,n.options.delay,"out")}}class M{constructor(n,t){D(this,"listenResize",()=>{G(this)||(P(p(E,y(this.menu))),B(this))});const s=Je(n);if(!s)throw new TypeError(`${F} cannot initialize the specified target.`);const[i]=p(be,s),o=O(s);o&&o.dispose(),this.menu=s,this.options=Ue(s,me,t||{}),this.items=he("LI",s),this.navbarToggle=i,this._observer=new ResizeObserver(this.listenResize),we(this,!0),R.set(s,F,this)}get defaults(){return me}get name(){return F}dispose(){P(this.items),we(this),B(this),R.remove(this.menu,F),Ve(this).forEach(n=>{delete this[n]})}}D(M,"selector",V),D(M,"init",Xe),D(M,"getInstance",O),D(M,"version",Qe);const Ce=e=>{const{selector:n,init:t}=M;[...he("*",y(e))].filter(i=>ve(i,n)).forEach(t)};return document.body?Ce():T(document,Le,()=>Ce(),{once:!0}),M}(); 2 | //# sourceMappingURL=navbar.js.map 3 | -------------------------------------------------------------------------------- /docs/src/js/navbar.js: -------------------------------------------------------------------------------- 1 | var Navbar=function(){"use strict";var an=Object.defineProperty;var ln=(f,g,T)=>g in f?an(f,g,{enumerable:!0,configurable:!0,writable:!0,value:T}):f[g]=T;var D=(f,g,T)=>ln(f,typeof g!="symbol"?g+"":g,T);const f={},g=e=>{const{type:n,currentTarget:t}=e;f[n].forEach((s,i)=>{t===i&&s.forEach((o,a)=>{a.apply(i,[e]),typeof o=="object"&&o.once&&ae(i,n,a,o)})})},T=(e,n,t,s)=>{f[n]||(f[n]=new Map);const i=f[n];i.has(e)||i.set(e,new Map);const o=i.get(e),{size:a}=o;o.set(t,s),a||e.addEventListener(n,g,s)},ae=(e,n,t,s)=>{const i=f[n],o=i&&i.get(e),a=o&&o.get(t),l=a!==void 0?a:s;o&&o.has(t)&&o.delete(t),i&&(!o||!o.size)&&i.delete(e),(!i||!i.size)&&delete f[n],(!o||!o.size)&&e.removeEventListener(n,g,l)},C="aria-expanded",Le="DOMContentLoaded",Me="keydown",Se="keyup",le="click",ke="mouseenter",ze="mouseleave",Q="ArrowDown",X="ArrowUp",_="ArrowLeft",Y="ArrowRight",Oe="Escape",ee="Space",Pe="transitionDuration",De="transitionDelay",ne="transitionend",ce="transitionProperty",Re=(e,n)=>e.getAttribute(n),$=(e,n,t)=>e.setAttribute(n,t),te=(e,...n)=>{e.classList.add(...n)},W=(e,...n)=>{e.classList.remove(...n)},w=(e,n)=>e.classList.contains(n),K=e=>e!=null&&typeof e=="object"||!1,S=e=>K(e)&&typeof e.nodeType=="number"&&[1,2,3,4,5,6,7,8,9,10,11].some(n=>e.nodeType===n)||!1,v=e=>S(e)&&e.nodeType===1||!1,k=new Map,R={data:k,set:(e,n,t)=>{v(e)&&(k.has(n)||k.set(n,new Map),k.get(n).set(e,t))},getAllFor:e=>k.get(e)||null,get:(e,n)=>{if(!v(e)||!n)return null;const t=R.getAllFor(n);return e&&t&&t.get(e)||null},remove:(e,n)=>{const t=R.getAllFor(n);!t||!v(e)||(t.delete(e),t.size===0&&k.delete(n))}},Fe=(e,n)=>R.get(e,n),je=e=>e==null?void 0:e.trim().replace(/(?:^\w|[A-Z]|\b\w)/g,(n,t)=>t===0?n.toLowerCase():n.toUpperCase()).replace(/\s+/g,""),He=e=>K(e)&&e.constructor.name==="Window"||!1,ue=e=>S(e)&&e.nodeType===9||!1,y=e=>ue(e)?e:S(e)?e.ownerDocument:He(e)?e.document:globalThis.document,Ie=(e,...n)=>Object.assign(e,...n),h=(e,n)=>e.dispatchEvent(n),z=(e,n,t)=>{const s=getComputedStyle(e,t),i=n.replace("webkit","Webkit").replace(/([A-Z])/g,"-$1").toLowerCase();return s.getPropertyValue(i)},We=e=>{const n=z(e,ce),t=z(e,De),s=t.includes("ms")?1:1e3,i=n&&n!=="none"?parseFloat(t)*s:0;return Number.isNaN(i)?0:i},Ke=e=>{const n=z(e,ce),t=z(e,Pe),s=t.includes("ms")?1:1e3,i=n&&n!=="none"?parseFloat(t)*s:0;return Number.isNaN(i)?0:i},fe=(e,n)=>{let t=0;const s=new Event(ne),i=Ke(e),o=We(e);if(i){const a=l=>{l.target===e&&(n.apply(e,[l]),e.removeEventListener(ne,a),t=1)};e.addEventListener(ne,a),setTimeout(()=>{t||h(e,s)},i+o+17)}else n.apply(e,[s])},de=e=>["true",!0].includes(e)?!0:["false",!1].includes(e)?!1:["null","",null,void 0].includes(e)?null:e!==""&&!Number.isNaN(+e)?+e:e,se=e=>Object.entries(e),Ue=(e,n,t,s)=>{if(!v(e))return n;const i={...t},o={...e.dataset},a={...n},l={},c="title";return se(o).forEach(([r,u])=>{const H=je(r);l[H]=de(u)}),se(i).forEach(([r,u])=>{i[r]=de(u)}),se(n).forEach(([r,u])=>{r in i?a[r]=i[r]:r in l?a[r]=l[r]:a[r]=r===c?Re(e,c):u}),a},Ve=e=>Object.keys(e),U=(e,n)=>{const t=new CustomEvent(e,{cancelable:!0,bubbles:!0});return K(n)&&Ie(t,n),t},ge=e=>K(e)&&e.constructor.name==="Map"||!1,Ze=e=>typeof e=="number"||!1,N=new Map,A={set:(e,n,t,s)=>{v(e)&&(s&&s.length?(N.has(e)||N.set(e,new Map),N.get(e).set(s,setTimeout(n,t))):N.set(e,setTimeout(n,t)))},get:(e,n)=>{if(!v(e))return null;const t=N.get(e);return n&&t&&ge(t)?t.get(n)||null:Ze(t)?t:null},clear:(e,n)=>{if(!v(e))return;const t=N.get(e);n&&n.length&&ge(t)?(clearTimeout(t.get(n)),t.delete(n),t.size===0&&N.delete(e)):(clearTimeout(t),N.delete(e))}},qe=e=>v(e)&&"offsetWidth"in e||!1,xe=e=>y(e).documentElement,Be=e=>{var n;return e?ue(e)?e.defaultView:S(e)?(n=e==null?void 0:e.ownerDocument)==null?void 0:n.defaultView:e:window},ve=(e,n)=>e.matches(n),Ge=e=>xe(e).dir==="rtl",d=(e,n)=>!e||!n?null:e.closest(n)||d(e.getRootNode().host,n)||null,Je=(e,n)=>v(e)?e:(v(n)?n:y()).querySelector(e),he=(e,n)=>(S(n)?n:y()).getElementsByTagName(e),p=(e,n)=>(n&&S(n)?n:y()).getElementsByClassName(e),Qe="3.3.1",b="navbar",F="Navbar",V=`[data-function="${b}"]`,pe=`${V},.${b}`,m="open",oe="open-position",E="open-mobile",j="subnav",Z=`${j}-toggle`,be=`${b}-toggle`,me={breakpoint:768,toggleSiblings:!0,delay:500},q=U(`show.${b}`),Ee=U(`shown.${b}`),x=U(`hide.${b}`),ie=U(`hidden.${b}`),O=e=>Fe(e,F),Xe=e=>new M(e),B=({menu:e,_observer:n},t)=>{t?n.observe(e):n.disconnect()},G=e=>{const{options:n,menu:t}=e,[s]=p(Z,t);return s&&z(s,"display")!=="none"||Be(t).innerWidth{const t=n?T:ae,{items:s,navbarToggle:i,menu:o}=e,a=y(o);Array.from(s).forEach(l=>{const{lastElementChild:c}=l;c&&w(c,j)&&(t(l,ke,Te),t(l,ze,re));const[r]=p(Z,l);r&&t(r,le,Ne)}),t(a,Me,Ye),t(a,Se,en),i&&t(i,le,Ne)},L=(e,n)=>Array.from(e.children).find(t=>ve(t,n)),_e=e=>{const n=L(e,`.${j}`),t=L(e,"A");if(t&&(h(t,q),q.defaultPrevented))return;te(e,oe),te(e,m);const{parentElement:s}=e;if(s){const o=p(m,s);P(Array.from(o).filter(a=>a!==e))}n&&fe(n,()=>{A.clear(e,"in"),t&&(h(t,Ee),$(t,C,"true"))})},ye=(e,n)=>{const t=L(e,`.${j}`),s=L(e,"A"),i=L(e,Z);if(!([m,E].some(o=>w(e,o))&&s&&(h(s,x),x.defaultPrevented))){if(w(e,m)){const o=()=>{W(e,oe),A.clear(e,"out"),s&&(h(s,ie),$(s,C,"false"))};W(e,m),n&&t?fe(t,o):o()}w(e,E)&&(W(e,E),[i,s].forEach(o=>{o&&$(o,C,"false")}),s&&h(s,ie))}},P=e=>{Array.from(e).forEach(n=>ye(n))},Ye=e=>{const{code:n,target:t}=e;(qe(t)?d(t,pe):null)&&[Q,X,ee].includes(n)&&e.preventDefault()};function en(e){const{code:n}=e,{activeElement:t}=y(this),s=t&&d(t,"nav"),i=s&&O(s);if(!i||!t||this&&!this.contains(t))return;const o=d(t,"LI");if(!o)return;const a=G(i),{previousElementSibling:l,nextElementSibling:c}=o,r=d(o,`.${m}`),u=d(o,"UL"),[H]=p(j,o),nn=[ee,Q,_,Y,X],J=u&&z(u,"flex-direction")==="column",$e=Ge(o),tn=$e?Y:_,sn=$e?_:Y,on=u&&l&&(n===X&&J||n===tn&&!J),rn=u&&c&&(n===Q&&J||n===sn&&!J);let I=null;if(n===Oe&&r?(re.call(r),I=r):!a&&H&&n===ee&&(w(o,m)?re.call(o):Te.call(o)),on&&o!==u.firstElementChild?I=l:rn&&o!==u.lastElementChild&&(I=c),I){const{firstElementChild:Ae}=I;Ae&&Ae.focus()}!a&&nn.includes(n)&&e.preventDefault()}const Ne=e=>{e.preventDefault();const{currentTarget:n,target:t}=e,s=d(n,pe),i=s&&O(s);if(!i)return;const{options:o,navbarToggle:a}=i;if(t!==n&&!(n!=null&&n.contains(t)))return;const l=d(n,"LI")||s,c=d(n,`.${be}`)===a?a:L(l,`.${Z}`),r=c===a?null:L(l,"A"),u=p(E,l);if(w(l,E)){if(r&&(h(r,x),x.defaultPrevented))return;P(u),W(l,E),c&&($(c,C,"false"),c===a&&B(i)),r&&($(r,C,"false"),h(r,ie))}else{if(r&&(h(r,q),q.defaultPrevented))return;if(c===a)B(i,!0);else{const H=o.toggleSiblings?p(E,l.parentElement):u;P(H)}te(l,E),c&&$(c,C,"true"),r&&($(r,C,"true"),h(r,Ee))}};function Te(){const e=d(this,`${V},.${b}`),n=e&&O(e),t=A.get(this,"out");if(!(!n||G(n))&&(A.clear(this,"out"),!w(this,m)&&!t)){const s=()=>_e(this);A.set(this,s,17,"in")}}function re(){const e=d(this,`${V},.${b}`),n=e&&O(e);if(!(!n||G(n))&&w(this,m)){A.clear(this,"in");const t=()=>{P(p(oe,this)),ye(this,!0)};A.set(this,t,n.options.delay,"out")}}class M{constructor(n,t){D(this,"listenResize",()=>{G(this)||(P(p(E,y(this.menu))),B(this))});const s=Je(n);if(!s)throw new TypeError(`${F} cannot initialize the specified target.`);const[i]=p(be,s),o=O(s);o&&o.dispose(),this.menu=s,this.options=Ue(s,me,t||{}),this.items=he("LI",s),this.navbarToggle=i,this._observer=new ResizeObserver(this.listenResize),we(this,!0),R.set(s,F,this)}get defaults(){return me}get name(){return F}dispose(){P(this.items),we(this),B(this),R.remove(this.menu,F),Ve(this).forEach(n=>{delete this[n]})}}D(M,"selector",V),D(M,"init",Xe),D(M,"getInstance",O),D(M,"version",Qe);const Ce=e=>{const{selector:n,init:t}=M;[...he("*",y(e))].filter(i=>ve(i,n)).forEach(t)};return document.body?Ce():T(document,Le,()=>Ce(),{once:!0}),M}(); 2 | //# sourceMappingURL=navbar.js.map 3 | -------------------------------------------------------------------------------- /docs/src/css/navbar-left.min.css: -------------------------------------------------------------------------------- 1 | :root{--nv-padding-x: 0rem;--nv-padding-y: 0rem;--nv-line-height: 1.5rem;--nv-font-size: 14px;--nv-primary-color: #069;--nv-bg: #687c86;--nv-text-color: rgba(255, 255, 255, 0.55);--nv-link-color: rgba(255, 255, 255, 0.75);--nv-link-color-hover: rgba(255, 255, 255, 0.95);--nv-subnav-bg: #dadee0;--nv-subnav-text-color: rgba(0, 0, 0, 0.55);--nv-subnav-link-color: rgba(0, 0, 0, 0.75);--nv-subnav-link-color-hover: rgba(0, 0, 0, 0.95);--nv-item-font-size: 14px;--nv-item-line-height: 1.5rem;--nv-item-padding-y: 0.5rem;--nv-item-padding-x: 1rem;--nv-item-margin: 0;--nv-subnav-item-font-size: inherit;--nv-subnav-item-line-height: inherit;--nv-subnav-item-padding-x: var(--nv-item-padding-x);--nv-subnav-item-padding-y: var(--nv-item-padding-y);--nv-subnav-item-margin: 0;--nv-brand-font-size: 18px;--nv-brand-line-height: inherit;--nv-brand-padding: var(--nv-item-padding-y) var(--nv-item-padding-x);--nv-brand-link-color: rgba(255, 255, 255, 0.95);--nv-subnav-padding-x: 0rem;--nv-subnav-padding-y: 0rem;--nv-subnav-line-height: inherit;--nv-subnav-font-size: inherit;--nv-subnav-width: 200px;--nv-subnav-larger-width: calc(var(--nv-subnav-width) * 3 + var(--nv-subnav-padding-x) * 2);--nv-item-color: rgba(255, 255, 255, 0.65);--nv-item-bg: transparent;--nv-item-hover-color: rgba(255, 255, 255, 0.85);--nv-item-hover-bg: rgba(0, 0, 0, 0.35);--nv-item-active-color: #fff;--nv-item-active-bg: var(--nv-primary-color);--nv-subnav-item-color: rgba(0, 0, 0, 0.65);--nv-subnav-item-bg: transparent;--nv-subnav-item-hover-color: rgba(255, 255, 255, 0.85);--nv-subnav-item-hover-bg: rgba(0, 0, 0, 0.4);--nv-subnav-item-active-color: #fff;--nv-subnav-item-active-bg: var(--nv-primary-color);--nv-subnav-zindex: 50;--nv-icon-height: 1.5rem;--nv-toggle-padding: 0.125rem 0.5rem;--nv-base-radius: 0.25rem;--nv-expanded-bg: rgba(255, 255, 255, 0.075);--nv-subnav-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.25), 1px 1px 0 0 rgba(0, 0, 0, 0.15) inset}.navbar{display:flex;flex-flow:row wrap;justify-content:space-between;padding:var(--nv-padding-y) var(--nv-padding-x);font-size:var(--nv-font-size);line-height:var(--nv-line-height)}.navbar>div{display:none;flex-basis:100%;flex-direction:column;flex-grow:1}.navbar.open-mobile>div{display:flex}.navbar .nav{flex-direction:column}.navbar .brand{display:flex;align-items:center;padding:var(--nv-brand-padding);font-size:var(--nv-brand-font-size);line-height:var(--nv-brand-line-height);text-decoration:none;white-space:nowrap}@media(min-width: 768px){.navbar{flex-flow:column nowrap;justify-content:flex-start;height:100%}.navbar>div{display:flex;flex-direction:column}.navbar .nav{flex-direction:column}}.navbar-content a:not([class]),.navbar-content b,.subnav-content a:not([class]),.subnav-content b{color:var(--nv-link-color)}@media(min-width: 768px){.navbar-content a:not([class]):hover{color:var(--nv-link-color-hover)}}.navbar{color:var(--nv-text-color);background-color:var(--nv-bg)}.navbar .brand{color:var(--nv-brand-link-color)}.nav li>a,.nav li>span,.navbar-content,.subnav-content{padding:var(--nv-item-padding-y) var(--nv-item-padding-x);margin:var(--nv-item-margin)}.nav>li,.row>li,.subnav>li,.subnav-toggle+ul>li,.subnav-toggle+div>li,.nav li>span,.nav li>a{display:flex;flex-flow:row wrap;align-items:center;justify-content:space-between}.nav{display:flex}.nav,.nav ul{padding:0;margin:0;list-style:none}.nav li{transition:margin .3s ease 0s}.nav li>span,.nav li>a{flex-wrap:nowrap;overflow:hidden;font-size:var(--nv-item-font-size);line-height:var(--nv-item-line-height)}.nav li>a{text-decoration:none}.nav li>span>span,.nav li>a>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.subnav-toggle,.navbar-toggle{display:flex;align-items:center;align-self:center;padding:var(--nv-toggle-padding);margin:auto var(--nv-item-padding-x);border:1px solid rgba(0,0,0,0);border-radius:var(--nv-base-radius)}li.open-mobile>.subnav-toggle+ul,li.open-mobile>.subnav-toggle+div,li.open-mobile>.subnav{display:block}.open-mobile+.open-mobile{margin-top:var(--nv-item-padding-y)}.parent-icon,.subnav-toggle+ul,.subnav-toggle+div,.subnav{display:none}.subnav-content p,.subnav-content ul{margin-bottom:var(--nv-item-padding-y)}ul.subnav,div.subnav ul{flex-basis:100%;flex-direction:column;flex-grow:1;padding:0 0 0 var(--nv-item-padding-x)}div.subnav{flex-basis:100%}.menu-icon,.parent-icon{width:var(--nv-icon-height);height:var(--nv-icon-height);line-height:var(--nv-icon-height);text-align:center;fill:currentcolor}.menu-icon{font-size:calc(var(--nv-icon-height)*.94)}.menu-icon+span{flex:auto;margin-left:calc(var(--nv-item-padding-x)/2)}@media(min-width: 768px){.row>li{align-content:flex-start}nav li:not(.full-width),.nav li:not(.full-width){position:relative}.parent-icon,.subnav-toggle+ul,.subnav-toggle+div{display:flex}ul.subnav>li,div.subnav>ul>li{display:none}.open-position>ul.subnav>li,.open-position>div.subnav>ul>li{display:flex}.subnav-toggle,.navbar-toggle{display:none}.subnav{position:absolute;display:block;font-size:var(--nv-subnav-font-size, 14px);line-height:var(--nv-subnav-line-height, 1.5rem);opacity:0}.subnav li>span,.subnav li>a{flex-basis:100%;font-size:var(--nv-subnav-item-font-size, inherit);line-height:var(--nv-subnav-item-line-height, inherit)}div.subnav ul{padding:0}ul.subnav,div.subnav,.subnav .subnav{padding:var(--nv-subnav-padding-y) var(--nv-subnav-padding-x)}.subnav-content,ul.subnav{flex-direction:column}li.open-mobile{background:none;transition:none}li.open-mobile+.open-mobile{margin:0}.column-title,div.subnav>ul>li>span{font-size:120%}.subnav li>a,.subnav li>span,.subnav-content{padding:var(--nv-subnav-item-padding-y) var(--nv-subnav-item-padding-x);margin:var(--nv-subnav-item-margin)}.nav>li>.subnav{margin-top:var(--nv-padding-y)}.subnav .subnav{margin-top:calc(var(--nv-subnav-padding-y)*-1);margin-left:var(--nv-subnav-padding-x)}ul.subnav{width:var(--nv-subnav-width)}div.subnav{min-width:var(--nv-subnav-larger-width)}div.subnav>ul{flex-direction:row;padding:0;margin:0}div.subnav.m1{min-width:calc(var(--nv-subnav-width) + var(--nv-subnav-padding-x)*2)}div.subnav.m2{min-width:calc(var(--nv-subnav-width)*2 + var(--nv-subnav-padding-x)*2)}div.subnav.m3{min-width:calc(var(--nv-subnav-width)*3 + var(--nv-subnav-padding-x)*2)}div.subnav.m4{min-width:calc(var(--nv-subnav-width)*4 + var(--nv-subnav-padding-x)*2)}}.nav li>a,.nav li>span{color:var(--nv-item-color)}.nav li.open-mobile{background-color:var(--nv-expanded-bg)}@media(min-width: 768px){.nav>li>span,.nav>li>a{background-color:var(--nv-item-bg)}.nav>li.open>span,.nav>li.open>a,.nav>li:hover>span,.nav>li:hover>a{color:var(--nv-item-hover-color);background-color:var(--nv-item-hover-bg)}.nav>li.active>span,.nav>li.active>a,.nav>li.active.open>span,.nav>li.active.open>a,.nav>li.active:hover>span,.nav>li.active:hover>a{color:var(--nv-item-active-color);background-color:var(--nv-item-active-bg)}}.subnav-toggle,.navbar-toggle{color:currentcolor;background-color:rgba(0,0,0,0)}.subnav-toggle:focus,.navbar-toggle:focus{color:var(--nv-bg);background-color:var(--nv-link-color);outline:none}.open-mobile>.subnav-toggle:not(:focus),.open-mobile>.navbar-toggle:not(:focus){color:var(--nv-item-color);border-color:var(--nv-item-color)}@media(min-width: 768px){.subnav{background-color:var(--nv-subnav-bg);box-shadow:var(--nv-subnav-shadow)}.subnav li>span,.subnav li>a{color:var(--nv-subnav-item-color);background-color:var(--nv-subnav-item-bg)}.subnav li>div{background-color:var(--nv-subnav-item-bg)}.subnav li.open>a,.subnav li:hover>a{color:var(--nv-subnav-item-hover-color);background-color:var(--nv-subnav-item-hover-bg)}.subnav li.active>span,.subnav li.active>a,.subnav li.active:hover>span,.subnav li.active:hover>a{color:var(--nv-subnav-item-active-color);background-color:var(--nv-subnav-item-active-bg)}.column-title,div.subnav>ul>li>span{color:var(--nv-subnav-item-color)}div.subnav li>ul>li.open>span,div.subnav li>ul>li:hover>span,ul.subnav>li.open>span,ul.subnav>li:hover>span{color:var(--nv-subnav-item-hover-color);background-color:var(--nv-subnav-item-hover-bg)}div.subnav{color:var(--nv-subnav-text-color)}.subnav-content a:not([class]),.subnav-content b{color:var(--nv-subnav-link-color)}.subnav-content a:not([class]):hover{color:var(--nv-subnav-link-color-hover)}}.nav{flex-direction:column}@media(min-width: 768px){.nav li>.subnav{top:-99999em;left:-99999em;opacity:0;transition:transform .5s ease,opacity .4s linear;transform:translate(-10px)}.nav li>a{flex-basis:100%}.nav li.open-position>.subnav{top:0;left:100%;z-index:var(--nv-subnav-zindex)}.nav li.open>.subnav{opacity:1;transform:translate(0)}.nav>li>.subnav{margin-top:0;margin-left:var(--nv-padding-x)}}/*# sourceMappingURL=navbar-left.min.css.map */ 2 | -------------------------------------------------------------------------------- /dist/css/navbar.min.css: -------------------------------------------------------------------------------- 1 | :root{--nv-padding-x: 0rem;--nv-padding-y: 0rem;--nv-line-height: 1.5rem;--nv-font-size: 14px;--nv-primary-color: #069;--nv-bg: #687c86;--nv-text-color: rgba(255, 255, 255, 0.55);--nv-link-color: rgba(255, 255, 255, 0.75);--nv-link-color-hover: rgba(255, 255, 255, 0.95);--nv-subnav-bg: #dadee0;--nv-subnav-text-color: rgba(0, 0, 0, 0.55);--nv-subnav-link-color: rgba(0, 0, 0, 0.75);--nv-subnav-link-color-hover: rgba(0, 0, 0, 0.95);--nv-item-font-size: 14px;--nv-item-line-height: 1.5rem;--nv-item-padding-y: 0.5rem;--nv-item-padding-x: 1rem;--nv-item-margin: 0;--nv-subnav-item-font-size: inherit;--nv-subnav-item-line-height: inherit;--nv-subnav-item-padding-x: var(--nv-item-padding-x);--nv-subnav-item-padding-y: var(--nv-item-padding-y);--nv-subnav-item-margin: 0;--nv-brand-font-size: 18px;--nv-brand-line-height: inherit;--nv-brand-padding: var(--nv-item-padding-y) var(--nv-item-padding-x);--nv-brand-link-color: rgba(255, 255, 255, 0.95);--nv-subnav-padding-x: 0rem;--nv-subnav-padding-y: 0rem;--nv-subnav-line-height: inherit;--nv-subnav-font-size: inherit;--nv-subnav-width: 200px;--nv-subnav-larger-width: calc(var(--nv-subnav-width) * 3 + var(--nv-subnav-padding-x) * 2);--nv-item-color: rgba(255, 255, 255, 0.65);--nv-item-bg: transparent;--nv-item-hover-color: rgba(255, 255, 255, 0.85);--nv-item-hover-bg: rgba(0, 0, 0, 0.35);--nv-item-active-color: #fff;--nv-item-active-bg: var(--nv-primary-color);--nv-subnav-item-color: rgba(0, 0, 0, 0.65);--nv-subnav-item-bg: transparent;--nv-subnav-item-hover-color: rgba(255, 255, 255, 0.85);--nv-subnav-item-hover-bg: rgba(0, 0, 0, 0.4);--nv-subnav-item-active-color: #fff;--nv-subnav-item-active-bg: var(--nv-primary-color);--nv-subnav-zindex: 50;--nv-icon-height: 1.5rem;--nv-toggle-padding: 0.125rem 0.5rem;--nv-base-radius: 0.25rem;--nv-expanded-bg: rgba(255, 255, 255, 0.075);--nv-subnav-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.25), 1px 1px 0 0 rgba(0, 0, 0, 0.15) inset}.navbar{display:flex;flex-flow:row wrap;justify-content:space-between;padding:var(--nv-padding-y) var(--nv-padding-x);font-size:var(--nv-font-size);line-height:var(--nv-line-height)}.navbar>div{display:none;flex-basis:100%;flex-direction:column;flex-grow:1}.navbar.open-mobile>div{display:flex}.navbar .nav{flex-direction:column}.navbar .brand{display:flex;align-items:center;padding:var(--nv-brand-padding);font-size:var(--nv-brand-font-size);line-height:var(--nv-brand-line-height);text-decoration:none;white-space:nowrap}@media(min-width: 768px){.navbar{position:relative;flex-flow:row nowrap;align-items:center;justify-content:flex-start}.navbar>div{display:flex;flex-basis:auto;flex-direction:row;align-items:center;justify-content:space-between}.navbar .nav{flex-direction:row}}.navbar-content a:not([class]),.navbar-content b,.subnav-content a:not([class]),.subnav-content b{color:var(--nv-link-color)}@media(min-width: 768px){.navbar-content a:not([class]):hover{color:var(--nv-link-color-hover)}}.navbar{color:var(--nv-text-color);background-color:var(--nv-bg)}.navbar .brand{color:var(--nv-brand-link-color)}.nav li>a,.nav li>span,.navbar-content,.subnav-content{padding:var(--nv-item-padding-y) var(--nv-item-padding-x);margin:var(--nv-item-margin)}.nav>li,.row>li,.subnav>li,.subnav-toggle+ul>li,.subnav-toggle+div>li,.nav li>span,.nav li>a{display:flex;flex-flow:row wrap;align-items:center;justify-content:space-between}.nav{display:flex}.nav,.nav ul{padding:0;margin:0;list-style:none}.nav li{transition:margin .3s ease 0s}.nav li>span,.nav li>a{flex-wrap:nowrap;overflow:hidden;font-size:var(--nv-item-font-size);line-height:var(--nv-item-line-height)}.nav li>a{text-decoration:none}.nav li>span>span,.nav li>a>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.subnav-toggle,.navbar-toggle{display:flex;align-items:center;align-self:center;padding:var(--nv-toggle-padding);margin:auto var(--nv-item-padding-x);border:1px solid rgba(0,0,0,0);border-radius:var(--nv-base-radius)}li.open-mobile>.subnav-toggle+ul,li.open-mobile>.subnav-toggle+div,li.open-mobile>.subnav{display:block}.open-mobile+.open-mobile{margin-top:var(--nv-item-padding-y)}.parent-icon,.subnav-toggle+ul,.subnav-toggle+div,.subnav{display:none}.subnav-content p,.subnav-content ul{margin-bottom:var(--nv-item-padding-y)}ul.subnav,div.subnav ul{flex-basis:100%;flex-direction:column;flex-grow:1;padding:0 0 0 var(--nv-item-padding-x)}div.subnav{flex-basis:100%}.menu-icon,.parent-icon{width:var(--nv-icon-height);height:var(--nv-icon-height);line-height:var(--nv-icon-height);text-align:center;fill:currentcolor}.menu-icon{font-size:calc(var(--nv-icon-height)*.94)}.menu-icon+span{flex:auto;margin-left:calc(var(--nv-item-padding-x)/2)}@media(min-width: 768px){.row>li{align-content:flex-start}nav li:not(.full-width),.nav li:not(.full-width){position:relative}.parent-icon,.subnav-toggle+ul,.subnav-toggle+div{display:flex}ul.subnav>li,div.subnav>ul>li{display:none}.open-position>ul.subnav>li,.open-position>div.subnav>ul>li{display:flex}.subnav-toggle,.navbar-toggle{display:none}.subnav{position:absolute;display:block;font-size:var(--nv-subnav-font-size, 14px);line-height:var(--nv-subnav-line-height, 1.5rem);opacity:0}.subnav li>span,.subnav li>a{flex-basis:100%;font-size:var(--nv-subnav-item-font-size, inherit);line-height:var(--nv-subnav-item-line-height, inherit)}div.subnav ul{padding:0}ul.subnav,div.subnav,.subnav .subnav{padding:var(--nv-subnav-padding-y) var(--nv-subnav-padding-x)}.subnav-content,ul.subnav{flex-direction:column}li.open-mobile{background:none;transition:none}li.open-mobile+.open-mobile{margin:0}.column-title,div.subnav>ul>li>span{font-size:120%}.subnav li>a,.subnav li>span,.subnav-content{padding:var(--nv-subnav-item-padding-y) var(--nv-subnav-item-padding-x);margin:var(--nv-subnav-item-margin)}.nav>li>.subnav{margin-top:var(--nv-padding-y)}.subnav .subnav{margin-top:calc(var(--nv-subnav-padding-y)*-1);margin-left:var(--nv-subnav-padding-x)}ul.subnav{width:var(--nv-subnav-width)}div.subnav{min-width:var(--nv-subnav-larger-width)}div.subnav>ul{flex-direction:row;padding:0;margin:0}div.subnav.m1{min-width:calc(var(--nv-subnav-width) + var(--nv-subnav-padding-x)*2)}div.subnav.m2{min-width:calc(var(--nv-subnav-width)*2 + var(--nv-subnav-padding-x)*2)}div.subnav.m3{min-width:calc(var(--nv-subnav-width)*3 + var(--nv-subnav-padding-x)*2)}div.subnav.m4{min-width:calc(var(--nv-subnav-width)*4 + var(--nv-subnav-padding-x)*2)}}.nav li>a,.nav li>span{color:var(--nv-item-color)}.nav li.open-mobile{background-color:var(--nv-expanded-bg)}@media(min-width: 768px){.nav>li>span,.nav>li>a{background-color:var(--nv-item-bg)}.nav>li.open>span,.nav>li.open>a,.nav>li:hover>span,.nav>li:hover>a{color:var(--nv-item-hover-color);background-color:var(--nv-item-hover-bg)}.nav>li.active>span,.nav>li.active>a,.nav>li.active.open>span,.nav>li.active.open>a,.nav>li.active:hover>span,.nav>li.active:hover>a{color:var(--nv-item-active-color);background-color:var(--nv-item-active-bg)}}.subnav-toggle,.navbar-toggle{color:currentcolor;background-color:rgba(0,0,0,0)}.subnav-toggle:focus,.navbar-toggle:focus{color:var(--nv-bg);background-color:var(--nv-link-color);outline:none}.open-mobile>.subnav-toggle:not(:focus),.open-mobile>.navbar-toggle:not(:focus){color:var(--nv-item-color);border-color:var(--nv-item-color)}@media(min-width: 768px){.subnav{background-color:var(--nv-subnav-bg);box-shadow:var(--nv-subnav-shadow)}.subnav li>span,.subnav li>a{color:var(--nv-subnav-item-color);background-color:var(--nv-subnav-item-bg)}.subnav li>div{background-color:var(--nv-subnav-item-bg)}.subnav li.open>a,.subnav li:hover>a{color:var(--nv-subnav-item-hover-color);background-color:var(--nv-subnav-item-hover-bg)}.subnav li.active>span,.subnav li.active>a,.subnav li.active:hover>span,.subnav li.active:hover>a{color:var(--nv-subnav-item-active-color);background-color:var(--nv-subnav-item-active-bg)}.column-title,div.subnav>ul>li>span{color:var(--nv-subnav-item-color)}div.subnav li>ul>li.open>span,div.subnav li>ul>li:hover>span,ul.subnav>li.open>span,ul.subnav>li:hover>span{color:var(--nv-subnav-item-hover-color);background-color:var(--nv-subnav-item-hover-bg)}div.subnav{color:var(--nv-subnav-text-color)}.subnav-content a:not([class]),.subnav-content b{color:var(--nv-subnav-link-color)}.subnav-content a:not([class]):hover{color:var(--nv-subnav-link-color-hover)}}@media(min-width: 768px){.nav li>.subnav{top:-99999em;left:-99999em;transition:transform .5s ease,opacity .4s linear;transform:translate(0, -10px)}.nav li li>.subnav{transform:translate(-10px)}.nav li li.open-position>.subnav{top:0;left:100%}.nav li.open-position>.subnav{top:100%;left:0;z-index:var(--nv-subnav-zindex)}.nav li.open>.subnav{opacity:1;transform:translate(0)}}/*# sourceMappingURL=navbar.min.css.map */ 2 | -------------------------------------------------------------------------------- /docs/src/css/navbar.min.css: -------------------------------------------------------------------------------- 1 | :root{--nv-padding-x: 0rem;--nv-padding-y: 0rem;--nv-line-height: 1.5rem;--nv-font-size: 14px;--nv-primary-color: #069;--nv-bg: #687c86;--nv-text-color: rgba(255, 255, 255, 0.55);--nv-link-color: rgba(255, 255, 255, 0.75);--nv-link-color-hover: rgba(255, 255, 255, 0.95);--nv-subnav-bg: #dadee0;--nv-subnav-text-color: rgba(0, 0, 0, 0.55);--nv-subnav-link-color: rgba(0, 0, 0, 0.75);--nv-subnav-link-color-hover: rgba(0, 0, 0, 0.95);--nv-item-font-size: 14px;--nv-item-line-height: 1.5rem;--nv-item-padding-y: 0.5rem;--nv-item-padding-x: 1rem;--nv-item-margin: 0;--nv-subnav-item-font-size: inherit;--nv-subnav-item-line-height: inherit;--nv-subnav-item-padding-x: var(--nv-item-padding-x);--nv-subnav-item-padding-y: var(--nv-item-padding-y);--nv-subnav-item-margin: 0;--nv-brand-font-size: 18px;--nv-brand-line-height: inherit;--nv-brand-padding: var(--nv-item-padding-y) var(--nv-item-padding-x);--nv-brand-link-color: rgba(255, 255, 255, 0.95);--nv-subnav-padding-x: 0rem;--nv-subnav-padding-y: 0rem;--nv-subnav-line-height: inherit;--nv-subnav-font-size: inherit;--nv-subnav-width: 200px;--nv-subnav-larger-width: calc(var(--nv-subnav-width) * 3 + var(--nv-subnav-padding-x) * 2);--nv-item-color: rgba(255, 255, 255, 0.65);--nv-item-bg: transparent;--nv-item-hover-color: rgba(255, 255, 255, 0.85);--nv-item-hover-bg: rgba(0, 0, 0, 0.35);--nv-item-active-color: #fff;--nv-item-active-bg: var(--nv-primary-color);--nv-subnav-item-color: rgba(0, 0, 0, 0.65);--nv-subnav-item-bg: transparent;--nv-subnav-item-hover-color: rgba(255, 255, 255, 0.85);--nv-subnav-item-hover-bg: rgba(0, 0, 0, 0.4);--nv-subnav-item-active-color: #fff;--nv-subnav-item-active-bg: var(--nv-primary-color);--nv-subnav-zindex: 50;--nv-icon-height: 1.5rem;--nv-toggle-padding: 0.125rem 0.5rem;--nv-base-radius: 0.25rem;--nv-expanded-bg: rgba(255, 255, 255, 0.075);--nv-subnav-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.25), 1px 1px 0 0 rgba(0, 0, 0, 0.15) inset}.navbar{display:flex;flex-flow:row wrap;justify-content:space-between;padding:var(--nv-padding-y) var(--nv-padding-x);font-size:var(--nv-font-size);line-height:var(--nv-line-height)}.navbar>div{display:none;flex-basis:100%;flex-direction:column;flex-grow:1}.navbar.open-mobile>div{display:flex}.navbar .nav{flex-direction:column}.navbar .brand{display:flex;align-items:center;padding:var(--nv-brand-padding);font-size:var(--nv-brand-font-size);line-height:var(--nv-brand-line-height);text-decoration:none;white-space:nowrap}@media(min-width: 768px){.navbar{position:relative;flex-flow:row nowrap;align-items:center;justify-content:flex-start}.navbar>div{display:flex;flex-basis:auto;flex-direction:row;align-items:center;justify-content:space-between}.navbar .nav{flex-direction:row}}.navbar-content a:not([class]),.navbar-content b,.subnav-content a:not([class]),.subnav-content b{color:var(--nv-link-color)}@media(min-width: 768px){.navbar-content a:not([class]):hover{color:var(--nv-link-color-hover)}}.navbar{color:var(--nv-text-color);background-color:var(--nv-bg)}.navbar .brand{color:var(--nv-brand-link-color)}.nav li>a,.nav li>span,.navbar-content,.subnav-content{padding:var(--nv-item-padding-y) var(--nv-item-padding-x);margin:var(--nv-item-margin)}.nav>li,.row>li,.subnav>li,.subnav-toggle+ul>li,.subnav-toggle+div>li,.nav li>span,.nav li>a{display:flex;flex-flow:row wrap;align-items:center;justify-content:space-between}.nav{display:flex}.nav,.nav ul{padding:0;margin:0;list-style:none}.nav li{transition:margin .3s ease 0s}.nav li>span,.nav li>a{flex-wrap:nowrap;overflow:hidden;font-size:var(--nv-item-font-size);line-height:var(--nv-item-line-height)}.nav li>a{text-decoration:none}.nav li>span>span,.nav li>a>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.subnav-toggle,.navbar-toggle{display:flex;align-items:center;align-self:center;padding:var(--nv-toggle-padding);margin:auto var(--nv-item-padding-x);border:1px solid rgba(0,0,0,0);border-radius:var(--nv-base-radius)}li.open-mobile>.subnav-toggle+ul,li.open-mobile>.subnav-toggle+div,li.open-mobile>.subnav{display:block}.open-mobile+.open-mobile{margin-top:var(--nv-item-padding-y)}.parent-icon,.subnav-toggle+ul,.subnav-toggle+div,.subnav{display:none}.subnav-content p,.subnav-content ul{margin-bottom:var(--nv-item-padding-y)}ul.subnav,div.subnav ul{flex-basis:100%;flex-direction:column;flex-grow:1;padding:0 0 0 var(--nv-item-padding-x)}div.subnav{flex-basis:100%}.menu-icon,.parent-icon{width:var(--nv-icon-height);height:var(--nv-icon-height);line-height:var(--nv-icon-height);text-align:center;fill:currentcolor}.menu-icon{font-size:calc(var(--nv-icon-height)*.94)}.menu-icon+span{flex:auto;margin-left:calc(var(--nv-item-padding-x)/2)}@media(min-width: 768px){.row>li{align-content:flex-start}nav li:not(.full-width),.nav li:not(.full-width){position:relative}.parent-icon,.subnav-toggle+ul,.subnav-toggle+div{display:flex}ul.subnav>li,div.subnav>ul>li{display:none}.open-position>ul.subnav>li,.open-position>div.subnav>ul>li{display:flex}.subnav-toggle,.navbar-toggle{display:none}.subnav{position:absolute;display:block;font-size:var(--nv-subnav-font-size, 14px);line-height:var(--nv-subnav-line-height, 1.5rem);opacity:0}.subnav li>span,.subnav li>a{flex-basis:100%;font-size:var(--nv-subnav-item-font-size, inherit);line-height:var(--nv-subnav-item-line-height, inherit)}div.subnav ul{padding:0}ul.subnav,div.subnav,.subnav .subnav{padding:var(--nv-subnav-padding-y) var(--nv-subnav-padding-x)}.subnav-content,ul.subnav{flex-direction:column}li.open-mobile{background:none;transition:none}li.open-mobile+.open-mobile{margin:0}.column-title,div.subnav>ul>li>span{font-size:120%}.subnav li>a,.subnav li>span,.subnav-content{padding:var(--nv-subnav-item-padding-y) var(--nv-subnav-item-padding-x);margin:var(--nv-subnav-item-margin)}.nav>li>.subnav{margin-top:var(--nv-padding-y)}.subnav .subnav{margin-top:calc(var(--nv-subnav-padding-y)*-1);margin-left:var(--nv-subnav-padding-x)}ul.subnav{width:var(--nv-subnav-width)}div.subnav{min-width:var(--nv-subnav-larger-width)}div.subnav>ul{flex-direction:row;padding:0;margin:0}div.subnav.m1{min-width:calc(var(--nv-subnav-width) + var(--nv-subnav-padding-x)*2)}div.subnav.m2{min-width:calc(var(--nv-subnav-width)*2 + var(--nv-subnav-padding-x)*2)}div.subnav.m3{min-width:calc(var(--nv-subnav-width)*3 + var(--nv-subnav-padding-x)*2)}div.subnav.m4{min-width:calc(var(--nv-subnav-width)*4 + var(--nv-subnav-padding-x)*2)}}.nav li>a,.nav li>span{color:var(--nv-item-color)}.nav li.open-mobile{background-color:var(--nv-expanded-bg)}@media(min-width: 768px){.nav>li>span,.nav>li>a{background-color:var(--nv-item-bg)}.nav>li.open>span,.nav>li.open>a,.nav>li:hover>span,.nav>li:hover>a{color:var(--nv-item-hover-color);background-color:var(--nv-item-hover-bg)}.nav>li.active>span,.nav>li.active>a,.nav>li.active.open>span,.nav>li.active.open>a,.nav>li.active:hover>span,.nav>li.active:hover>a{color:var(--nv-item-active-color);background-color:var(--nv-item-active-bg)}}.subnav-toggle,.navbar-toggle{color:currentcolor;background-color:rgba(0,0,0,0)}.subnav-toggle:focus,.navbar-toggle:focus{color:var(--nv-bg);background-color:var(--nv-link-color);outline:none}.open-mobile>.subnav-toggle:not(:focus),.open-mobile>.navbar-toggle:not(:focus){color:var(--nv-item-color);border-color:var(--nv-item-color)}@media(min-width: 768px){.subnav{background-color:var(--nv-subnav-bg);box-shadow:var(--nv-subnav-shadow)}.subnav li>span,.subnav li>a{color:var(--nv-subnav-item-color);background-color:var(--nv-subnav-item-bg)}.subnav li>div{background-color:var(--nv-subnav-item-bg)}.subnav li.open>a,.subnav li:hover>a{color:var(--nv-subnav-item-hover-color);background-color:var(--nv-subnav-item-hover-bg)}.subnav li.active>span,.subnav li.active>a,.subnav li.active:hover>span,.subnav li.active:hover>a{color:var(--nv-subnav-item-active-color);background-color:var(--nv-subnav-item-active-bg)}.column-title,div.subnav>ul>li>span{color:var(--nv-subnav-item-color)}div.subnav li>ul>li.open>span,div.subnav li>ul>li:hover>span,ul.subnav>li.open>span,ul.subnav>li:hover>span{color:var(--nv-subnav-item-hover-color);background-color:var(--nv-subnav-item-hover-bg)}div.subnav{color:var(--nv-subnav-text-color)}.subnav-content a:not([class]),.subnav-content b{color:var(--nv-subnav-link-color)}.subnav-content a:not([class]):hover{color:var(--nv-subnav-link-color-hover)}}@media(min-width: 768px){.nav li>.subnav{top:-99999em;left:-99999em;transition:transform .5s ease,opacity .4s linear;transform:translate(0, -10px)}.nav li li>.subnav{transform:translate(-10px)}.nav li li.open-position>.subnav{top:0;left:100%}.nav li.open-position>.subnav{top:100%;left:0;z-index:var(--nv-subnav-zindex)}.nav li.open>.subnav{opacity:1;transform:translate(0)}}/*# sourceMappingURL=navbar.min.css.map */ 2 | -------------------------------------------------------------------------------- /docs/src/css/navbar-bootstrap-extended.min.css: -------------------------------------------------------------------------------- 1 | :root{--nv-padding-x: 0rem;--nv-padding-y: 0rem;--nv-line-height: 1.5rem;--nv-font-size: 14px;--nv-primary-color: #069;--nv-bg: #687c86;--nv-text-color: rgba(255, 255, 255, 0.55);--nv-link-color: rgba(255, 255, 255, 0.75);--nv-link-color-hover: rgba(255, 255, 255, 0.95);--nv-subnav-bg: #dadee0;--nv-subnav-text-color: rgba(0, 0, 0, 0.55);--nv-subnav-link-color: rgba(0, 0, 0, 0.75);--nv-subnav-link-color-hover: rgba(0, 0, 0, 0.95);--nv-item-font-size: 14px;--nv-item-line-height: 1.5rem;--nv-item-padding-y: 0.5rem;--nv-item-padding-x: 1rem;--nv-item-margin: 0;--nv-subnav-item-font-size: inherit;--nv-subnav-item-line-height: inherit;--nv-subnav-item-padding-x: var(--nv-item-padding-x);--nv-subnav-item-padding-y: var(--nv-item-padding-y);--nv-subnav-item-margin: 0;--nv-brand-font-size: 18px;--nv-brand-line-height: inherit;--nv-brand-padding: var(--nv-item-padding-y) var(--nv-item-padding-x);--nv-brand-link-color: rgba(255, 255, 255, 0.95);--nv-subnav-padding-x: 0rem;--nv-subnav-padding-y: 0rem;--nv-subnav-line-height: inherit;--nv-subnav-font-size: inherit;--nv-subnav-width: 200px;--nv-subnav-larger-width: calc(var(--nv-subnav-width) * 3 + var(--nv-subnav-padding-x) * 2);--nv-item-color: rgba(255, 255, 255, 0.65);--nv-item-bg: transparent;--nv-item-hover-color: rgba(255, 255, 255, 0.85);--nv-item-hover-bg: rgba(0, 0, 0, 0.35);--nv-item-active-color: #fff;--nv-item-active-bg: var(--nv-primary-color);--nv-subnav-item-color: rgba(0, 0, 0, 0.65);--nv-subnav-item-bg: transparent;--nv-subnav-item-hover-color: rgba(255, 255, 255, 0.85);--nv-subnav-item-hover-bg: rgba(0, 0, 0, 0.4);--nv-subnav-item-active-color: #fff;--nv-subnav-item-active-bg: var(--nv-primary-color);--nv-subnav-zindex: 50;--nv-icon-height: 1.5rem;--nv-toggle-padding: 0.125rem 0.5rem;--nv-base-radius: 0.25rem;--nv-expanded-bg: rgba(255, 255, 255, 0.075);--nv-subnav-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.25), 1px 1px 0 0 rgba(0, 0, 0, 0.15) inset}.navbar{display:flex;flex-flow:row wrap;justify-content:space-between;padding:var(--nv-padding-y) var(--nv-padding-x);font-size:var(--nv-font-size);line-height:var(--nv-line-height)}.navbar>div{display:none;flex-basis:100%;flex-direction:column;flex-grow:1}.navbar.open-mobile>div{display:flex}.navbar .nav{flex-direction:column}.navbar .brand{display:flex;align-items:center;padding:var(--nv-brand-padding);font-size:var(--nv-brand-font-size);line-height:var(--nv-brand-line-height);text-decoration:none;white-space:nowrap}@media(min-width: 768px){.navbar{position:relative;flex-flow:row nowrap;align-items:center;justify-content:flex-start}.navbar>div{display:flex;flex-basis:auto;flex-direction:row;align-items:center;justify-content:space-between}.navbar .nav{flex-direction:row}}.navbar-content a:not([class]),.navbar-content b,.subnav-content a:not([class]),.subnav-content b{color:var(--nv-link-color)}@media(min-width: 768px){.navbar-content a:not([class]):hover{color:var(--nv-link-color-hover)}}.navbar{color:var(--nv-text-color);background-color:var(--nv-bg)}.navbar .brand{color:var(--nv-brand-link-color)}.nav li>a,.nav li>span,.navbar-content,.subnav-content{padding:var(--nv-item-padding-y) var(--nv-item-padding-x);margin:var(--nv-item-margin)}.nav>li,.row>li,.subnav>li,.subnav-toggle+ul>li,.subnav-toggle+div>li,.nav li>span,.nav li>a{display:flex;flex-flow:row wrap;align-items:center;justify-content:space-between}.nav{display:flex}.nav,.nav ul{padding:0;margin:0;list-style:none}.nav li{transition:margin .3s ease 0s}.nav li>span,.nav li>a{flex-wrap:nowrap;overflow:hidden;font-size:var(--nv-item-font-size);line-height:var(--nv-item-line-height)}.nav li>a{text-decoration:none}.nav li>span>span,.nav li>a>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.subnav-toggle,.navbar-toggle{display:flex;align-items:center;align-self:center;padding:var(--nv-toggle-padding);margin:auto var(--nv-item-padding-x);border:1px solid rgba(0,0,0,0);border-radius:var(--nv-base-radius)}li.open-mobile>.subnav-toggle+ul,li.open-mobile>.subnav-toggle+div,li.open-mobile>.subnav{display:block}.open-mobile+.open-mobile{margin-top:var(--nv-item-padding-y)}.parent-icon,.subnav-toggle+ul,.subnav-toggle+div,.subnav{display:none}.subnav-content p,.subnav-content ul{margin-bottom:var(--nv-item-padding-y)}ul.subnav,div.subnav ul{flex-basis:100%;flex-direction:column;flex-grow:1;padding:0 0 0 var(--nv-item-padding-x)}div.subnav{flex-basis:100%}.menu-icon,.parent-icon{width:var(--nv-icon-height);height:var(--nv-icon-height);line-height:var(--nv-icon-height);text-align:center;fill:currentcolor}.menu-icon{font-size:calc(var(--nv-icon-height)*.94)}.menu-icon+span{flex:auto;margin-left:calc(var(--nv-item-padding-x)/2)}@media(min-width: 768px){.row>li{align-content:flex-start}nav li:not(.full-width),.nav li:not(.full-width){position:relative}.parent-icon,.subnav-toggle+ul,.subnav-toggle+div{display:flex}ul.subnav>li,div.subnav>ul>li{display:none}.open-position>ul.subnav>li,.open-position>div.subnav>ul>li{display:flex}.subnav-toggle,.navbar-toggle{display:none}.subnav{position:absolute;display:block;font-size:var(--nv-subnav-font-size, 14px);line-height:var(--nv-subnav-line-height, 1.5rem);opacity:0}.subnav li>span,.subnav li>a{flex-basis:100%;font-size:var(--nv-subnav-item-font-size, inherit);line-height:var(--nv-subnav-item-line-height, inherit)}div.subnav ul{padding:0}ul.subnav,div.subnav,.subnav .subnav{padding:var(--nv-subnav-padding-y) var(--nv-subnav-padding-x)}.subnav-content,ul.subnav{flex-direction:column}li.open-mobile{background:none;transition:none}li.open-mobile+.open-mobile{margin:0}.column-title,div.subnav>ul>li>span{font-size:120%}.subnav li>a,.subnav li>span,.subnav-content{padding:var(--nv-subnav-item-padding-y) var(--nv-subnav-item-padding-x);margin:var(--nv-subnav-item-margin)}.nav>li>.subnav{margin-top:var(--nv-padding-y)}.subnav .subnav{margin-top:calc(var(--nv-subnav-padding-y)*-1);margin-left:var(--nv-subnav-padding-x)}ul.subnav{width:var(--nv-subnav-width)}div.subnav{min-width:var(--nv-subnav-larger-width)}div.subnav>ul{flex-direction:row;padding:0;margin:0}div.subnav.m1{min-width:calc(var(--nv-subnav-width) + var(--nv-subnav-padding-x)*2)}div.subnav.m2{min-width:calc(var(--nv-subnav-width)*2 + var(--nv-subnav-padding-x)*2)}div.subnav.m3{min-width:calc(var(--nv-subnav-width)*3 + var(--nv-subnav-padding-x)*2)}div.subnav.m4{min-width:calc(var(--nv-subnav-width)*4 + var(--nv-subnav-padding-x)*2)}}.nav li>a,.nav li>span{color:var(--nv-item-color)}.nav li.open-mobile{background-color:var(--nv-expanded-bg)}@media(min-width: 768px){.nav>li>span,.nav>li>a{background-color:var(--nv-item-bg)}.nav>li.open>span,.nav>li.open>a,.nav>li:hover>span,.nav>li:hover>a{color:var(--nv-item-hover-color);background-color:var(--nv-item-hover-bg)}.nav>li.active>span,.nav>li.active>a,.nav>li.active.open>span,.nav>li.active.open>a,.nav>li.active:hover>span,.nav>li.active:hover>a{color:var(--nv-item-active-color);background-color:var(--nv-item-active-bg)}}.subnav-toggle,.navbar-toggle{color:currentcolor;background-color:rgba(0,0,0,0)}.subnav-toggle:focus,.navbar-toggle:focus{color:var(--nv-bg);background-color:var(--nv-link-color);outline:none}.open-mobile>.subnav-toggle:not(:focus),.open-mobile>.navbar-toggle:not(:focus){color:var(--nv-item-color);border-color:var(--nv-item-color)}@media(min-width: 768px){.subnav{background-color:var(--nv-subnav-bg);box-shadow:var(--nv-subnav-shadow)}.subnav li>span,.subnav li>a{color:var(--nv-subnav-item-color);background-color:var(--nv-subnav-item-bg)}.subnav li>div{background-color:var(--nv-subnav-item-bg)}.subnav li.open>a,.subnav li:hover>a{color:var(--nv-subnav-item-hover-color);background-color:var(--nv-subnav-item-hover-bg)}.subnav li.active>span,.subnav li.active>a,.subnav li.active:hover>span,.subnav li.active:hover>a{color:var(--nv-subnav-item-active-color);background-color:var(--nv-subnav-item-active-bg)}.column-title,div.subnav>ul>li>span{color:var(--nv-subnav-item-color)}div.subnav li>ul>li.open>span,div.subnav li>ul>li:hover>span,ul.subnav>li.open>span,ul.subnav>li:hover>span{color:var(--nv-subnav-item-hover-color);background-color:var(--nv-subnav-item-hover-bg)}div.subnav{color:var(--nv-subnav-text-color)}.subnav-content a:not([class]),.subnav-content b{color:var(--nv-subnav-link-color)}.subnav-content a:not([class]):hover{color:var(--nv-subnav-link-color-hover)}}@media(min-width: 768px){.nav li>.subnav{top:-99999em;left:-99999em;transition:transform .5s ease,opacity .4s linear;transform:translate(0, -10px)}.nav li li>.subnav{transform:translate(-10px)}.nav li li.open-position>.subnav{top:0;left:100%}.nav li.open-position>.subnav{top:100%;left:0;z-index:var(--nv-subnav-zindex)}.nav li.open>.subnav{opacity:1;transform:translate(0)}}/*# sourceMappingURL=navbar-bootstrap-extended.min.css.map */ 2 | -------------------------------------------------------------------------------- /docs/src/css/navbar-right.min.css: -------------------------------------------------------------------------------- 1 | :root{--nv-padding-x: 0rem;--nv-padding-y: 0rem;--nv-line-height: 1.5rem;--nv-font-size: 14px;--nv-primary-color: #069;--nv-bg: #687c86;--nv-text-color: rgba(255, 255, 255, 0.55);--nv-link-color: rgba(255, 255, 255, 0.75);--nv-link-color-hover: rgba(255, 255, 255, 0.95);--nv-subnav-bg: #dadee0;--nv-subnav-text-color: rgba(0, 0, 0, 0.55);--nv-subnav-link-color: rgba(0, 0, 0, 0.75);--nv-subnav-link-color-hover: rgba(0, 0, 0, 0.95);--nv-item-font-size: 14px;--nv-item-line-height: 1.5rem;--nv-item-padding-y: 0.5rem;--nv-item-padding-x: 1rem;--nv-item-margin: 0;--nv-subnav-item-font-size: inherit;--nv-subnav-item-line-height: inherit;--nv-subnav-item-padding-x: var(--nv-item-padding-x);--nv-subnav-item-padding-y: var(--nv-item-padding-y);--nv-subnav-item-margin: 0;--nv-brand-font-size: 18px;--nv-brand-line-height: inherit;--nv-brand-padding: var(--nv-item-padding-y) var(--nv-item-padding-x);--nv-brand-link-color: rgba(255, 255, 255, 0.95);--nv-subnav-padding-x: 0rem;--nv-subnav-padding-y: 0rem;--nv-subnav-line-height: inherit;--nv-subnav-font-size: inherit;--nv-subnav-width: 200px;--nv-subnav-larger-width: calc(var(--nv-subnav-width) * 3 + var(--nv-subnav-padding-x) * 2);--nv-item-color: rgba(255, 255, 255, 0.65);--nv-item-bg: transparent;--nv-item-hover-color: rgba(255, 255, 255, 0.85);--nv-item-hover-bg: rgba(0, 0, 0, 0.35);--nv-item-active-color: #fff;--nv-item-active-bg: var(--nv-primary-color);--nv-subnav-item-color: rgba(0, 0, 0, 0.65);--nv-subnav-item-bg: transparent;--nv-subnav-item-hover-color: rgba(255, 255, 255, 0.85);--nv-subnav-item-hover-bg: rgba(0, 0, 0, 0.4);--nv-subnav-item-active-color: #fff;--nv-subnav-item-active-bg: var(--nv-primary-color);--nv-subnav-zindex: 50;--nv-icon-height: 1.5rem;--nv-toggle-padding: 0.125rem 0.5rem;--nv-base-radius: 0.25rem;--nv-expanded-bg: rgba(255, 255, 255, 0.075);--nv-subnav-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.25), 1px 1px 0 0 rgba(0, 0, 0, 0.15) inset}.navbar{display:flex;flex-flow:row wrap;justify-content:space-between;padding:var(--nv-padding-y) var(--nv-padding-x);font-size:var(--nv-font-size);line-height:var(--nv-line-height)}.navbar>div{display:none;flex-basis:100%;flex-direction:column;flex-grow:1}.navbar.open-mobile>div{display:flex}.navbar .nav{flex-direction:column}.navbar .brand{display:flex;align-items:center;padding:var(--nv-brand-padding);font-size:var(--nv-brand-font-size);line-height:var(--nv-brand-line-height);text-decoration:none;white-space:nowrap}@media(min-width: 768px){.navbar{flex-flow:column nowrap;justify-content:flex-start;height:100%}.navbar>div{display:flex;flex-direction:column}.navbar .nav{flex-direction:column}}.navbar-content a:not([class]),.navbar-content b,.subnav-content a:not([class]),.subnav-content b{color:var(--nv-link-color)}@media(min-width: 768px){.navbar-content a:not([class]):hover{color:var(--nv-link-color-hover)}}.navbar{color:var(--nv-text-color);background-color:var(--nv-bg)}.navbar .brand{color:var(--nv-brand-link-color)}.nav li>a,.nav li>span,.navbar-content,.subnav-content{padding:var(--nv-item-padding-y) var(--nv-item-padding-x);margin:var(--nv-item-margin)}.nav>li,.row>li,.subnav>li,.subnav-toggle+ul>li,.subnav-toggle+div>li,.nav li>span,.nav li>a{display:flex;flex-flow:row wrap;align-items:center;justify-content:space-between}.nav{display:flex}.nav,.nav ul{padding:0;margin:0;list-style:none}.nav li{transition:margin .3s ease 0s}.nav li>span,.nav li>a{flex-wrap:nowrap;overflow:hidden;font-size:var(--nv-item-font-size);line-height:var(--nv-item-line-height)}.nav li>a{text-decoration:none}.nav li>span>span,.nav li>a>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.subnav-toggle,.navbar-toggle{display:flex;align-items:center;align-self:center;padding:var(--nv-toggle-padding);margin:auto var(--nv-item-padding-x);border:1px solid rgba(0,0,0,0);border-radius:var(--nv-base-radius)}li.open-mobile>.subnav-toggle+ul,li.open-mobile>.subnav-toggle+div,li.open-mobile>.subnav{display:block}.open-mobile+.open-mobile{margin-top:var(--nv-item-padding-y)}.parent-icon,.subnav-toggle+ul,.subnav-toggle+div,.subnav{display:none}.subnav-content p,.subnav-content ul{margin-bottom:var(--nv-item-padding-y)}ul.subnav,div.subnav ul{flex-basis:100%;flex-direction:column;flex-grow:1;padding:0 0 0 var(--nv-item-padding-x)}div.subnav{flex-basis:100%}.menu-icon,.parent-icon{width:var(--nv-icon-height);height:var(--nv-icon-height);line-height:var(--nv-icon-height);text-align:center;fill:currentcolor}.menu-icon{font-size:calc(var(--nv-icon-height)*.94)}.menu-icon+span{flex:auto;margin-left:calc(var(--nv-item-padding-x)/2)}@media(min-width: 768px){.row>li{align-content:flex-start}nav li:not(.full-width),.nav li:not(.full-width){position:relative}.parent-icon,.subnav-toggle+ul,.subnav-toggle+div{display:flex}ul.subnav>li,div.subnav>ul>li{display:none}.open-position>ul.subnav>li,.open-position>div.subnav>ul>li{display:flex}.subnav-toggle,.navbar-toggle{display:none}.subnav{position:absolute;display:block;font-size:var(--nv-subnav-font-size, 14px);line-height:var(--nv-subnav-line-height, 1.5rem);opacity:0}.subnav li>span,.subnav li>a{flex-basis:100%;font-size:var(--nv-subnav-item-font-size, inherit);line-height:var(--nv-subnav-item-line-height, inherit)}div.subnav ul{padding:0}ul.subnav,div.subnav,.subnav .subnav{padding:var(--nv-subnav-padding-y) var(--nv-subnav-padding-x)}.subnav-content,ul.subnav{flex-direction:column}li.open-mobile{background:none;transition:none}li.open-mobile+.open-mobile{margin:0}.column-title,div.subnav>ul>li>span{font-size:120%}.subnav li>a,.subnav li>span,.subnav-content{padding:var(--nv-subnav-item-padding-y) var(--nv-subnav-item-padding-x);margin:var(--nv-subnav-item-margin)}.nav>li>.subnav{margin-top:var(--nv-padding-y)}.subnav .subnav{margin-top:calc(var(--nv-subnav-padding-y)*-1);margin-left:var(--nv-subnav-padding-x)}ul.subnav{width:var(--nv-subnav-width)}div.subnav{min-width:var(--nv-subnav-larger-width)}div.subnav>ul{flex-direction:row;padding:0;margin:0}div.subnav.m1{min-width:calc(var(--nv-subnav-width) + var(--nv-subnav-padding-x)*2)}div.subnav.m2{min-width:calc(var(--nv-subnav-width)*2 + var(--nv-subnav-padding-x)*2)}div.subnav.m3{min-width:calc(var(--nv-subnav-width)*3 + var(--nv-subnav-padding-x)*2)}div.subnav.m4{min-width:calc(var(--nv-subnav-width)*4 + var(--nv-subnav-padding-x)*2)}}.nav li>a,.nav li>span{color:var(--nv-item-color)}.nav li.open-mobile{background-color:var(--nv-expanded-bg)}@media(min-width: 768px){.nav>li>span,.nav>li>a{background-color:var(--nv-item-bg)}.nav>li.open>span,.nav>li.open>a,.nav>li:hover>span,.nav>li:hover>a{color:var(--nv-item-hover-color);background-color:var(--nv-item-hover-bg)}.nav>li.active>span,.nav>li.active>a,.nav>li.active.open>span,.nav>li.active.open>a,.nav>li.active:hover>span,.nav>li.active:hover>a{color:var(--nv-item-active-color);background-color:var(--nv-item-active-bg)}}.subnav-toggle,.navbar-toggle{color:currentcolor;background-color:rgba(0,0,0,0)}.subnav-toggle:focus,.navbar-toggle:focus{color:var(--nv-bg);background-color:var(--nv-link-color);outline:none}.open-mobile>.subnav-toggle:not(:focus),.open-mobile>.navbar-toggle:not(:focus){color:var(--nv-item-color);border-color:var(--nv-item-color)}@media(min-width: 768px){.subnav{background-color:var(--nv-subnav-bg);box-shadow:var(--nv-subnav-shadow)}.subnav li>span,.subnav li>a{color:var(--nv-subnav-item-color);background-color:var(--nv-subnav-item-bg)}.subnav li>div{background-color:var(--nv-subnav-item-bg)}.subnav li.open>a,.subnav li:hover>a{color:var(--nv-subnav-item-hover-color);background-color:var(--nv-subnav-item-hover-bg)}.subnav li.active>span,.subnav li.active>a,.subnav li.active:hover>span,.subnav li.active:hover>a{color:var(--nv-subnav-item-active-color);background-color:var(--nv-subnav-item-active-bg)}.column-title,div.subnav>ul>li>span{color:var(--nv-subnav-item-color)}div.subnav li>ul>li.open>span,div.subnav li>ul>li:hover>span,ul.subnav>li.open>span,ul.subnav>li:hover>span{color:var(--nv-subnav-item-hover-color);background-color:var(--nv-subnav-item-hover-bg)}div.subnav{color:var(--nv-subnav-text-color)}.subnav-content a:not([class]),.subnav-content b{color:var(--nv-subnav-link-color)}.subnav-content a:not([class]):hover{color:var(--nv-subnav-link-color-hover)}}.nav{flex-direction:column}@media(min-width: 768px){.nav li>.subnav{top:-99999em;right:-99999em;left:auto;opacity:0;transition:transform .5s ease,opacity .4s linear;transform:translate(10px)}.nav li>a{flex-basis:100%}.nav li.open-position>.subnav{top:0;right:100%;z-index:var(--nv-subnav-zindex)}.nav li.open>.subnav{opacity:1;transform:translate(0)}.nav>li>.subnav{margin-top:0;margin-right:var(--nv-padding-x)}.nav .subnav .subnav{margin-right:var(--nv-subnav-padding-x);margin-left:0}}/*# sourceMappingURL=navbar-right.min.css.map */ 2 | -------------------------------------------------------------------------------- /docs/src/css/navbar-combo.min.css: -------------------------------------------------------------------------------- 1 | :root{--nv-padding-x: 0rem;--nv-padding-y: 0rem;--nv-line-height: 1.5rem;--nv-font-size: 14px;--nv-primary-color: #069;--nv-bg: #687c86;--nv-text-color: rgba(255, 255, 255, 0.55);--nv-link-color: rgba(255, 255, 255, 0.75);--nv-link-color-hover: rgba(255, 255, 255, 0.95);--nv-subnav-bg: #dadee0;--nv-subnav-text-color: rgba(0, 0, 0, 0.55);--nv-subnav-link-color: rgba(0, 0, 0, 0.75);--nv-subnav-link-color-hover: rgba(0, 0, 0, 0.95);--nv-item-font-size: 14px;--nv-item-line-height: 1.5rem;--nv-item-padding-y: 0.5rem;--nv-item-padding-x: 1rem;--nv-item-margin: 0;--nv-subnav-item-font-size: inherit;--nv-subnav-item-line-height: inherit;--nv-subnav-item-padding-x: var(--nv-item-padding-x);--nv-subnav-item-padding-y: var(--nv-item-padding-y);--nv-subnav-item-margin: 0;--nv-brand-font-size: 18px;--nv-brand-line-height: inherit;--nv-brand-padding: var(--nv-item-padding-y) var(--nv-item-padding-x);--nv-brand-link-color: rgba(255, 255, 255, 0.95);--nv-subnav-padding-x: 0rem;--nv-subnav-padding-y: 0rem;--nv-subnav-line-height: inherit;--nv-subnav-font-size: inherit;--nv-subnav-width: 200px;--nv-subnav-larger-width: calc(var(--nv-subnav-width) * 3 + var(--nv-subnav-padding-x) * 2);--nv-item-color: rgba(255, 255, 255, 0.65);--nv-item-bg: transparent;--nv-item-hover-color: rgba(255, 255, 255, 0.85);--nv-item-hover-bg: rgba(0, 0, 0, 0.35);--nv-item-active-color: #fff;--nv-item-active-bg: var(--nv-primary-color);--nv-subnav-item-color: rgba(0, 0, 0, 0.65);--nv-subnav-item-bg: transparent;--nv-subnav-item-hover-color: rgba(255, 255, 255, 0.85);--nv-subnav-item-hover-bg: rgba(0, 0, 0, 0.4);--nv-subnav-item-active-color: #fff;--nv-subnav-item-active-bg: var(--nv-primary-color);--nv-subnav-zindex: 50;--nv-icon-height: 1.5rem;--nv-toggle-padding: 0.125rem 0.5rem;--nv-base-radius: 0.25rem;--nv-expanded-bg: rgba(255, 255, 255, 0.075);--nv-subnav-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.25), 1px 1px 0 0 rgba(0, 0, 0, 0.15) inset}.navbar{display:flex;flex-flow:row wrap;justify-content:space-between;padding:var(--nv-padding-y) var(--nv-padding-x);font-size:var(--nv-font-size);line-height:var(--nv-line-height)}.navbar>div{display:none;flex-basis:100%;flex-direction:column;flex-grow:1}.navbar.open-mobile>div{display:flex}.navbar .nav{flex-direction:column}.navbar .brand{display:flex;align-items:center;padding:var(--nv-brand-padding);font-size:var(--nv-brand-font-size);line-height:var(--nv-brand-line-height);text-decoration:none;white-space:nowrap}@media(min-width: 768px){.navbar{position:relative;flex-flow:row nowrap;align-items:center;justify-content:flex-start}.navbar>div{display:flex;flex-basis:auto;flex-direction:row;align-items:center;justify-content:space-between}.navbar .nav{flex-direction:row}}.navbar-content a:not([class]),.navbar-content b,.subnav-content a:not([class]),.subnav-content b{color:var(--nv-link-color)}@media(min-width: 768px){.navbar-content a:not([class]):hover{color:var(--nv-link-color-hover)}}.navbar{color:var(--nv-text-color);background-color:var(--nv-bg)}.navbar .brand{color:var(--nv-brand-link-color)}.nav li>a,.nav li>span,.navbar-content,.subnav-content{padding:var(--nv-item-padding-y) var(--nv-item-padding-x);margin:var(--nv-item-margin)}.nav>li,.row>li,.subnav>li,.subnav-toggle+ul>li,.subnav-toggle+div>li,.nav li>span,.nav li>a{display:flex;flex-flow:row wrap;align-items:center;justify-content:space-between}.nav{display:flex}.nav,.nav ul{padding:0;margin:0;list-style:none}.nav li{transition:margin .3s ease 0s}.nav li>span,.nav li>a{flex-wrap:nowrap;overflow:hidden;font-size:var(--nv-item-font-size);line-height:var(--nv-item-line-height)}.nav li>a{text-decoration:none}.nav li>span>span,.nav li>a>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.subnav-toggle,.navbar-toggle{display:flex;align-items:center;align-self:center;padding:var(--nv-toggle-padding);margin:auto var(--nv-item-padding-x);border:1px solid rgba(0,0,0,0);border-radius:var(--nv-base-radius)}li.open-mobile>.subnav-toggle+ul,li.open-mobile>.subnav-toggle+div,li.open-mobile>.subnav{display:block}.open-mobile+.open-mobile{margin-top:var(--nv-item-padding-y)}.parent-icon,.subnav-toggle+ul,.subnav-toggle+div,.subnav{display:none}.subnav-content p,.subnav-content ul{margin-bottom:var(--nv-item-padding-y)}ul.subnav,div.subnav ul{flex-basis:100%;flex-direction:column;flex-grow:1;padding:0 0 0 var(--nv-item-padding-x)}div.subnav{flex-basis:100%}.menu-icon,.parent-icon{width:var(--nv-icon-height);height:var(--nv-icon-height);line-height:var(--nv-icon-height);text-align:center;fill:currentcolor}.menu-icon{font-size:calc(var(--nv-icon-height)*.94)}.menu-icon+span{flex:auto;margin-left:calc(var(--nv-item-padding-x)/2)}@media(min-width: 768px){.row>li{align-content:flex-start}nav li:not(.full-width),.nav li:not(.full-width){position:relative}.parent-icon,.subnav-toggle+ul,.subnav-toggle+div{display:flex}ul.subnav>li,div.subnav>ul>li{display:none}.open-position>ul.subnav>li,.open-position>div.subnav>ul>li{display:flex}.subnav-toggle,.navbar-toggle{display:none}.subnav{position:absolute;display:block;font-size:var(--nv-subnav-font-size, 14px);line-height:var(--nv-subnav-line-height, 1.5rem);opacity:0}.subnav li>span,.subnav li>a{flex-basis:100%;font-size:var(--nv-subnav-item-font-size, inherit);line-height:var(--nv-subnav-item-line-height, inherit)}div.subnav ul{padding:0}ul.subnav,div.subnav,.subnav .subnav{padding:var(--nv-subnav-padding-y) var(--nv-subnav-padding-x)}.subnav-content,ul.subnav{flex-direction:column}li.open-mobile{background:none;transition:none}li.open-mobile+.open-mobile{margin:0}.column-title,div.subnav>ul>li>span{font-size:120%}.subnav li>a,.subnav li>span,.subnav-content{padding:var(--nv-subnav-item-padding-y) var(--nv-subnav-item-padding-x);margin:var(--nv-subnav-item-margin)}.nav>li>.subnav{margin-top:var(--nv-padding-y)}.subnav .subnav{margin-top:calc(var(--nv-subnav-padding-y)*-1);margin-left:var(--nv-subnav-padding-x)}ul.subnav{width:var(--nv-subnav-width)}div.subnav{min-width:var(--nv-subnav-larger-width)}div.subnav>ul{flex-direction:row;padding:0;margin:0}div.subnav.m1{min-width:calc(var(--nv-subnav-width) + var(--nv-subnav-padding-x)*2)}div.subnav.m2{min-width:calc(var(--nv-subnav-width)*2 + var(--nv-subnav-padding-x)*2)}div.subnav.m3{min-width:calc(var(--nv-subnav-width)*3 + var(--nv-subnav-padding-x)*2)}div.subnav.m4{min-width:calc(var(--nv-subnav-width)*4 + var(--nv-subnav-padding-x)*2)}}.nav li>a,.nav li>span{color:var(--nv-item-color)}.nav li.open-mobile{background-color:var(--nv-expanded-bg)}@media(min-width: 768px){.nav>li>span,.nav>li>a{background-color:var(--nv-item-bg)}.nav>li.open>span,.nav>li.open>a,.nav>li:hover>span,.nav>li:hover>a{color:var(--nv-item-hover-color);background-color:var(--nv-item-hover-bg)}.nav>li.active>span,.nav>li.active>a,.nav>li.active.open>span,.nav>li.active.open>a,.nav>li.active:hover>span,.nav>li.active:hover>a{color:var(--nv-item-active-color);background-color:var(--nv-item-active-bg)}}.subnav-toggle,.navbar-toggle{color:currentcolor;background-color:rgba(0,0,0,0)}.subnav-toggle:focus,.navbar-toggle:focus{color:var(--nv-bg);background-color:var(--nv-link-color);outline:none}.open-mobile>.subnav-toggle:not(:focus),.open-mobile>.navbar-toggle:not(:focus){color:var(--nv-item-color);border-color:var(--nv-item-color)}@media(min-width: 768px){.subnav{background-color:var(--nv-subnav-bg);box-shadow:var(--nv-subnav-shadow)}.subnav li>span,.subnav li>a{color:var(--nv-subnav-item-color);background-color:var(--nv-subnav-item-bg)}.subnav li>div{background-color:var(--nv-subnav-item-bg)}.subnav li.open>a,.subnav li:hover>a{color:var(--nv-subnav-item-hover-color);background-color:var(--nv-subnav-item-hover-bg)}.subnav li.active>span,.subnav li.active>a,.subnav li.active:hover>span,.subnav li.active:hover>a{color:var(--nv-subnav-item-active-color);background-color:var(--nv-subnav-item-active-bg)}.column-title,div.subnav>ul>li>span{color:var(--nv-subnav-item-color)}div.subnav li>ul>li.open>span,div.subnav li>ul>li:hover>span,ul.subnav>li.open>span,ul.subnav>li:hover>span{color:var(--nv-subnav-item-hover-color);background-color:var(--nv-subnav-item-hover-bg)}div.subnav{color:var(--nv-subnav-text-color)}.subnav-content a:not([class]),.subnav-content b{color:var(--nv-subnav-link-color)}.subnav-content a:not([class]):hover{color:var(--nv-subnav-link-color-hover)}}@media(min-width: 768px){.navbar .nav li>.subnav{top:-99999em;left:-99999em;transition:transform .5s ease,opacity .4s linear;transform:translate(0, -10px)}.navbar .nav li li>.subnav{transform:translate(-10px)}.navbar .nav li li.open-position>.subnav{top:0;left:100%}.navbar .nav li.open-position>.subnav{top:100%;left:0;z-index:var(--nv-subnav-zindex)}.navbar .nav li.open>.subnav{opacity:1;transform:translate(0)}}.left.nav{flex-direction:column}@media(min-width: 768px){.left.nav li>.subnav{top:-99999em;left:-99999em;opacity:0;transition:transform .5s ease,opacity .4s linear;transform:translate(-10px)}.left.nav li>a{flex-basis:100%}.left.nav li.open-position>.subnav{top:0;left:100%;z-index:var(--nv-subnav-zindex)}.left.nav li.open>.subnav{opacity:1;transform:translate(0)}.left.nav>li>.subnav{margin-top:0;margin-left:var(--nv-padding-x)}}.right.nav{flex-direction:column}@media(min-width: 768px){.right.nav li>.subnav{top:-99999em;right:-99999em;left:auto;opacity:0;transition:transform .5s ease,opacity .4s linear;transform:translate(10px)}.right.nav li>a{flex-basis:100%}.right.nav li.open-position>.subnav{top:0;right:100%;z-index:var(--nv-subnav-zindex)}.right.nav li.open>.subnav{opacity:1;transform:translate(0)}.right.nav>li>.subnav{margin-top:0;margin-right:var(--nv-padding-x)}.right.nav .subnav .subnav{margin-right:var(--nv-subnav-padding-x);margin-left:0}}/*# sourceMappingURL=navbar-combo.min.css.map */ 2 | -------------------------------------------------------------------------------- /docs/src/css/navbar-combo-rtl.min.css: -------------------------------------------------------------------------------- 1 | :root{--nv-padding-x: 0rem;--nv-padding-y: 0rem;--nv-line-height: 1.5rem;--nv-font-size: 14px;--nv-primary-color: #069;--nv-bg: #687c86;--nv-text-color: rgba(255, 255, 255, 0.55);--nv-link-color: rgba(255, 255, 255, 0.75);--nv-link-color-hover: rgba(255, 255, 255, 0.95);--nv-subnav-bg: #dadee0;--nv-subnav-text-color: rgba(0, 0, 0, 0.55);--nv-subnav-link-color: rgba(0, 0, 0, 0.75);--nv-subnav-link-color-hover: rgba(0, 0, 0, 0.95);--nv-item-font-size: 14px;--nv-item-line-height: 1.5rem;--nv-item-padding-y: 0.5rem;--nv-item-padding-x: 1rem;--nv-item-margin: 0;--nv-subnav-item-font-size: inherit;--nv-subnav-item-line-height: inherit;--nv-subnav-item-padding-x: var(--nv-item-padding-x);--nv-subnav-item-padding-y: var(--nv-item-padding-y);--nv-subnav-item-margin: 0;--nv-brand-font-size: 18px;--nv-brand-line-height: inherit;--nv-brand-padding: var(--nv-item-padding-y) var(--nv-item-padding-x);--nv-brand-link-color: rgba(255, 255, 255, 0.95);--nv-subnav-padding-x: 0rem;--nv-subnav-padding-y: 0rem;--nv-subnav-line-height: inherit;--nv-subnav-font-size: inherit;--nv-subnav-width: 200px;--nv-subnav-larger-width: calc(var(--nv-subnav-width) * 3 + var(--nv-subnav-padding-x) * 2);--nv-item-color: rgba(255, 255, 255, 0.65);--nv-item-bg: transparent;--nv-item-hover-color: rgba(255, 255, 255, 0.85);--nv-item-hover-bg: rgba(0, 0, 0, 0.35);--nv-item-active-color: #fff;--nv-item-active-bg: var(--nv-primary-color);--nv-subnav-item-color: rgba(0, 0, 0, 0.65);--nv-subnav-item-bg: transparent;--nv-subnav-item-hover-color: rgba(255, 255, 255, 0.85);--nv-subnav-item-hover-bg: rgba(0, 0, 0, 0.4);--nv-subnav-item-active-color: #fff;--nv-subnav-item-active-bg: var(--nv-primary-color);--nv-subnav-zindex: 50;--nv-icon-height: 1.5rem;--nv-toggle-padding: 0.125rem 0.5rem;--nv-base-radius: 0.25rem;--nv-expanded-bg: rgba(255, 255, 255, 0.075);--nv-subnav-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.25), 1px 1px 0 0 rgba(0, 0, 0, 0.15) inset}.navbar{display:flex;flex-flow:row wrap;justify-content:space-between;padding:var(--nv-padding-y) var(--nv-padding-x);font-size:var(--nv-font-size);line-height:var(--nv-line-height)}.navbar>div{display:none;flex-basis:100%;flex-direction:column;flex-grow:1}.navbar.open-mobile>div{display:flex}.navbar .nav{flex-direction:column}.navbar .brand{display:flex;align-items:center;padding:var(--nv-brand-padding);font-size:var(--nv-brand-font-size);line-height:var(--nv-brand-line-height);text-decoration:none;white-space:nowrap}@media(min-width: 768px){.navbar{position:relative;flex-flow:row nowrap;align-items:center;justify-content:flex-start}.navbar>div{display:flex;flex-basis:auto;flex-direction:row;align-items:center;justify-content:space-between}.navbar .nav{flex-direction:row}}.navbar-content a:not([class]),.navbar-content b,.subnav-content a:not([class]),.subnav-content b{color:var(--nv-link-color)}@media(min-width: 768px){.navbar-content a:not([class]):hover{color:var(--nv-link-color-hover)}}.navbar{color:var(--nv-text-color);background-color:var(--nv-bg)}.navbar .brand{color:var(--nv-brand-link-color)}.nav li>a,.nav li>span,.navbar-content,.subnav-content{padding:var(--nv-item-padding-y) var(--nv-item-padding-x);margin:var(--nv-item-margin)}.nav>li,.row>li,.subnav>li,.subnav-toggle+ul>li,.subnav-toggle+div>li,.nav li>span,.nav li>a{display:flex;flex-flow:row wrap;align-items:center;justify-content:space-between}.nav{display:flex}.nav,.nav ul{padding:0;margin:0;list-style:none}.nav li{transition:margin .3s ease 0s}.nav li>span,.nav li>a{flex-wrap:nowrap;overflow:hidden;font-size:var(--nv-item-font-size);line-height:var(--nv-item-line-height)}.nav li>a{text-decoration:none}.nav li>span>span,.nav li>a>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.subnav-toggle,.navbar-toggle{display:flex;align-items:center;align-self:center;padding:var(--nv-toggle-padding);margin:auto var(--nv-item-padding-x);border:1px solid rgba(0,0,0,0);border-radius:var(--nv-base-radius)}li.open-mobile>.subnav-toggle+ul,li.open-mobile>.subnav-toggle+div,li.open-mobile>.subnav{display:block}.open-mobile+.open-mobile{margin-top:var(--nv-item-padding-y)}.parent-icon,.subnav-toggle+ul,.subnav-toggle+div,.subnav{display:none}.subnav-content p,.subnav-content ul{margin-bottom:var(--nv-item-padding-y)}ul.subnav,div.subnav ul{flex-basis:100%;flex-direction:column;flex-grow:1;padding:0 0 0 var(--nv-item-padding-x)}div.subnav{flex-basis:100%}.menu-icon,.parent-icon{width:var(--nv-icon-height);height:var(--nv-icon-height);line-height:var(--nv-icon-height);text-align:center;fill:currentcolor}.menu-icon{font-size:calc(var(--nv-icon-height)*.94)}.menu-icon+span{flex:auto;margin-left:calc(var(--nv-item-padding-x)/2)}@media(min-width: 768px){.row>li{align-content:flex-start}nav li:not(.full-width),.nav li:not(.full-width){position:relative}.parent-icon,.subnav-toggle+ul,.subnav-toggle+div{display:flex}ul.subnav>li,div.subnav>ul>li{display:none}.open-position>ul.subnav>li,.open-position>div.subnav>ul>li{display:flex}.subnav-toggle,.navbar-toggle{display:none}.subnav{position:absolute;display:block;font-size:var(--nv-subnav-font-size, 14px);line-height:var(--nv-subnav-line-height, 1.5rem);opacity:0}.subnav li>span,.subnav li>a{flex-basis:100%;font-size:var(--nv-subnav-item-font-size, inherit);line-height:var(--nv-subnav-item-line-height, inherit)}div.subnav ul{padding:0}ul.subnav,div.subnav,.subnav .subnav{padding:var(--nv-subnav-padding-y) var(--nv-subnav-padding-x)}.subnav-content,ul.subnav{flex-direction:column}li.open-mobile{background:none;transition:none}li.open-mobile+.open-mobile{margin:0}.column-title,div.subnav>ul>li>span{font-size:120%}.subnav li>a,.subnav li>span,.subnav-content{padding:var(--nv-subnav-item-padding-y) var(--nv-subnav-item-padding-x);margin:var(--nv-subnav-item-margin)}.nav>li>.subnav{margin-top:var(--nv-padding-y)}.subnav .subnav{margin-top:calc(var(--nv-subnav-padding-y)*-1);margin-left:var(--nv-subnav-padding-x)}ul.subnav{width:var(--nv-subnav-width)}div.subnav{min-width:var(--nv-subnav-larger-width)}div.subnav>ul{flex-direction:row;padding:0;margin:0}div.subnav.m1{min-width:calc(var(--nv-subnav-width) + var(--nv-subnav-padding-x)*2)}div.subnav.m2{min-width:calc(var(--nv-subnav-width)*2 + var(--nv-subnav-padding-x)*2)}div.subnav.m3{min-width:calc(var(--nv-subnav-width)*3 + var(--nv-subnav-padding-x)*2)}div.subnav.m4{min-width:calc(var(--nv-subnav-width)*4 + var(--nv-subnav-padding-x)*2)}}.nav li>a,.nav li>span{color:var(--nv-item-color)}.nav li.open-mobile{background-color:var(--nv-expanded-bg)}@media(min-width: 768px){.nav>li>span,.nav>li>a{background-color:var(--nv-item-bg)}.nav>li.open>span,.nav>li.open>a,.nav>li:hover>span,.nav>li:hover>a{color:var(--nv-item-hover-color);background-color:var(--nv-item-hover-bg)}.nav>li.active>span,.nav>li.active>a,.nav>li.active.open>span,.nav>li.active.open>a,.nav>li.active:hover>span,.nav>li.active:hover>a{color:var(--nv-item-active-color);background-color:var(--nv-item-active-bg)}}.subnav-toggle,.navbar-toggle{color:currentcolor;background-color:rgba(0,0,0,0)}.subnav-toggle:focus,.navbar-toggle:focus{color:var(--nv-bg);background-color:var(--nv-link-color);outline:none}.open-mobile>.subnav-toggle:not(:focus),.open-mobile>.navbar-toggle:not(:focus){color:var(--nv-item-color);border-color:var(--nv-item-color)}@media(min-width: 768px){.subnav{background-color:var(--nv-subnav-bg);box-shadow:var(--nv-subnav-shadow)}.subnav li>span,.subnav li>a{color:var(--nv-subnav-item-color);background-color:var(--nv-subnav-item-bg)}.subnav li>div{background-color:var(--nv-subnav-item-bg)}.subnav li.open>a,.subnav li:hover>a{color:var(--nv-subnav-item-hover-color);background-color:var(--nv-subnav-item-hover-bg)}.subnav li.active>span,.subnav li.active>a,.subnav li.active:hover>span,.subnav li.active:hover>a{color:var(--nv-subnav-item-active-color);background-color:var(--nv-subnav-item-active-bg)}.column-title,div.subnav>ul>li>span{color:var(--nv-subnav-item-color)}div.subnav li>ul>li.open>span,div.subnav li>ul>li:hover>span,ul.subnav>li.open>span,ul.subnav>li:hover>span{color:var(--nv-subnav-item-hover-color);background-color:var(--nv-subnav-item-hover-bg)}div.subnav{color:var(--nv-subnav-text-color)}.subnav-content a:not([class]),.subnav-content b{color:var(--nv-subnav-link-color)}.subnav-content a:not([class]):hover{color:var(--nv-subnav-link-color-hover)}}@media(min-width: 768px){.navbar .nav li>.subnav{top:-99999em;right:-99999em;transition:transform .5s ease,opacity .4s linear;transform:translate(0, -10px)}.navbar .nav li li>.subnav{transform:translate(10px)}.navbar .nav li li.open-position>.subnav{top:0;right:100%;left:auto}.navbar .nav li.open-position>.subnav{top:100%;right:0;left:auto;z-index:var(--nv-subnav-zindex)}.navbar .nav li.open>.subnav{opacity:1;transform:translate(0)}.navbar .nav .subnav .subnav{margin-right:var(--nv-subnav-padding-x);margin-left:0}}.navbar .nav .menu-icon+span{flex:auto;margin-right:calc(var(--nv-item-padding-x)/2);margin-left:0}.right.nav{flex-direction:column}@media(min-width: 768px){.right.nav li>.subnav{top:-99999em;left:-99999em;opacity:0;transition:transform .5s ease,opacity .4s linear;transform:translate(-10px)}.right.nav li>a{flex-basis:100%}.right.nav li.open-position>.subnav{top:0;left:100%;z-index:var(--nv-subnav-zindex)}.right.nav li.open>.subnav{opacity:1;transform:translate(0)}.right.nav>li>.subnav{margin-top:0;margin-left:var(--nv-padding-x)}}.left.nav{flex-direction:column}@media(min-width: 768px){.left.nav li>.subnav{top:-99999em;right:-99999em;left:auto;opacity:0;transition:transform .5s ease,opacity .4s linear;transform:translate(10px)}.left.nav li>a{flex-basis:100%}.left.nav li.open-position>.subnav{top:0;right:100%;z-index:var(--nv-subnav-zindex)}.left.nav li.open>.subnav{opacity:1;transform:translate(0)}.left.nav>li>.subnav{margin-top:0;margin-right:var(--nv-padding-x)}.left.nav .subnav .subnav{margin-right:var(--nv-subnav-padding-x);margin-left:0}}/*# sourceMappingURL=navbar-combo-rtl.min.css.map */ 2 | -------------------------------------------------------------------------------- /dist/js/navbar.mjs: -------------------------------------------------------------------------------- 1 | var Oe = Object.defineProperty; 2 | var Pe = (e, n, t) => n in e ? Oe(e, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[n] = t; 3 | var $ = (e, n, t) => Pe(e, typeof n != "symbol" ? n + "" : n, t); 4 | const M = {}, ve = (e) => { 5 | const { type: n, currentTarget: t } = e; 6 | M[n].forEach((s, i) => { 7 | t === i && s.forEach((o, a) => { 8 | a.apply(i, [e]), typeof o == "object" && o.once && pe(i, n, a, o); 9 | }); 10 | }); 11 | }, he = (e, n, t, s) => { 12 | M[n] || (M[n] = /* @__PURE__ */ new Map()); 13 | const i = M[n]; 14 | i.has(e) || i.set(e, /* @__PURE__ */ new Map()); 15 | const o = i.get( 16 | e 17 | ), { size: a } = o; 18 | o.set(t, s), a || e.addEventListener( 19 | n, 20 | ve, 21 | s 22 | ); 23 | }, pe = (e, n, t, s) => { 24 | const i = M[n], o = i && i.get(e), a = o && o.get(t), l = a !== void 0 ? a : s; 25 | o && o.has(t) && o.delete(t), i && (!o || !o.size) && i.delete(e), (!i || !i.size) && delete M[n], (!o || !o.size) && e.removeEventListener( 26 | n, 27 | ve, 28 | l 29 | ); 30 | }, y = "aria-expanded", De = "DOMContentLoaded", Re = "keydown", Fe = "keyup", ae = "click", je = "mouseenter", He = "mouseleave", _ = "ArrowDown", Y = "ArrowUp", G = "ArrowLeft", J = "ArrowRight", Ie = "Escape", ee = "Space", We = "transitionDuration", Ke = "transitionDelay", Q = "transitionend", be = "transitionProperty", Ue = (e, n) => e.getAttribute(n), N = (e, n, t) => e.setAttribute(n, t), ne = (e, ...n) => { 31 | e.classList.add(...n); 32 | }, I = (e, ...n) => { 33 | e.classList.remove(...n); 34 | }, E = (e, n) => e.classList.contains(n), V = (e) => e != null && typeof e == "object" || !1, O = (e) => V(e) && typeof e.nodeType == "number" && [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].some( 35 | (n) => e.nodeType === n 36 | ) || !1, g = (e) => O(e) && e.nodeType === 1 || !1, A = /* @__PURE__ */ new Map(), F = { 37 | data: A, 38 | set: (e, n, t) => { 39 | g(e) && (A.has(n) || A.set(n, /* @__PURE__ */ new Map()), A.get(n).set(e, t)); 40 | }, 41 | getAllFor: (e) => A.get(e) || null, 42 | get: (e, n) => { 43 | if (!g(e) || !n) return null; 44 | const t = F.getAllFor(n); 45 | return e && t && t.get(e) || null; 46 | }, 47 | remove: (e, n) => { 48 | const t = F.getAllFor(n); 49 | !t || !g(e) || (t.delete(e), t.size === 0 && A.delete(n)); 50 | } 51 | }, Ve = (e, n) => F.get(e, n), Ze = (e) => e == null ? void 0 : e.trim().replace( 52 | /(?:^\w|[A-Z]|\b\w)/g, 53 | (n, t) => t === 0 ? n.toLowerCase() : n.toUpperCase() 54 | ).replace(/\s+/g, ""), xe = (e) => V(e) && e.constructor.name === "Window" || !1, me = (e) => O(e) && e.nodeType === 9 || !1, w = (e) => me(e) ? e : O(e) ? e.ownerDocument : xe(e) ? e.document : globalThis.document, qe = (e, ...n) => Object.assign(e, ...n), d = (e, n) => e.dispatchEvent(n), S = (e, n, t) => { 55 | const s = getComputedStyle(e, t), i = n.replace("webkit", "Webkit").replace(/([A-Z])/g, "-$1").toLowerCase(); 56 | return s.getPropertyValue(i); 57 | }, Be = (e) => { 58 | const n = S(e, be), t = S(e, Ke), s = t.includes("ms") ? 1 : 1e3, i = n && n !== "none" ? parseFloat(t) * s : 0; 59 | return Number.isNaN(i) ? 0 : i; 60 | }, Ge = (e) => { 61 | const n = S(e, be), t = S(e, We), s = t.includes("ms") ? 1 : 1e3, i = n && n !== "none" ? parseFloat(t) * s : 0; 62 | return Number.isNaN(i) ? 0 : i; 63 | }, Ee = (e, n) => { 64 | let t = 0; 65 | const s = new Event(Q), i = Ge(e), o = Be(e); 66 | if (i) { 67 | const a = (l) => { 68 | l.target === e && (n.apply(e, [l]), e.removeEventListener(Q, a), t = 1); 69 | }; 70 | e.addEventListener(Q, a), setTimeout(() => { 71 | t || d(e, s); 72 | }, i + o + 17); 73 | } else 74 | n.apply(e, [s]); 75 | }, le = (e) => ["true", !0].includes(e) ? !0 : ["false", !1].includes(e) ? !1 : ["null", "", null, void 0].includes(e) ? null : e !== "" && !Number.isNaN(+e) ? +e : e, X = (e) => Object.entries(e), Je = (e, n, t, s) => { 76 | if (!g(e)) return n; 77 | const i = { ...t }, o = { ...e.dataset }, a = { ...n }, l = {}, c = "title"; 78 | return X(o).forEach(([r, u]) => { 79 | const P = Ze(r); 80 | l[P] = le(u); 81 | }), X(i).forEach(([r, u]) => { 82 | i[r] = le(u); 83 | }), X(n).forEach(([r, u]) => { 84 | r in i ? a[r] = i[r] : r in l ? a[r] = l[r] : a[r] = r === c ? Ue(e, c) : u; 85 | }), a; 86 | }, Qe = (e) => Object.keys(e), Z = (e, n) => { 87 | const t = new CustomEvent(e, { 88 | cancelable: !0, 89 | bubbles: !0 90 | }); 91 | return V(n) && qe(t, n), t; 92 | }, ce = (e) => V(e) && e.constructor.name === "Map" || !1, Xe = (e) => typeof e == "number" || !1, m = /* @__PURE__ */ new Map(), T = { 93 | set: (e, n, t, s) => { 94 | g(e) && (s && s.length ? (m.has(e) || m.set(e, /* @__PURE__ */ new Map()), m.get(e).set(s, setTimeout(n, t))) : m.set(e, setTimeout(n, t))); 95 | }, 96 | get: (e, n) => { 97 | if (!g(e)) return null; 98 | const t = m.get(e); 99 | return n && t && ce(t) ? t.get(n) || null : Xe(t) ? t : null; 100 | }, 101 | clear: (e, n) => { 102 | if (!g(e)) return; 103 | const t = m.get(e); 104 | n && n.length && ce(t) ? (clearTimeout(t.get(n)), t.delete(n), t.size === 0 && m.delete(e)) : (clearTimeout(t), m.delete(e)); 105 | } 106 | }, _e = (e) => g(e) && "offsetWidth" in e || !1, Ye = (e) => w(e).documentElement, en = (e) => { 107 | var n; 108 | return e ? me(e) ? e.defaultView : O(e) ? (n = e == null ? void 0 : e.ownerDocument) == null ? void 0 : n.defaultView : e : window; 109 | }, we = (e, n) => e.matches(n), nn = (e) => Ye(e).dir === "rtl", f = (e, n) => !e || !n ? null : e.closest(n) || f(e.getRootNode().host, n) || null, tn = (e, n) => g(e) ? e : (g(n) ? n : w()).querySelector(e), ye = (e, n) => (O(n) ? n : w()).getElementsByTagName( 110 | e 111 | ), p = (e, n) => (n && O(n) ? n : w()).getElementsByClassName( 112 | e 113 | ), sn = "3.3.1", b = "navbar", R = "Navbar", x = `[data-function="${b}"]`, Ne = `${x},.${b}`, h = "open", oe = "open-position", v = "open-mobile", j = "subnav", q = `${j}-toggle`, Te = `${b}-toggle`, ue = { 114 | breakpoint: 768, 115 | toggleSiblings: !0, 116 | delay: 500 117 | }, W = Z(`show.${b}`), Ce = Z(`shown.${b}`), K = Z(`hide.${b}`), te = Z(`hidden.${b}`), k = (e) => Ve(e, R), on = (e) => new L(e), U = ({ menu: e, _observer: n }, t) => { 118 | t ? n.observe(e) : n.disconnect(); 119 | }, B = (e) => { 120 | const { options: n, menu: t } = e, [s] = p(q, t); 121 | return s && S(s, "display") !== "none" || en(t).innerWidth < n.breakpoint; 122 | }, fe = (e, n) => { 123 | const t = n ? he : pe, { items: s, navbarToggle: i, menu: o } = e, a = w(o); 124 | Array.from(s).forEach((l) => { 125 | const { lastElementChild: c } = l; 126 | c && E(c, j) && (t(l, je, Ae), t(l, He, se)); 127 | const [r] = p(q, l); 128 | r && t( 129 | r, 130 | ae, 131 | de 132 | ); 133 | }), t(a, Re, an), t(a, Fe, ln), i && t(i, ae, de); 134 | }, C = (e, n) => Array.from(e.children).find( 135 | (t) => we(t, n) 136 | ), rn = (e) => { 137 | const n = C(e, `.${j}`), t = C(e, "A"); 138 | if (t && (d(t, W), W.defaultPrevented)) 139 | return; 140 | ne(e, oe), ne(e, h); 141 | const { parentElement: s } = e; 142 | if (s) { 143 | const o = p(h, s); 144 | z(Array.from(o).filter((a) => a !== e)); 145 | } 146 | n && Ee(n, () => { 147 | T.clear(e, "in"), t && (d(t, Ce), N(t, y, "true")); 148 | }); 149 | }, $e = (e, n) => { 150 | const t = C(e, `.${j}`), s = C(e, "A"), i = C(e, q); 151 | if (!([h, v].some((o) => E(e, o)) && s && (d(s, K), K.defaultPrevented))) { 152 | if (E(e, h)) { 153 | const o = () => { 154 | I(e, oe), T.clear(e, "out"), s && (d(s, te), N(s, y, "false")); 155 | }; 156 | I(e, h), n && t ? Ee(t, o) : o(); 157 | } 158 | E(e, v) && (I(e, v), [i, s].forEach((o) => { 159 | o && N(o, y, "false"); 160 | }), s && d(s, te)); 161 | } 162 | }, z = (e) => { 163 | Array.from(e).forEach((n) => $e(n)); 164 | }, an = (e) => { 165 | const { code: n, target: t } = e; 166 | (_e(t) ? f(t, Ne) : null) && [_, Y, ee].includes(n) && e.preventDefault(); 167 | }; 168 | function ln(e) { 169 | const { code: n } = e, { activeElement: t } = w(this), s = t && f(t, "nav"), i = s && k(s); 170 | if (!i || !t || this && !this.contains(t)) 171 | return; 172 | const o = f(t, "LI"); 173 | if (!o) return; 174 | const a = B(i), { previousElementSibling: l, nextElementSibling: c } = o, r = f(o, `.${h}`), u = f(o, "UL"), [P] = p(j, o), Le = [ 175 | ee, 176 | _, 177 | G, 178 | J, 179 | Y 180 | ], H = u && S(u, "flex-direction") === "column", ie = nn(o), Me = ie ? J : G, Se = ie ? G : J, ke = u && l && (n === Y && H || n === Me && !H), ze = u && c && (n === _ && H || n === Se && !H); 181 | let D = null; 182 | if (n === Ie && r ? (se.call(r), D = r) : !a && P && n === ee && (E(o, h) ? se.call(o) : Ae.call(o)), ke && o !== u.firstElementChild ? D = l : ze && o !== u.lastElementChild && (D = c), D) { 183 | const { firstElementChild: re } = D; 184 | re && re.focus(); 185 | } 186 | !a && Le.includes(n) && e.preventDefault(); 187 | } 188 | const de = (e) => { 189 | e.preventDefault(); 190 | const { currentTarget: n, target: t } = e, s = f(n, Ne), i = s && k(s); 191 | if (!i) return; 192 | const { options: o, navbarToggle: a } = i; 193 | if (t !== n && !(n != null && n.contains(t))) return; 194 | const l = f(n, "LI") || s, c = f(n, `.${Te}`) === a ? a : C(l, `.${q}`), r = c === a ? null : C(l, "A"), u = p(v, l); 195 | if (E(l, v)) { 196 | if (r && (d(r, K), K.defaultPrevented)) 197 | return; 198 | z(u), I(l, v), c && (N(c, y, "false"), c === a && U(i)), r && (N(r, y, "false"), d(r, te)); 199 | } else { 200 | if (r && (d(r, W), W.defaultPrevented)) 201 | return; 202 | if (c === a) 203 | U(i, !0); 204 | else { 205 | const P = o.toggleSiblings ? p( 206 | v, 207 | l.parentElement 208 | ) : u; 209 | z(P); 210 | } 211 | ne(l, v), c && N(c, y, "true"), r && (N(r, y, "true"), d(r, Ce)); 212 | } 213 | }; 214 | function Ae() { 215 | const e = f(this, `${x},.${b}`), n = e && k(e), t = T.get(this, "out"); 216 | if (!(!n || B(n)) && (T.clear(this, "out"), !E(this, h) && !t)) { 217 | const s = () => rn(this); 218 | T.set(this, s, 17, "in"); 219 | } 220 | } 221 | function se() { 222 | const e = f(this, `${x},.${b}`), n = e && k(e); 223 | if (!(!n || B(n)) && E(this, h)) { 224 | T.clear(this, "in"); 225 | const t = () => { 226 | z(p(oe, this)), $e(this, !0); 227 | }; 228 | T.set(this, t, n.options.delay, "out"); 229 | } 230 | } 231 | class L { 232 | constructor(n, t) { 233 | $(this, "listenResize", () => { 234 | B(this) || (z( 235 | p(v, w(this.menu)) 236 | ), U(this)); 237 | }); 238 | const s = tn(n); 239 | if (!s) 240 | throw new TypeError( 241 | `${R} cannot initialize the specified target.` 242 | ); 243 | const [i] = p( 244 | Te, 245 | s 246 | ), o = k(s); 247 | o && o.dispose(), this.menu = s, this.options = Je(s, ue, t || {}), this.items = ye("LI", s), this.navbarToggle = i, this._observer = new ResizeObserver(this.listenResize), fe(this, !0), F.set(s, R, this); 248 | } 249 | get defaults() { 250 | return ue; 251 | } 252 | get name() { 253 | return R; 254 | } 255 | dispose() { 256 | z(this.items), fe(this), U(this), F.remove(this.menu, R), Qe(this).forEach((n) => { 257 | delete this[n]; 258 | }); 259 | } 260 | } 261 | $(L, "selector", x), $(L, "init", on), $(L, "getInstance", k), $(L, "version", sn); 262 | const ge = (e) => { 263 | const { selector: n, init: t } = L; 264 | [...ye("*", w(e))].filter((i) => we(i, n)).forEach(t); 265 | }; 266 | document.body ? ge() : he(document, De, () => ge(), { 267 | once: !0 268 | }); 269 | export { 270 | L as default 271 | }; 272 | //# sourceMappingURL=navbar.mjs.map 273 | -------------------------------------------------------------------------------- /docs/assets/css/style.css: -------------------------------------------------------------------------------- 1 | /* Reboot */ 2 | *,*::after,*::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus:not(:focus-visible){outline:0 !important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:0.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:0.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent}a:hover{color:#0056b3;text-decoration:underline}a:not([href]){color:inherit;text-decoration:none}a:not([href]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto;-ms-overflow-style:scrollbar}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:0.75rem;padding-bottom:0.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:0.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}[role="button"]{cursor:pointer}select{word-wrap:normal}[type="button"],[type="reset"],[type="submit"],button{-webkit-appearance:button}[type="button"]:not(:disabled),[type="reset"]:not(:disabled),[type="submit"]:not(:disabled),button:not(:disabled){cursor:pointer}[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type="radio"],input[type="checkbox"]{box-sizing:border-box;padding:0}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:0.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{outline-offset:-2px;-webkit-appearance:none}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none !important} 3 | 4 | /* Style */ 5 | 6 | /* base typography */ 7 | body { 8 | font-size: 16px; line-height: 24px; font-family:'Roboto Condensed',Helvetica,Arial,sans-serif; 9 | background-color: #f6f6f6; color: #777; text-align: inherit 10 | } 11 | /* typo */ 12 | a { text-decoration: none} 13 | a:hover {color: #069} 14 | 15 | h1 { font-size: 48px; color: #222; font-weight: bold; letter-spacing: -2px; margin: 1rem 0 0.5rem 0; line-height: 48px } 16 | h1 small { display:inline-block; font-size: 32px; color: #444; letter-spacing: -2px; font-weight: normal; line-height: 32px } 17 | 18 | h2 { font-size: 32px; color: #222; font-weight: bold; letter-spacing: -1px; margin: 1rem 0 0.5rem 0; line-height: 32px } 19 | h2 small { display:inline-block; font-size: 24px; color: #444; letter-spacing: -1px; font-weight: normal; line-height: 24px } 20 | b {color: #333} 21 | 22 | p,ul { margin: 0 0 0.5rem 0; } 23 | ul { list-style: inherit; list-style-position: inside; } 24 | .lead { font-size: 18px; color: #777 } 25 | 26 | .install { 27 | font-family: monospace; background: none; font-size: 20px; font-weight: bold; 28 | color: #069; 29 | } 30 | 31 | /* btn */ 32 | .btn {padding: 5px 10px; color: #333; background: #ddd; ; font-size: 12px; text-transform: uppercase} 33 | .btn:hover {color: #fff; background: #333; text-decoration: none} 34 | .btn-brand { color: #fff; background: #069} 35 | .btn-brand:hover {color: #fff; background: #f00} 36 | 37 | .container {width: auto; max-width: 90%; margin: 0 auto} 38 | 39 | @media (min-width: 900px) { 40 | .container {width: 1200px; } 41 | } 42 | 43 | .content-inner { 44 | padding: 1rem; 45 | } 46 | .content-inner.main { background: #fff;overflow: hidden; } 47 | 48 | /* kbd */ 49 | kbd { 50 | background:rgba(0, 0, 0, 0.7); 51 | color:rgba(255, 255, 255, 0.7); 52 | padding: 0 .25rem; 53 | border-radius: .25rem; 54 | font-size: 85%;; 55 | } 56 | 57 | /* copy */ 58 | .copy { 59 | padding: 0.5rem 1rem; 60 | font-size: 12px; 61 | background: rgba(0,0,0,0.1); 62 | display: flex; 63 | flex-direction: row; 64 | justify-content: space-between; 65 | } 66 | .copy form { 67 | flex-basis:100% 68 | } 69 | .sidebar .copy { 70 | /* background: #d6dee2; */ 71 | background: #d2e0d0; 72 | } 73 | 74 | .text-ellipsis { 75 | text-overflow: ellipsis; 76 | overflow: hidden; 77 | white-space: nowrap; 78 | } 79 | 80 | /* code wrapper */ 81 | .code-wrapper { 82 | max-width: 100%; 83 | overflow: auto; 84 | display: grid; 85 | direction: ltr; 86 | } 87 | 88 | /* grid */ 89 | .row.boxes > div { 90 | margin: 0.5rem 0; 91 | overflow: hidden; 92 | } 93 | 94 | .box { 95 | padding: 1rem; 96 | background: #e9f5f9; 97 | } 98 | .box ul:last-child, 99 | .box p:last-child { 100 | margin: 0; 101 | } 102 | .nomargin .col-8.container {max-width: 100%; margin:0} 103 | 104 | .row { 105 | display: flex; 106 | flex-direction: column; 107 | flex-wrap: wrap; 108 | 109 | /* max-width: 100%; */ 110 | } 111 | 112 | .right-side { 113 | flex-direction: column-reverse; 114 | } 115 | 116 | .col-2, 117 | .col-3, 118 | .col-4, 119 | .col-6, 120 | .col-8, 121 | .col-10, 122 | .col-9 {max-width: 100%;} 123 | 124 | @media (min-width: 768px) { 125 | .row { 126 | flex-direction: row; 127 | flex-wrap: wrap; 128 | flex-direction: row; 129 | margin: 0 -0.5rem; 130 | } 131 | .row.nomargin { 132 | margin: 0; 133 | } 134 | .overflow-x-hidden { 135 | overflow-x: hidden; 136 | } 137 | 138 | /* .row.boxes > div { 139 | margin: 0.5rem; 140 | } */ 141 | 142 | .col-2 > .box, 143 | .col-3 > .box, 144 | .col-4 > .box, 145 | .col-8 > .box, 146 | .col-9 > .box, 147 | .col-6 > .box { 148 | height: 100% 149 | } 150 | 151 | .col-2, 152 | .col-3, 153 | .col-4, 154 | .col-6, 155 | .col-8, 156 | .col-9 {padding: 0 0.5rem; flex: auto} 157 | 158 | .col-2 { max-width:16.665%; flex: 0 0 16.665%} 159 | .col-3 { max-width:25%; flex: 0 0 25%} 160 | .col-4 { max-width:33.33%; flex: 0 0 33.33%} 161 | .col-6 { max-width:50%; flex: 0 0 50%} 162 | .col-8 { max-width:66.65%; flex: 0 0 66.65%} 163 | .col-9 { max-width:75%; flex: 0 0 75%} 164 | 165 | .row.nomargin > .col-2, 166 | .row.nomargin > .col-3, 167 | .row.nomargin > .col-4, 168 | .row.nomargin > .col-6, 169 | .row.nomargin > .col-8, 170 | .row.nomargin > .col-10, 171 | .row.nomargin > .col-9 {padding: 0;} 172 | 173 | .nomargin .col-8.container { 174 | margin: 0 auto; 175 | max-width: 66.665%; 176 | flex-basis: 66.665% !important; 177 | } 178 | } 179 | 180 | /* utility */ 181 | .pull-right {float: right} 182 | .pull-left {float: left} 183 | .mb-1 {margin-bottom:0.25rem !important} 184 | .mb-2 {margin-bottom:0.5rem !important} 185 | .mb-3 {margin-bottom:1rem !important} 186 | .mb-4 {margin-bottom:1.5rem !important} 187 | .mt-1 {margin-top:0.25rem !important} 188 | .mt-2 {margin-top:0.5rem !important} 189 | .mt-3 {margin-top:1rem !important} 190 | .mt-4 {margin-top:1.5rem !important} 191 | 192 | .mt-0 { margin-top: 0 !important } 193 | .mb-0 { margin-bottom: 0 !important } 194 | 195 | @media (max-width: 768px){ 196 | .hidden-md {display: none;} 197 | } 198 | 199 | @media (max-width: 328px){ 200 | .hidden-xs {display: none;} 201 | } 202 | 203 | /* smooth scroll */ 204 | html { 205 | scroll-behavior: smooth; 206 | } 207 | 208 | /* HERO */ 209 | .hero { 210 | padding: 2rem 3rem; 211 | } 212 | 213 | .hero .btn:not(.btn-brand):not(:hover) { background-color: #c5c5c5 } 214 | 215 | .rounded { 216 | border-radius: 1.5rem; 217 | } 218 | 219 | 220 | /* hr */ 221 | hr { 222 | border-top-color: rgba(125,125,125,0.25); 223 | border-bottom-color: rgba(255,255,255,0.15); 224 | } 225 | 226 | /* img */ 227 | img {max-width: 100%} 228 | 229 | /* round */ 230 | .round {border-radius: 1rem} 231 | 232 | .gray-1 {background:#111 !important} 233 | .gray-2 {background:#222 !important} 234 | .gray-3 {background:#333 !important} 235 | .gray-4 {background:#444 !important} 236 | .gray-5 {background:#555 !important} 237 | .gray-6 {background:#aaa !important} 238 | .gray-7 {background:#bbb !important} 239 | .gray-8 {background:#ccc !important} 240 | .gray-9 {background:#ddd !important} 241 | .gray-0 {background:#eee !important} 242 | 243 | /* code */ 244 | code:not([class*="language-"]) { 245 | color: #f35454; 246 | padding: 0 0.25rem; 247 | font-family: monospace; 248 | border-radius: 0.25rem; 249 | display: inline-block; 250 | line-height: 1.2 251 | } 252 | 253 | /* special list */ 254 | .attr-list { 255 | /* list-style: square inside; */ 256 | list-style: none; 257 | padding: 0 0 0 1rem 258 | } 259 | .attr-list li::marker { 260 | content: "› "; 261 | font-size: 18px; 262 | } 263 | 264 | /* form */ 265 | .form-control { 266 | padding: 0.125rem 0.5rem; 267 | /* width: calc(100% - 1rem); */ 268 | width: 100%; 269 | display: block; 270 | border: 1px solid rgba(0,0,0,0.25); 271 | border-radius: 0.25rem; 272 | color: rgba(0,0,0,0.55); 273 | /* line-height: 1; */ 274 | background: rgba(255,255,255,0.55) 275 | } 276 | 277 | .form-control:focus { 278 | color: rgba(0,0,0,.75);; 279 | outline: none; 280 | box-shadow: 0 0 0 3px rgba(0,0,0,0.125); 281 | background: rgba(255,255,255,0.75); 282 | border-color: rgba(0,0,0,.35); 283 | } 284 | 285 | .form-control::placeholder { 286 | color: rgba(0,0,0,0.55) 287 | } 288 | 289 | .sidebar > .column-title{ 290 | color: #fff !important; 291 | /* background: #98a0a5; */ 292 | background: #909c8f; 293 | padding: 0.5rem 1rem; 294 | display: flex; 295 | } 296 | 297 | .special-title { 298 | margin: 0 0 0.5rem; 299 | padding: 0 0 0.5rem; 300 | display: flex; 301 | } 302 | 303 | .visually-hidden { 304 | position: absolute!important; 305 | width: 1px!important; 306 | height: 1px!important; 307 | padding: 0!important; 308 | margin: -1px!important; 309 | overflow: hidden!important; 310 | clip: rect(0,0,0,0)!important; 311 | white-space: nowrap!important; 312 | border: 0!important; 313 | } 314 | 315 | .d-flex { display: flex !important } 316 | .d-block { display: block !important } 317 | .d-none { display: none !important } 318 | @media (min-width: 768px) { 319 | .d-md-flex { display: flex !important } 320 | .d-md-block { display: block !important } 321 | .d-md-none { display: none !important } 322 | } 323 | 324 | /* overflow */ 325 | .overflow-hidden { 326 | overflow: hidden; 327 | } 328 | 329 | /* RTL Languages */ 330 | 331 | [dir="rtl"] { 332 | text-align: right; 333 | direction: rtl; 334 | } 335 | 336 | [dir="rtl"] .attr-list { 337 | text-align: right; 338 | padding: 0 1rem 0 0; 339 | } -------------------------------------------------------------------------------- /dist/css/navbar.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --nv-padding-x: 0rem; 3 | --nv-padding-y: 0rem; 4 | --nv-line-height: 1.5rem; 5 | --nv-font-size: 14px; 6 | --nv-primary-color: #069; 7 | --nv-bg: #687c86; 8 | --nv-text-color: rgba(255, 255, 255, 0.55); 9 | --nv-link-color: rgba(255, 255, 255, 0.75); 10 | --nv-link-color-hover: rgba(255, 255, 255, 0.95); 11 | --nv-subnav-bg: #dadee0; 12 | --nv-subnav-text-color: rgba(0, 0, 0, 0.55); 13 | --nv-subnav-link-color: rgba(0, 0, 0, 0.75); 14 | --nv-subnav-link-color-hover: rgba(0, 0, 0, 0.95); 15 | --nv-item-font-size: 14px; 16 | --nv-item-line-height: 1.5rem; 17 | --nv-item-padding-y: 0.5rem; 18 | --nv-item-padding-x: 1rem; 19 | --nv-item-margin: 0; 20 | --nv-subnav-item-font-size: inherit; 21 | --nv-subnav-item-line-height: inherit; 22 | --nv-subnav-item-padding-x: var(--nv-item-padding-x); 23 | --nv-subnav-item-padding-y: var(--nv-item-padding-y); 24 | --nv-subnav-item-margin: 0; 25 | --nv-brand-font-size: 18px; 26 | --nv-brand-line-height: inherit; 27 | --nv-brand-padding: var(--nv-item-padding-y) var(--nv-item-padding-x); 28 | --nv-brand-link-color: rgba(255, 255, 255, 0.95); 29 | --nv-subnav-padding-x: 0rem; 30 | --nv-subnav-padding-y: 0rem; 31 | --nv-subnav-line-height: inherit; 32 | --nv-subnav-font-size: inherit; 33 | --nv-subnav-width: 200px; 34 | --nv-subnav-larger-width: calc(var(--nv-subnav-width) * 3 + var(--nv-subnav-padding-x) * 2); 35 | --nv-item-color: rgba(255, 255, 255, 0.65); 36 | --nv-item-bg: transparent; 37 | --nv-item-hover-color: rgba(255, 255, 255, 0.85); 38 | --nv-item-hover-bg: rgba(0, 0, 0, 0.35); 39 | --nv-item-active-color: #fff; 40 | --nv-item-active-bg: var(--nv-primary-color); 41 | --nv-subnav-item-color: rgba(0, 0, 0, 0.65); 42 | --nv-subnav-item-bg: transparent; 43 | --nv-subnav-item-hover-color: rgba(255, 255, 255, 0.85); 44 | --nv-subnav-item-hover-bg: rgba(0, 0, 0, 0.4); 45 | --nv-subnav-item-active-color: #fff; 46 | --nv-subnav-item-active-bg: var(--nv-primary-color); 47 | --nv-subnav-zindex: 50; 48 | --nv-icon-height: 1.5rem; 49 | --nv-toggle-padding: 0.125rem 0.5rem; 50 | --nv-base-radius: 0.25rem; 51 | --nv-expanded-bg: rgba(255, 255, 255, 0.075); 52 | --nv-subnav-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.25), 1px 1px 0 0 rgba(0, 0, 0, 0.15) inset; 53 | } 54 | 55 | .navbar { 56 | display: flex; 57 | flex-flow: row wrap; 58 | justify-content: space-between; 59 | padding: var(--nv-padding-y) var(--nv-padding-x); 60 | font-size: var(--nv-font-size); 61 | line-height: var(--nv-line-height); 62 | } 63 | .navbar > div { 64 | display: none; 65 | flex-basis: 100%; 66 | flex-direction: column; 67 | flex-grow: 1; 68 | } 69 | .navbar.open-mobile > div { 70 | display: flex; 71 | } 72 | .navbar .nav { 73 | flex-direction: column; 74 | } 75 | .navbar .brand { 76 | display: flex; 77 | align-items: center; 78 | padding: var(--nv-brand-padding); 79 | font-size: var(--nv-brand-font-size); 80 | line-height: var(--nv-brand-line-height); 81 | text-decoration: none; 82 | white-space: nowrap; 83 | } 84 | 85 | @media (min-width: 768px) { 86 | .navbar { 87 | position: relative; 88 | flex-flow: row nowrap; 89 | align-items: center; 90 | justify-content: flex-start; 91 | } 92 | .navbar > div { 93 | display: flex; 94 | flex-basis: auto; 95 | flex-direction: row; 96 | align-items: center; 97 | justify-content: space-between; 98 | } 99 | .navbar .nav { 100 | flex-direction: row; 101 | } 102 | } 103 | .navbar-content a:not([class]), .navbar-content b, 104 | .subnav-content a:not([class]), 105 | .subnav-content b { 106 | color: var(--nv-link-color); 107 | } 108 | 109 | @media (min-width: 768px) { 110 | .navbar-content a:not([class]):hover { 111 | color: var(--nv-link-color-hover); 112 | } 113 | } 114 | .navbar { 115 | color: var(--nv-text-color); 116 | background-color: var(--nv-bg); 117 | } 118 | .navbar .brand { 119 | color: var(--nv-brand-link-color); 120 | } 121 | 122 | .nav li > a, 123 | .nav li > span, 124 | .navbar-content, 125 | .subnav-content { 126 | padding: var(--nv-item-padding-y) var(--nv-item-padding-x); 127 | margin: var(--nv-item-margin); 128 | } 129 | 130 | .nav > li, 131 | .row > li, 132 | .subnav > li, 133 | .subnav-toggle + ul > li, 134 | .subnav-toggle + div > li, 135 | .nav li > span, .nav li > a { 136 | display: flex; 137 | flex-flow: row wrap; 138 | align-items: center; 139 | justify-content: space-between; 140 | } 141 | 142 | .nav { 143 | display: flex; 144 | } 145 | .nav, .nav ul { 146 | padding: 0; 147 | margin: 0; 148 | list-style: none; 149 | } 150 | .nav li { 151 | transition: margin 0.3s ease 0s; 152 | } 153 | .nav li > span, .nav li > a { 154 | flex-wrap: nowrap; 155 | overflow: hidden; 156 | font-size: var(--nv-item-font-size); 157 | line-height: var(--nv-item-line-height); 158 | } 159 | .nav li > a { 160 | text-decoration: none; 161 | } 162 | .nav li > span > span, 163 | .nav li > a > span { 164 | overflow: hidden; 165 | text-overflow: ellipsis; 166 | white-space: nowrap; 167 | } 168 | 169 | .subnav-toggle, 170 | .navbar-toggle { 171 | display: flex; 172 | align-items: center; 173 | align-self: center; 174 | padding: var(--nv-toggle-padding); 175 | margin: auto var(--nv-item-padding-x); 176 | border: 1px solid transparent; 177 | border-radius: var(--nv-base-radius); 178 | } 179 | 180 | li.open-mobile > .subnav-toggle + ul, 181 | li.open-mobile > .subnav-toggle + div, 182 | li.open-mobile > .subnav { 183 | display: block; 184 | } 185 | 186 | .open-mobile + .open-mobile { 187 | margin-top: var(--nv-item-padding-y); 188 | } 189 | 190 | .parent-icon, 191 | .subnav-toggle + ul, 192 | .subnav-toggle + div, 193 | .subnav { 194 | display: none; 195 | } 196 | 197 | .subnav-content p, .subnav-content ul { 198 | margin-bottom: var(--nv-item-padding-y); 199 | } 200 | 201 | ul.subnav, 202 | div.subnav ul { 203 | flex-basis: 100%; 204 | flex-direction: column; 205 | flex-grow: 1; 206 | padding: 0 0 0 var(--nv-item-padding-x); 207 | } 208 | 209 | div.subnav { 210 | flex-basis: 100%; 211 | } 212 | 213 | .menu-icon, 214 | .parent-icon { 215 | width: var(--nv-icon-height); 216 | height: var(--nv-icon-height); 217 | line-height: var(--nv-icon-height); 218 | text-align: center; 219 | fill: currentcolor; 220 | } 221 | 222 | .menu-icon { 223 | font-size: calc(var(--nv-icon-height) * 0.94); 224 | } 225 | 226 | .menu-icon + span { 227 | flex: auto; 228 | margin-left: calc(var(--nv-item-padding-x) / 2); 229 | } 230 | 231 | @media (min-width: 768px) { 232 | .row > li { 233 | align-content: flex-start; 234 | } 235 | nav li:not(.full-width), 236 | .nav li:not(.full-width) { 237 | position: relative; 238 | } 239 | .parent-icon, 240 | .subnav-toggle + ul, 241 | .subnav-toggle + div { 242 | display: flex; 243 | } 244 | ul.subnav > li, 245 | div.subnav > ul > li { 246 | display: none; 247 | } 248 | .open-position > ul.subnav > li, 249 | .open-position > div.subnav > ul > li { 250 | display: flex; 251 | } 252 | .subnav-toggle, 253 | .navbar-toggle { 254 | display: none; 255 | } 256 | .subnav { 257 | position: absolute; 258 | display: block; 259 | font-size: var(--nv-subnav-font-size, 14px); 260 | line-height: var(--nv-subnav-line-height, 1.5rem); 261 | opacity: 0; 262 | } 263 | .subnav li > span, 264 | .subnav li > a { 265 | flex-basis: 100%; 266 | font-size: var(--nv-subnav-item-font-size, inherit); 267 | line-height: var(--nv-subnav-item-line-height, inherit); 268 | } 269 | div.subnav ul { 270 | padding: 0; 271 | } 272 | ul.subnav, div.subnav, 273 | .subnav .subnav { 274 | padding: var(--nv-subnav-padding-y) var(--nv-subnav-padding-x); 275 | } 276 | .subnav-content, 277 | ul.subnav { 278 | flex-direction: column; 279 | } 280 | li.open-mobile { 281 | background: none; 282 | transition: none; 283 | } 284 | li.open-mobile + .open-mobile { 285 | margin: 0; 286 | } 287 | .column-title, 288 | div.subnav > ul > li > span { 289 | font-size: 120%; 290 | } 291 | .subnav li > a, 292 | .subnav li > span, 293 | .subnav-content { 294 | padding: var(--nv-subnav-item-padding-y) var(--nv-subnav-item-padding-x); 295 | margin: var(--nv-subnav-item-margin); 296 | } 297 | .nav > li > .subnav { 298 | margin-top: var(--nv-padding-y); 299 | } 300 | .subnav .subnav { 301 | margin-top: calc(var(--nv-subnav-padding-y) * -1); 302 | margin-left: var(--nv-subnav-padding-x); 303 | } 304 | ul.subnav { 305 | width: var(--nv-subnav-width); 306 | } 307 | div.subnav { 308 | min-width: var(--nv-subnav-larger-width); 309 | } 310 | div.subnav > ul { 311 | flex-direction: row; 312 | padding: 0; 313 | margin: 0; 314 | } 315 | div.subnav.m1 { 316 | min-width: calc(var(--nv-subnav-width) + var(--nv-subnav-padding-x) * 2); 317 | } 318 | div.subnav.m2 { 319 | min-width: calc(var(--nv-subnav-width) * 2 + var(--nv-subnav-padding-x) * 2); 320 | } 321 | div.subnav.m3 { 322 | min-width: calc(var(--nv-subnav-width) * 3 + var(--nv-subnav-padding-x) * 2); 323 | } 324 | div.subnav.m4 { 325 | min-width: calc(var(--nv-subnav-width) * 4 + var(--nv-subnav-padding-x) * 2); 326 | } 327 | } 328 | .nav li > a, 329 | .nav li > span { 330 | color: var(--nv-item-color); 331 | } 332 | .nav li.open-mobile { 333 | background-color: var(--nv-expanded-bg); 334 | } 335 | @media (min-width: 768px) { 336 | .nav > li > span, 337 | .nav > li > a { 338 | background-color: var(--nv-item-bg); 339 | } 340 | .nav > li.open > span, 341 | .nav > li.open > a, 342 | .nav > li:hover > span, 343 | .nav > li:hover > a { 344 | color: var(--nv-item-hover-color); 345 | background-color: var(--nv-item-hover-bg); 346 | } 347 | .nav > li.active > span, 348 | .nav > li.active > a, 349 | .nav > li.active.open > span, 350 | .nav > li.active.open > a, 351 | .nav > li.active:hover > span, 352 | .nav > li.active:hover > a { 353 | color: var(--nv-item-active-color); 354 | background-color: var(--nv-item-active-bg); 355 | } 356 | } 357 | 358 | .subnav-toggle, 359 | .navbar-toggle { 360 | color: currentcolor; 361 | background-color: transparent; 362 | } 363 | .subnav-toggle:focus, 364 | .navbar-toggle:focus { 365 | color: var(--nv-bg); 366 | background-color: var(--nv-link-color); 367 | outline: none; 368 | } 369 | 370 | .open-mobile > .subnav-toggle:not(:focus), 371 | .open-mobile > .navbar-toggle:not(:focus) { 372 | color: var(--nv-item-color); 373 | border-color: var(--nv-item-color); 374 | } 375 | 376 | @media (min-width: 768px) { 377 | .subnav { 378 | background-color: var(--nv-subnav-bg); 379 | box-shadow: var(--nv-subnav-shadow); 380 | } 381 | .subnav li > span, 382 | .subnav li > a { 383 | color: var(--nv-subnav-item-color); 384 | background-color: var(--nv-subnav-item-bg); 385 | } 386 | .subnav li > div { 387 | background-color: var(--nv-subnav-item-bg); 388 | } 389 | .subnav li.open > a, .subnav li:hover > a { 390 | color: var(--nv-subnav-item-hover-color); 391 | background-color: var(--nv-subnav-item-hover-bg); 392 | } 393 | .subnav li.active > span, 394 | .subnav li.active > a, .subnav li.active:hover > span, 395 | .subnav li.active:hover > a { 396 | color: var(--nv-subnav-item-active-color); 397 | background-color: var(--nv-subnav-item-active-bg); 398 | } 399 | .column-title, 400 | div.subnav > ul > li > span { 401 | color: var(--nv-subnav-item-color); 402 | } 403 | div.subnav li > ul > li.open > span, 404 | div.subnav li > ul > li:hover > span, 405 | ul.subnav > li.open > span, 406 | ul.subnav > li:hover > span { 407 | color: var(--nv-subnav-item-hover-color); 408 | background-color: var(--nv-subnav-item-hover-bg); 409 | } 410 | div.subnav { 411 | color: var(--nv-subnav-text-color); 412 | } 413 | .subnav-content a:not([class]), .subnav-content b { 414 | color: var(--nv-subnav-link-color); 415 | } 416 | .subnav-content a:not([class]):hover { 417 | color: var(--nv-subnav-link-color-hover); 418 | } 419 | } 420 | @media (min-width: 768px) { 421 | .nav li > .subnav { 422 | top: -99999em; 423 | left: -99999em; 424 | transition: transform 0.5s ease, opacity 0.4s linear; 425 | transform: translate(0, -10px); 426 | } 427 | .nav li li > .subnav { 428 | transform: translate(-10px); 429 | } 430 | .nav li li.open-position > .subnav { 431 | top: 0; 432 | left: 100%; 433 | } 434 | .nav li.open-position > .subnav { 435 | top: 100%; 436 | left: 0; 437 | z-index: var(--nv-subnav-zindex); 438 | } 439 | .nav li.open > .subnav { 440 | opacity: 1; 441 | transform: translate(0); 442 | } 443 | } 444 | 445 | /*# sourceMappingURL=navbar.css.map */ 446 | --------------------------------------------------------------------------------