{"title":"$:/plugins/tiddlywiki/menubar","name":"Menu Bar","description":"Menu Bar","list":"readme config","version":"5.1.22","plugin-type":"plugin","dependents":"","type":"application/json","tiddlers":{"$:/config/DefaultColourMappings/menubar-foreground":{"title":"$:/config/DefaultColourMappings/menubar-foreground","text":"#fff"},"$:/config/DefaultColourMappings/menubar-background":{"title":"$:/config/DefaultColourMappings/menubar-background","text":"#5778d8"},"$:/config/plugins/menubar/MenuItems/Visibility/$:/plugins/tiddlywiki/menubar/items/pagecontrols":{"title":"$:/config/plugins/menubar/MenuItems/Visibility/$:/plugins/tiddlywiki/menubar/items/pagecontrols","text":"hide"},"$:/config/plugins/menubar/MenuItems/Visibility/$:/plugins/tiddlywiki/menubar/items/server":{"title":"$:/config/plugins/menubar/MenuItems/Visibility/$:/plugins/tiddlywiki/menubar/items/server","text":"hide"},"$:/config/plugins/menubar/MenuItems/Visibility/$:/plugins/tiddlywiki/menubar/items/sidebar":{"title":"$:/config/plugins/menubar/MenuItems/Visibility/$:/plugins/tiddlywiki/menubar/items/sidebar","text":"hide"},"$:/config/plugins/menubar/breakpoint":{"title":"$:/config/plugins/menubar/breakpoint","text":"620px"},"$:/plugins/tiddlywiki/menubar/config":{"title":"$:/plugins/tiddlywiki/menubar/config","tags":"$:/tags/ControlPanel/Toolbars","caption":"Menu Bar","text":"\\define config-base() $:/config/plugins/menubar/MenuItems/Visibility/\n\n! Menu Bar Configuration\n\n!! Menu Items\n\nSelect which menu items will be shown. You can also drag items to reorder them.\n\n<$set name=\"tv-config-toolbar-icons\" value=\"yes\">\n\n<$set name=\"tv-config-toolbar-text\" value=\"yes\">\n\n<$macrocall $name=\"list-tagged-draggable\" tag=\"$:/tags/MenuBar\" itemTemplate=\"$:/core/ui/ControlPanel/Toolbars/ItemTemplate\"/>\n\n</$set>\n\n</$set>\n\n!! Breakpoint Position\n\nThe breakpoint position between narrow and wide screens. Should include CSS units (eg. `400px`).\n\n<$edit-text tiddler=\"$:/config/plugins/menubar/breakpoint\" default=\"\" tag=\"input\"/>\n\n!! Menu Bar Colours\n\nTo change the colour of the menu bar, define the colours `menubar-foreground` and `menubar-background` in the currently selected palette\n"},"$:/plugins/tiddlywiki/menubar/items/contents":{"title":"$:/plugins/tiddlywiki/menubar/items/contents","caption":"Contents","description":"Table of Contents","is-dropdown":"yes","tags":"$:/tags/MenuBar","text":"<div class=\"tc-table-of-contents\">\n\n<<toc-selective-expandable 'TableOfContents'>>\n\n</div>\n"},"$:/plugins/tiddlywiki/menubar/items/hamburger":{"title":"$:/plugins/tiddlywiki/menubar/items/hamburger","tags":"$:/tags/MenuBar","caption":"Hamburger","description":"Show the full menu bar on a narrow screen","custom-menu-content":"{{$:/plugins/tiddlywiki/menubar/items/hamburger}}","show-when":"narrow","text":"<$list filter=\"[[$:/state/popup/menubar/hamburger]get[text]else[no]match[no]]\">\n<$button set=\"$:/state/popup/menubar/hamburger\" setTo=\"yes\">\n{{$:/core/images/menu-button}}\n</$button>\n</$list>\n<$list filter=\"[[$:/state/popup/menubar/hamburger]get[text]else[no]match[yes]]\">\n<$button set=\"$:/state/popup/menubar/hamburger\" setTo=\"no\">\n{{$:/core/images/close-button}}\n</$button>\n</$list>\n"},"$:/plugins/tiddlywiki/menubar/items/pagecontrols":{"title":"$:/plugins/tiddlywiki/menubar/items/pagecontrols","tags":"$:/tags/MenuBar","description":"Page controls from the sidebar","caption":"Page controls","custom-menu-content":"<$transclude tiddler=\"$:/plugins/tiddlywiki/menubar/items/pagecontrols\" mode=\"inline\"/>","text":"\\whitespace trim\n\\define config-title()\n$:/config/PageControlButtons/Visibility/$(listItem)$\n\\end\n<$list filter=\"[all[shadows+tiddlers]tag[$:/tags/PageControls]!has[draft.of]]\" variable=\"listItem\">\n<$set name=\"hidden\" value=<<config-title>>>\n<$list filter=\"[<hidden>!text[hide]]\" storyview=\"pop\" variable=\"ignore\">\n<$set name=\"tv-config-toolbar-class\" filter=\"[<tv-config-toolbar-class>] [<listItem>encodeuricomponent[]addprefix[tc-btn-]]\">\n<$transclude tiddler=<<listItem>> mode=\"inline\"/>\n</$set>\n</$list>\n</$set>\n</$list>\n"},"$:/plugins/tiddlywiki/menubar/items/search":{"title":"$:/plugins/tiddlywiki/menubar/items/search","custom-menu-content":"{{$:/plugins/tiddlywiki/menubar/items/search}}","description":"Search","caption":"Search","tags":"$:/tags/MenuBar","text":"<$set name=\"searchTiddler\" value=\"$:/temp/menubarsearch\">\n\n<span style=\"margin: 0 0.5em;\">\n\n<$edit-text tiddler=<<searchTiddler>> tag=\"input\" type=\"search\" focusPopup=\"$:/state/popup/menubar-search-dropdown\" class=\"tc-popup-handle tc-menu-show-when-wide\" placeholder=\"Search...\" default=\"\"/>\n\n</span>\n\n<$reveal tag=\"div\" class=\"tc-block-dropdown-wrapper\" state=\"$:/state/popup/menubar-search-dropdown\" type=\"nomatch\" text=\"\" default=\"\">\n\n<div  class=\"tc-block-dropdown tc-search-drop-down\">\n\n<$list filter=\"[<searchTiddler>get[text]minlength[1]]\" emptyMessage=\"\"\"<div class=\"tc-search-results\">Type your search terms</div>\"\"\" variable=\"ignore\">\n\n<$list filter=\"[<searchTiddler>get[text]minlength{$:/config/Search/MinLength}limit[1]]\" emptyMessage=\"\"\"<div class=\"tc-search-results\">{{$:/language/Search/Search/TooShort}}</div>\"\"\" variable=\"listItem\">\n\n{{$:/core/ui/SearchResults}}\n\n</$list>\n\n</$list>\n\n</div>\n\n</$reveal>\n\n</$set>\n"},"$:/plugins/tiddlywiki/menubar/items/server":{"title":"$:/plugins/tiddlywiki/menubar/items/server","tags":"$:/tags/MenuBar","description":"Server options","caption":"Server","custom-menu-content":"<$transclude tiddler=\"$:/plugins/tiddlywiki/menubar/items/server\" mode=\"inline\"/>","text":"<$list filter=\"[[$:/status/IsLoggedIn]get[text]else[no]match[yes]]\" variable=\"ignore\">\n<$transclude tiddler=\"$:/core/ui/Buttons/save-wiki\" mode=\"inline\"/>\n</$list>\n<$list filter=\"[[$:/status/IsLoggedIn]get[text]else[no]match[no]]\" variable=\"ignore\">\n<$button message=\"tm-login\">\nLogin\n</$button>\n</$list>\n"},"$:/plugins/tiddlywiki/menubar/items/sidebar":{"title":"$:/plugins/tiddlywiki/menubar/items/sidebar","caption":"Sidebar","description":"Sidebar","is-dropdown":"yes","tags":"$:/tags/MenuBar","text":"<$scrollable fallthrough=\"none\" class=\"tc-popup-keep tc-menubar-dropdown-sidebar\">\n\n<$transclude tiddler=\"$:/core/ui/SideBarSegments/tabs\" mode=\"inline\"/>\n\n</$scrollable>\n"},"$:/plugins/tiddlywiki/menubar/items/topleftbar":{"title":"$:/plugins/tiddlywiki/menubar/items/topleftbar","tags":"$:/tags/MenuBar","description":"Items from $:/tags/TopLeftBar","caption":"Legacy Top Left Bar","custom-menu-content":"<$transclude tiddler=\"$:/plugins/tiddlywiki/menubar/items/topleftbar\" mode=\"inline\"/>","text":"<$list filter=\"[all[shadows+tiddlers]tag[$:/tags/TopLeftBar]!has[draft.of]]\" variable=\"listItem\" storyview=\"pop\">\n\n<$transclude tiddler=<<listItem>> mode=\"inline\"/>\n\n</$list>"},"$:/plugins/tiddlywiki/menubar/items/toprightbar":{"title":"$:/plugins/tiddlywiki/menubar/items/toprightbar","tags":"$:/tags/MenuBar","description":"Items from $:/tags/TopRightBar","caption":"Legacy Top Right Bar","custom-menu-content":"<$transclude tiddler=\"$:/plugins/tiddlywiki/menubar/items/toprightbar\" mode=\"inline\"/>","custom-menu-styles-wide":"float: right;","text":"<$list filter=\"[all[shadows+tiddlers]tag[$:/tags/TopRightBar]!has[draft.of]reverse[]]\" variable=\"listItem\" storyview=\"pop\">\n\n<$transclude tiddler=<<listItem>> mode=\"inline\"/>\n\n</$list>"},"$:/plugins/tiddlywiki/menubar/menu":{"title":"$:/plugins/tiddlywiki/menubar/menu","tags":"$:/tags/PageTemplate","text":"\\define menubar-inner(size)\n<ul class=\"tc-menubar-list\">\n<$list filter=\"[all[shadows+tiddlers]tag[$:/tags/MenuBar]!has[draft.of]]\">\n<$list filter=\"[<currentTiddler>addprefix[$:/config/plugins/menubar/MenuItems/Visibility/]get[text]] ~show +[match[show]]\" variable=\"ignore\">\n<$list filter=\"[[$size$]match[wide]] ~[<currentTiddler>get[show-when]match[$size$]] ~[{$:/state/popup/menubar/hamburger}match[yes]]\" variable=\"ignore\">\n<li style={{!!custom-menu-styles-$size$}} class={{{ [<currentTiddler>get[show-when]addprefix[tc-menubar-]] tc-menubar-item +[join[ ]] }}}>\n<$list filter=\"[<currentTiddler>!is-dropdown[yes]]\" variable=\"listItem\" emptyMessage=\"\"\"\n\t<!-- Dropdown -->\n\t<$set name=\"dropdown-state\" value=<<qualify \"$:/state/popup/topmenu/dropdown/\">>>\n\t<$set name=\"dropdown-state\" value={{{ [<dropdown-state>addsuffix<currentTiddler>] }}}>\n\t<$button popup=<<dropdown-state>> selectedClass=\"tc-selected\">\n\t<$set name=\"tv-wikilinks\" value=\"no\">\n\t<$transclude field=\"caption\" mode=\"inline\"/>\n\t<$text text=\" \"/>\n\t<span class=\"tc-menubar-dropdown-arrow\">\n\t<$transclude tiddler=\"$:/core/images/down-arrow\" mode=\"inline\"/>\n\t</span>\n\t</$set>\n\t</$button>\n\t</$set>\n\t</$set>\n\"\"\">\n<$list filter=\"[<currentTiddler>has[custom-menu-content]]\" variable=\"listItem\" emptyMessage=\"\"\"\n\t<!-- Link -->\n\t<$link to={{!!target}}>\n\t<$set name=\"tv-wikilinks\" value=\"no\">\n\t<$transclude field=\"caption\" mode=\"inline\"/>\n\t</$set>\n\t</$link>\n\"\"\">\n<!-- Custom content -->\n<$transclude field=\"custom-menu-content\" mode=\"inline\"/>\n</$list>\n</$list>\n</li>\n</$list>\n</$list>\n</$list>\n</ul>\n\\end\n\n<$list filter=\"[all[shadows+tiddlers]tag[$:/tags/MenuBar]!has[draft.of]limit[1]]\" variable=\"listItem\">\n<nav class=\"tc-menubar tc-adjust-top-of-scroll\">\n<div class=\"tc-menubar-narrow\">\n<<menubar-inner narrow>>\n</div>\n<div class=\"tc-menubar-wide\">\n<<menubar-inner wide>>\n</div>\n<div style=\"clear:both;\"/>\n<$list filter=\"[all[shadows+tiddlers]tag[$:/tags/MenuBar]!has[draft.of]is-dropdown[yes]]\">\n<$list filter=\"[<currentTiddler>addprefix[$:/config/plugins/menubar/MenuItems/Visibility/]get[text]] ~show +[match[show]]\" variable=\"ignore\">\n<$set name=\"dropdown-state\" value=<<qualify \"$:/state/popup/topmenu/dropdown/\">>>\n<$set name=\"dropdown-state\" value={{{ [<dropdown-state>addsuffix<currentTiddler>] }}}>\n<$reveal type=\"popup\" state=<<dropdown-state>> class={{{ [<currentTiddler>get[dropdown]get[class]] }}} tag=\"div\">\n<div class=\"tc-drop-down\">\n<$transclude/>\n</div>\n</$reveal>\n</$set>\n</$set>\n</$list>\n</$list>\n</nav>\n</$list>\n"},"$:/core/ui/PageTemplate/topleftbar":{"title":"$:/core/ui/PageTemplate/topleftbar","text":"<!-- The menubar plugin overrides this tiddler to remove the core top left menu. The menu items that it would include are instead included in the menubar -->"},"$:/core/ui/PageTemplate/toprightbar":{"title":"$:/core/ui/PageTemplate/toprightbar","text":"<!-- The menubar plugin overrides this tiddler to remove the core top right menu. The menu items that it would include are instead included in the menubar -->"},"$:/plugins/tiddlywiki/menubar/readme":{"title":"$:/plugins/tiddlywiki/menubar/readme","text":"!! Introduction\n\nThis plugin provides a menu bar with the following features:\n\n* Menu items take the form of simple text links, dropdowns, or entirely custom content\n* Menu items can be individually enabled via the control panel\n* Responds to reduced screen width by abbreviating the menu items to a \"hamburger\" dropdown\n\n!! Menu Item Tiddlers\n\nMenu items are tagged <<tag $:/tags/MenuBar>>. The following fields are used by this plugin:\n\n|!Field Name |!Purpose |\n|title |Each menu item must have a unique title (not shown to the user) |\n|description |Description for use in listings |\n|tags |Must contain `$:/tags/MenuBar` |\n|caption |The text that is displayed for the menu item. Avoid links, using `~` to suppress CamelCase links if required |\n|target |For simple link menu items specifies a tiddler title as the target of the link |\n|is-dropdown |Set to `yes` to indicate a dropdown menu item |\n|text |For dropdown menu items, specifies the body of the dropdown |\n|custom-menu-content |Optional wikitext to be displayed in place of the caption |\n|custom-menu-styles-wide |Optional string of styles to be applied to menu item when the menubar is wide |\n|custom-menu-styles-narrow |Optional string of styles to be applied to menu item when the menubar is narrow |\n\nCustom menu items should make sure that the clickable link or button is an immediate child, and not wrapped in another element.\n\nNote that menu items can be pushed to the right of the menu bar setting the ''custom-menu-styles'' field to `float: right;`.\n"},"$:/plugins/tiddlywiki/menubar/styles":{"title":"$:/plugins/tiddlywiki/menubar/styles","tags":"[[$:/tags/Stylesheet]]","text":"\\define breakpoint-plus-one()\n<$text text={{{ [{$:/config/plugins/menubar/breakpoint}removesuffix[px]add[1]addsuffix[px]] }}} />\n\\end\n\n\\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline\n\nnav.tc-menubar {\n\tposition: fixed;\n\tz-index: 850;\n\tdisplay: inline-block;\n\ttop: 0;\n\tright: 0;\n\tleft: 0;\n}\n\nnav.tc-menubar ul.tc-menubar-list {\n\tposition: relative;\n\tlist-style-type: none;\n\tmargin: 0;\n\tpadding: 0 0 0 42px;\n\tbackground: <<colour background>>;\n\tbackground: <<colour menubar-background>>;\n\t<<box-shadow \"1px 1px 5px rgba(0, 0, 0, 0.3)\">>\n}\n\n@media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {\n\n\thtml nav.tc-menubar ul.tc-menubar-list {\n\t\tpadding: 0 0 0 8px;\n\t}\n\n}\n\nnav.tc-menubar li.tc-menubar-item {\n\tdisplay: inline-block;\n\tmargin: 0;\n\tpadding: 0;\n}\n\nnav.tc-menubar .tc-menubar-narrow li.tc-menubar-item {\n\tdisplay: block;\n}\n\nnav.tc-menubar li.tc-menubar-item > a,\nnav.tc-menubar li.tc-menubar-item > button {\n\tdisplay: inline-block;\n/*\ttext-transform: uppercase; */\n\tline-height: 1;\n\tfont-weight: 700;\n\tcolor: <<colour foreground>>;\n\tcolor: <<colour menubar-foreground>>;\n\tfill: <<colour foreground>>;\n\tfill: <<colour menubar-foreground>>;\n\ttext-decoration: none;\n\tpadding: 0.5em;\n\tmargin: 0;\n\tbackground: none;\n\tborder: none;\n\tcursor: pointer;\n\tborder-radius: 0;\n\ttext-decoration: none;\n}\n\nnav.tc-menubar li.tc-menubar-item > a.tc-selected,\nnav.tc-menubar li.tc-menubar-item > button.tc-selected {\n\tbackground: <<colour foreground>>;\n\tbackground: <<colour menubar-foreground>>;\n\tcolor: <<colour background>>;\n\tcolor: <<colour menubar-background>>;\n\tfill: <<colour background>>;\n\tfill: <<colour menubar-background>>;\n}\n\nnav.tc-menubar li.tc-menubar-item svg {\n\ttransition: none;\n\twidth: 1em;\n\theight: 1em;\n\tfill: <<colour foreground>>;\n\tfill: <<colour menubar-foreground>>;\n}\n\nnav.tc-menubar li.tc-menubar-item .tc-menubar-dropdown-arrow svg {\n\twidth: 0.5em;\n\theight: 0.5em;\n}\n\nnav.tc-menubar li.tc-menubar-item > a.tc-selected svg,\nnav.tc-menubar li.tc-menubar-item > button.tc-selected svg {\n\tfill: <<colour background>>;\n\tfill: <<colour menubar-background>>;\n}\n\nnav.tc-menubar li.tc-menubar-item > a:hover,\nnav.tc-menubar li.tc-menubar-item > button:hover svg,\nnav.tc-menubar li.tc-menubar-item > button:hover {\n\tbackground: <<colour foreground>>;\n\tbackground: <<colour menubar-foreground>>;\n\tcolor: <<colour background>>;\n\tcolor: <<colour menubar-background>>;\n\tfill: <<colour background>>;\n\tfill: <<colour menubar-background>>;\n\tborder-radius: 0;\n\ttext-decoration: none;\n}\n\nnav.tc-menubar li.tc-menubar-item > a:active,\nnav.tc-menubar li.tc-menubar-item > button:active svg,\nnav.tc-menubar li.tc-menubar-item > button:active {\n\tbackground: <<colour foreground>>;\n\tbackground: <<colour menubar-foreground>>;\n\tcolor: <<colour background>>;\n\tcolor: <<colour menubar-background>>;\n\tfill: <<colour background>>;\n\tfill: <<colour menubar-background>>;\n\tborder-radius: 0;\n\ttext-decoration: none;\n}\n\nnav.tc-menubar .tc-drop-down,\nnav.tc-menubar .tc-block-dropdown {\n\tmax-width: 70vw;\n\tmax-height: 70vh;\n\toverflow: auto;\n}\n\nnav.tc-menubar .tc-drop-down a {\n\ttext-decoration: none;\n}\n\nnav.tc-menubar .tc-drop-down .tc-table-of-contents button {\n\tdisplay: inline-block;\n\twidth: auto;\n}\n\nnav.tc-menubar .tc-drop-down ol {\n\tmargin: 0;\n}\n\nnav.tc-menubar .tc-drop-down .tc-menubar-dropdown-sidebar a,\nnav.tc-menubar .tc-drop-down .tc-menubar-dropdown-sidebar button {\n\tdisplay: inline;\n\twidth: auto;\n}\n\nnav.tc-menubar .tc-more-sidebar > .tc-tab-set > .tc-tab-buttons > button {\n\tdisplay: block;\n\twidth: 100%;\n}\n\n@media (max-width: {{$:/config/plugins/menubar/breakpoint}}) {\n\n\t.tc-menubar-wide {\n\t\tdisplay: none;\n\t}\n\n}\n\n@media (min-width: <<breakpoint-plus-one>>) {\n\n\tnav.tc-menubar li.tc-menubar-item.tc-menubar-narrow,\n\t.tc-menubar-narrow {\n\t\tdisplay: none;\n\t}\n\n}\n\n\n"},"$:/tags/MenuBar":{"title":"$:/tags/MenuBar","list":"$:/plugins/tiddlywiki/menubar/items/hamburger $:/plugins/tiddlywiki/menubar/items/topleftbar $:/plugins/tiddlywiki/menubar/items/contents $:/plugins/tiddlywiki/menubar/items/search $:/plugins/tiddlywiki/menubar/items/pagecontrols $:/plugins/tiddlywiki/menubar/items/server $:/plugins/tiddlywiki/menubar/items/toprightbar"}}}