My blog

"})," heading."]}),` `,F(t.h4,{id:"headings-to-include",children:"Headings to include"}),` `,w1(t.p,{children:["By default, the ",F(t.code,{children:"h2"})," and ",F(t.code,{children:"h3"})," elements in your pages are used to generated the table of contents. You can change that by using the ",F(t.code,{children:"headings"})," property, giving the indices of the headings to look for. For instance, if we want to look at ",F(t.code,{children:"h1"})," and ",F(t.code,{children:"h2"})," headings instead of the default ",F(t.code,{children:"h2"})," and ",F(t.code,{children:"h3"}),", we can do so as follows:"]}),` `,F(t.pre,{className:"language-jsx",children:w1(t.code,{className:"language-jsx",children:[w1(t.span,{className:"token tag",children:[w1(t.span,{className:"token tag",children:[F(t.span,{className:"token punctuation",children:"<"}),F(t.span,{className:"token class-name",children:"TOC"})]})," ",F(t.span,{className:"token attr-name",children:"headings"}),w1(t.span,{className:"token script language-javascript",children:[F(t.span,{className:"token script-punctuation punctuation",children:"="}),F(t.span,{className:"token punctuation",children:"{"}),F(t.span,{className:"token punctuation",children:"["}),F(t.span,{className:"token number",children:"1"}),F(t.span,{className:"token punctuation",children:","})," ",F(t.span,{className:"token number",children:"2"}),F(t.span,{className:"token punctuation",children:"]"}),F(t.span,{className:"token punctuation",children:"}"})]})," ",F(t.span,{className:"token punctuation",children:"/>"})]}),` `]})}),` `,F("div",{className:"no-underline p-6 border border-gray-100 bg-gray-50 rounded-md",children:F(K2,{headings:[1,2]})}),` `,F(t.h4,{id:"custom-theme",children:"Custom theme"}),` `,w1(t.p,{children:["By providing a ",F(t.code,{children:"theme"})," object, you can specify how the table of content should look."]}),` `,` `,w1("div",{className:"no-underline p-6 border border-gray-100 bg-fuchsia-50 bg-opacity-40 rounded-md",children:[F(K2,{mainContainerId:"pagecontent",theme:yD}),F("div",{className:`hidden ${Object.values(yD).join(" ")}`})]}),` `,F(t.pre,{className:"language-jsx",children:w1(t.code,{className:"language-jsx",children:[F(t.span,{className:"token keyword module",children:"export"})," ",F(t.span,{className:"token keyword",children:"const"})," theme ",F(t.span,{className:"token operator",children:"="})," ",F(t.span,{className:"token punctuation",children:"{"}),` item`,F(t.span,{className:"token operator",children:":"})," ",F(t.span,{className:"token string",children:"'font-serif text-sm py-1.5 px-2 rounded transition no-underline'"}),F(t.span,{className:"token punctuation",children:","}),` itemActive`,F(t.span,{className:"token operator",children:":"})," ",F(t.span,{className:"token string",children:"'font-semibold text-fuchsia-500 bg-fuchsia-50 no-underline'"}),F(t.span,{className:"token punctuation",children:","}),` itemInactive`,F(t.span,{className:"token operator",children:":"})," ",F(t.span,{className:"token string",children:"'text-gray-600 hover:text-gray-900 hover:bg-gray-50 no-underline'"}),F(t.span,{className:"token punctuation",children:","}),` lineActive`,F(t.span,{className:"token operator",children:":"})," ",F(t.span,{className:"token string",children:"''"}),F(t.span,{className:"token punctuation",children:","}),` lineInactive`,F(t.span,{className:"token operator",children:":"})," ",F(t.span,{className:"token string",children:"''"}),` `,F(t.span,{className:"token punctuation",children:"}"}),` `,w1(t.span,{className:"token tag",children:[w1(t.span,{className:"token tag",children:[F(t.span,{className:"token punctuation",children:"<"}),F(t.span,{className:"token class-name",children:"TOC"})]})," ",F(t.span,{className:"token attr-name",children:"theme"}),w1(t.span,{className:"token script language-javascript",children:[F(t.span,{className:"token script-punctuation punctuation",children:"="}),F(t.span,{className:"token punctuation",children:"{"}),"theme",F(t.span,{className:"token punctuation",children:"}"})]})," ",F(t.span,{className:"token punctuation",children:"/>"})]}),` `]})})]})}function t31(e={}){let{wrapper:t}=Object.assign({},b0(),e.components);return t?F(t,Object.assign({},e,{children:F(AD,e)})):AD(e)}var bD=t31;function xD(e){let t=Object.assign({h1:"h1",p:"p",h2:"h2",pre:"pre",code:"code",span:"span",h3:"h3"},b0(),e.components);return w1(te,{children:[F(t.h1,{id:"motif-menus",children:"Motif Menus"}),` `,F(t.p,{children:"A collection of navigation bars, tables of content and sidebars."}),` `,F(t.h2,{id:"usage",children:"Usage"}),` `,F(t.p,{children:"To use the component, import it from the Motif CDN:"}),` `,F(t.pre,{className:"language-jsx",children:w1(t.code,{className:"language-jsx",children:[F(t.span,{className:"token keyword module",children:"import"})," ",w1(t.span,{className:"token imports",children:[F(t.span,{className:"token punctuation",children:"{"})," ",F(t.span,{className:"token maybe-class-name",children:"NavigationBar"})," ",F(t.span,{className:"token punctuation",children:"}"})]})," ",F(t.span,{className:"token keyword module",children:"from"})," ",F(t.span,{className:"token string",children:'"https://cdn.motif.land/motifmenus@0.0.23"'}),` `]})}),` `,F(t.h2,{id:"components",children:"Components"}),` `,F(t.h3,{id:"navigation-bar",children:"Navigation bar"}),` `,F(rD,{}),` `,F(t.h3,{id:"sidebar",children:"Sidebar"}),` `,F(mD,{}),` `,F(t.h3,{id:"table-of-contents",children:"Table of contents"}),` `,F(bD,{})]})}function r31(e={}){let{wrapper:t}=Object.assign({},b0(),e.components);return t?F(t,Object.assign({},e,{children:F(xD,e)})):xD(e)}var ED=r31;var o31={title:"Motif Menus"};function TD(e){return F(ED,{})}function n31(e={}){let{wrapper:t}=Object.assign({},b0(),e.components);return t?F(t,Object.assign({},e,{children:F(TD,e)})):TD(e)}var a31=n31;return I4(s31);})(); /** * @license React * react-jsx-runtime.production.min.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ /*! Bundled license information: react/cjs/react.production.min.js: (** @license React v17.0.1 * react.production.min.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. *) */ /*! Bundled license information: react/cjs/react-jsx-runtime.production.min.js: (** @license React v17.0.1 * react-jsx-runtime.production.min.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. *) */ /** * @license * Lodash (Custom Build) * Build: `lodash modularize exports="es" -o ./` * Copyright OpenJS Foundation and other contributors * Released under MIT license * Based on Underscore.js 1.8.3 * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors */ /*! Copyright (c) 2018 Jed Watson. Licensed under the MIT License (MIT), see http://jedwatson.github.io/classnames */ /*! * The buffer module from node.js, for the browser. * * @author Feross Aboukhadijeh * @license MIT */ /*! Copyright (c) 2018 Jed Watson. Licensed under the MIT License (MIT), see http://jedwatson.github.io/classnames */ return Component;