[{"data":1,"prerenderedAt":1751},["ShallowReactive",2],{"i-ph:sidebar":3,"i-ph:caret-left":8,"i-ph:caret-right":10,"components-sidebar":12,"i-ph:code":1739,"i-ph:user":1741,"i-ph:sign-out":1743,"i-ph:sidebar-simple":1745,"i-ph:house":1747,"i-ph:phone":1749},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,256,false,"\u003Cpath fill=\"currentColor\" d=\"M216 40H40a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16M40 152h16a8 8 0 0 0 0-16H40v-16h16a8 8 0 0 0 0-16H40V88h16a8 8 0 0 0 0-16H40V56h40v144H40Zm176 48H96V56h120z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"currentColor\" d=\"M165.66 202.34a8 8 0 0 1-11.32 11.32l-80-80a8 8 0 0 1 0-11.32l80-80a8 8 0 0 1 11.32 11.32L91.31 128Z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"currentColor\" d=\"m181.66 133.66l-80 80a8 8 0 0 1-11.32-11.32L164.69 128L90.34 53.66a8 8 0 0 1 11.32-11.32l80 80a8 8 0 0 1 0 11.32\"\u002F>",{"id":13,"title":14,"body":15,"description":25,"extension":1733,"meta":1734,"navigation":139,"path":1735,"seo":1736,"stem":1737,"__hash__":1738},"docs\u002Fdocs\u002Fcomponents\u002Fsidebar.md","Sidebar",{"type":16,"value":17,"toc":1726},"minimark",[18,22,26,39,981,986,1087,1091,1098,1127,1131,1134,1190,1287,1291,1722],[19,20,14],"h1",{"id":21},"sidebar",[23,24,25],"p",{},"A responsive sidebar component that can be used for navigation, menus, or any other content that needs to be displayed in a side panel. It supports both full-width and mini modes, and can be configured to appear on hover.",[23,27,28,29,33,34],{},"Please note, Sidebar must always be placed within a ",[30,31,32],"code",{},"\u003Cdiv class=\"vui-sidebar-layout\" \u002F>"," element. Similar to ",[35,36,38],"a",{"href":37},"\u002Fdocs\u002Fcomponents\u002Fdrawer","Drawer",[40,41,43],"sidebar-example",{"source-path":42},"Sidebar\u002FSidebar.vue",[44,45,50],"pre",{"className":46,"code":47,"language":48,"meta":49,"style":49},"language-vue shiki shiki-themes vitesse-dark vitesse-light vitesse-dark","\u003Cscript>\nimport { Button, DropdownItem, Flex, Sidebar } from '@dolanske\u002Fvui'\nimport { ref } from 'vue'\n\nconst isOpen = ref(true)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"vui-sidebar-layout\" :style=\"{ height: '512px' }\">\n    \u003CSidebar :mini=\"!isOpen\">\n      \u003Ctemplate #header>\n        \u003Cimg src=\"https:\u002F\u002Fdolansky.dev\u002Fbackgrounds\u002Fstar.png\" class=\"sidebar-logo\" width=\"40\" alt=\"\" style=\"filter: invert(1);\">\n      \u003C\u002Ftemplate>\n      \u003CDropdownItem>\n        \u003Ctemplate #icon>\n          \u003CIconHouse \u002F>\n        \u003C\u002Ftemplate>\n        Home\n      \u003C\u002FDropdownItem>\n      \u003CDropdownItem>\n        \u003Ctemplate #icon>\n          \u003CIconUser \u002F>\n        \u003C\u002Ftemplate>\n        About\n      \u003C\u002FDropdownItem>\n      \u003CDropdownItem>\n        \u003Ctemplate #icon>\n          \u003CIconPhone \u002F>\n        \u003C\u002Ftemplate>\n        Contact\n      \u003C\u002FDropdownItem>\n      \u003Ctemplate #footer>\n        \u003CFlex y-center x-centerd>\n          \u003CAvatar v-show=\"isOpen\" size=\"m\" \u002F>\n          \u003Cspan v-show=\"isOpen\" class=\"flex-1\">dolanske\u003C\u002Fspan>\n          \u003CButton plain size=\"s\">\n            \u003CIconSignOut \u002F>\n          \u003C\u002FButton>\n        \u003C\u002FFlex>\n      \u003C\u002Ftemplate>\n    \u003C\u002FSidebar>\n    \u003Cmain class=\"p-xl\">\n      \u003CFlex y-center class=\"mb-l\">\n        \u003CButton plain size=\"s\" @click=\"isOpen = !isOpen\">\n          \u003CIconSidebarSimple \u002F>\n        \u003C\u002FButton>\n        \u003Ch4 style=\"margin: 0;\">\n          My page\n        \u003C\u002Fh4>\n      \u003C\u002FFlex>\n      \u003Cp>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque deleniti asperiores quibusdam et commodi deserunt libero officia doloremque. Possimus ipsum sunt odit culpa consequatur hic reiciendis doloremque consequuntur tempore excepturi?\u003C\u002Fp>\n      \u003Chr>\n      \u003Cp>Yes that's correct\u003C\u002Fp>\n      \u003Cul>\n        \u003Cli>Secure\u003C\u002Fli>\n        \u003Cli>Reliant\u003C\u002Fli>\n        \u003Cli>Ublumf\u003C\u002Fli>\n      \u003C\u002Ful>\n    \u003C\u002Fmain>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue","",[30,51,52,68,114,134,141,166,176,181,191,228,250,266,332,342,352,366,378,388,395,404,413,426,436,445,451,460,469,482,492,501,507,516,530,546,580,620,644,655,665,674,683,693,714,736,769,779,788,809,815,824,833,851,861,879,889,908,926,944,953,962,972],{"__ignoreMap":49},[53,54,57,61,65],"span",{"class":55,"line":56},"line",1,[53,58,60],{"class":59},"sP76a","\u003C",[53,62,64],{"class":63},"sKpE2","script",[53,66,67],{"class":59},">\n",[53,69,71,74,77,81,84,87,89,92,94,97,100,103,107,111],{"class":55,"line":70},2,[53,72,73],{"class":63},"import",[53,75,76],{"class":59}," {",[53,78,80],{"class":79},"sflEz"," Button",[53,82,83],{"class":59},",",[53,85,86],{"class":79}," DropdownItem",[53,88,83],{"class":59},[53,90,91],{"class":79}," Flex",[53,93,83],{"class":59},[53,95,96],{"class":79}," Sidebar",[53,98,99],{"class":59}," }",[53,101,102],{"class":63}," from",[53,104,106],{"class":105},"sBR95"," '",[53,108,110],{"class":109},"sfmH-","@dolanske\u002Fvui",[53,112,113],{"class":105},"'\n",[53,115,117,119,121,124,126,128,130,132],{"class":55,"line":116},3,[53,118,73],{"class":63},[53,120,76],{"class":59},[53,122,123],{"class":79}," ref",[53,125,99],{"class":59},[53,127,102],{"class":63},[53,129,106],{"class":105},[53,131,48],{"class":109},[53,133,113],{"class":105},[53,135,137],{"class":55,"line":136},4,[53,138,140],{"emptyLinePlaceholder":139},true,"\n",[53,142,144,148,151,154,157,160,163],{"class":55,"line":143},5,[53,145,147],{"class":146},"sCMWV","const",[53,149,150],{"class":79}," isOpen",[53,152,153],{"class":59}," =",[53,155,123],{"class":156},"sRTv0",[53,158,159],{"class":59},"(",[53,161,162],{"class":63},"true",[53,164,165],{"class":59},")\n",[53,167,169,172,174],{"class":55,"line":168},6,[53,170,171],{"class":59},"\u003C\u002F",[53,173,64],{"class":63},[53,175,67],{"class":59},[53,177,179],{"class":55,"line":178},7,[53,180,140],{"emptyLinePlaceholder":139},[53,182,184,186,189],{"class":55,"line":183},8,[53,185,60],{"class":59},[53,187,188],{"class":63},"template",[53,190,67],{"class":59},[53,192,194,197,200,203,206,209,212,214,217,219,221,224,226],{"class":55,"line":193},9,[53,195,196],{"class":59},"  \u003C",[53,198,199],{"class":63},"div",[53,201,202],{"class":79}," class",[53,204,205],{"class":59},"=",[53,207,208],{"class":105},"\"",[53,210,211],{"class":109},"vui-sidebar-layout",[53,213,208],{"class":105},[53,215,216],{"class":79}," :style",[53,218,205],{"class":59},[53,220,208],{"class":105},[53,222,223],{"class":109},"{ height: '512px' }",[53,225,208],{"class":105},[53,227,67],{"class":59},[53,229,231,234,236,239,241,243,246,248],{"class":55,"line":230},10,[53,232,233],{"class":59},"    \u003C",[53,235,14],{"class":63},[53,237,238],{"class":79}," :mini",[53,240,205],{"class":59},[53,242,208],{"class":105},[53,244,245],{"class":109},"!isOpen",[53,247,208],{"class":105},[53,249,67],{"class":59},[53,251,253,256,258,261,264],{"class":55,"line":252},11,[53,254,255],{"class":59},"      \u003C",[53,257,188],{"class":63},[53,259,260],{"class":59}," #",[53,262,263],{"class":156},"header",[53,265,67],{"class":59},[53,267,269,272,275,278,280,282,285,287,289,291,293,296,298,301,303,305,308,310,313,315,318,321,323,325,328,330],{"class":55,"line":268},12,[53,270,271],{"class":59},"        \u003C",[53,273,274],{"class":63},"img",[53,276,277],{"class":79}," src",[53,279,205],{"class":59},[53,281,208],{"class":105},[53,283,284],{"class":109},"https:\u002F\u002Fdolansky.dev\u002Fbackgrounds\u002Fstar.png",[53,286,208],{"class":105},[53,288,202],{"class":79},[53,290,205],{"class":59},[53,292,208],{"class":105},[53,294,295],{"class":109},"sidebar-logo",[53,297,208],{"class":105},[53,299,300],{"class":79}," width",[53,302,205],{"class":59},[53,304,208],{"class":105},[53,306,307],{"class":109},"40",[53,309,208],{"class":105},[53,311,312],{"class":79}," alt",[53,314,205],{"class":59},[53,316,317],{"class":105},"\"\"",[53,319,320],{"class":79}," style",[53,322,205],{"class":59},[53,324,208],{"class":105},[53,326,327],{"class":109},"filter: invert(1);",[53,329,208],{"class":105},[53,331,67],{"class":59},[53,333,335,338,340],{"class":55,"line":334},13,[53,336,337],{"class":59},"      \u003C\u002F",[53,339,188],{"class":63},[53,341,67],{"class":59},[53,343,345,347,350],{"class":55,"line":344},14,[53,346,255],{"class":59},[53,348,349],{"class":63},"DropdownItem",[53,351,67],{"class":59},[53,353,355,357,359,361,364],{"class":55,"line":354},15,[53,356,271],{"class":59},[53,358,188],{"class":63},[53,360,260],{"class":59},[53,362,363],{"class":156},"icon",[53,365,67],{"class":59},[53,367,369,372,375],{"class":55,"line":368},16,[53,370,371],{"class":59},"          \u003C",[53,373,374],{"class":63},"IconHouse",[53,376,377],{"class":59}," \u002F>\n",[53,379,381,384,386],{"class":55,"line":380},17,[53,382,383],{"class":59},"        \u003C\u002F",[53,385,188],{"class":63},[53,387,67],{"class":59},[53,389,391],{"class":55,"line":390},18,[53,392,394],{"class":393},"sX1ls","        Home\n",[53,396,398,400,402],{"class":55,"line":397},19,[53,399,337],{"class":59},[53,401,349],{"class":63},[53,403,67],{"class":59},[53,405,407,409,411],{"class":55,"line":406},20,[53,408,255],{"class":59},[53,410,349],{"class":63},[53,412,67],{"class":59},[53,414,416,418,420,422,424],{"class":55,"line":415},21,[53,417,271],{"class":59},[53,419,188],{"class":63},[53,421,260],{"class":59},[53,423,363],{"class":156},[53,425,67],{"class":59},[53,427,429,431,434],{"class":55,"line":428},22,[53,430,371],{"class":59},[53,432,433],{"class":63},"IconUser",[53,435,377],{"class":59},[53,437,439,441,443],{"class":55,"line":438},23,[53,440,383],{"class":59},[53,442,188],{"class":63},[53,444,67],{"class":59},[53,446,448],{"class":55,"line":447},24,[53,449,450],{"class":393},"        About\n",[53,452,454,456,458],{"class":55,"line":453},25,[53,455,337],{"class":59},[53,457,349],{"class":63},[53,459,67],{"class":59},[53,461,463,465,467],{"class":55,"line":462},26,[53,464,255],{"class":59},[53,466,349],{"class":63},[53,468,67],{"class":59},[53,470,472,474,476,478,480],{"class":55,"line":471},27,[53,473,271],{"class":59},[53,475,188],{"class":63},[53,477,260],{"class":59},[53,479,363],{"class":156},[53,481,67],{"class":59},[53,483,485,487,490],{"class":55,"line":484},28,[53,486,371],{"class":59},[53,488,489],{"class":63},"IconPhone",[53,491,377],{"class":59},[53,493,495,497,499],{"class":55,"line":494},29,[53,496,383],{"class":59},[53,498,188],{"class":63},[53,500,67],{"class":59},[53,502,504],{"class":55,"line":503},30,[53,505,506],{"class":393},"        Contact\n",[53,508,510,512,514],{"class":55,"line":509},31,[53,511,337],{"class":59},[53,513,349],{"class":63},[53,515,67],{"class":59},[53,517,519,521,523,525,528],{"class":55,"line":518},32,[53,520,255],{"class":59},[53,522,188],{"class":63},[53,524,260],{"class":59},[53,526,527],{"class":156},"footer",[53,529,67],{"class":59},[53,531,533,535,538,541,544],{"class":55,"line":532},33,[53,534,271],{"class":59},[53,536,537],{"class":63},"Flex",[53,539,540],{"class":79}," y-center",[53,542,543],{"class":79}," x-centerd",[53,545,67],{"class":59},[53,547,549,551,554,557,559,561,564,566,569,571,573,576,578],{"class":55,"line":548},34,[53,550,371],{"class":59},[53,552,553],{"class":63},"Avatar",[53,555,556],{"class":79}," v-show",[53,558,205],{"class":59},[53,560,208],{"class":105},[53,562,563],{"class":109},"isOpen",[53,565,208],{"class":105},[53,567,568],{"class":79}," size",[53,570,205],{"class":59},[53,572,208],{"class":105},[53,574,575],{"class":109},"m",[53,577,208],{"class":105},[53,579,377],{"class":59},[53,581,583,585,587,589,591,593,595,597,599,601,603,606,608,611,614,616,618],{"class":55,"line":582},35,[53,584,371],{"class":59},[53,586,53],{"class":63},[53,588,556],{"class":79},[53,590,205],{"class":59},[53,592,208],{"class":105},[53,594,563],{"class":109},[53,596,208],{"class":105},[53,598,202],{"class":79},[53,600,205],{"class":59},[53,602,208],{"class":105},[53,604,605],{"class":109},"flex-1",[53,607,208],{"class":105},[53,609,610],{"class":59},">",[53,612,613],{"class":393},"dolanske",[53,615,171],{"class":59},[53,617,53],{"class":63},[53,619,67],{"class":59},[53,621,623,625,628,631,633,635,637,640,642],{"class":55,"line":622},36,[53,624,371],{"class":59},[53,626,627],{"class":63},"Button",[53,629,630],{"class":79}," plain",[53,632,568],{"class":79},[53,634,205],{"class":59},[53,636,208],{"class":105},[53,638,639],{"class":109},"s",[53,641,208],{"class":105},[53,643,67],{"class":59},[53,645,647,650,653],{"class":55,"line":646},37,[53,648,649],{"class":59},"            \u003C",[53,651,652],{"class":63},"IconSignOut",[53,654,377],{"class":59},[53,656,658,661,663],{"class":55,"line":657},38,[53,659,660],{"class":59},"          \u003C\u002F",[53,662,627],{"class":63},[53,664,67],{"class":59},[53,666,668,670,672],{"class":55,"line":667},39,[53,669,383],{"class":59},[53,671,537],{"class":63},[53,673,67],{"class":59},[53,675,677,679,681],{"class":55,"line":676},40,[53,678,337],{"class":59},[53,680,188],{"class":63},[53,682,67],{"class":59},[53,684,686,689,691],{"class":55,"line":685},41,[53,687,688],{"class":59},"    \u003C\u002F",[53,690,14],{"class":63},[53,692,67],{"class":59},[53,694,696,698,701,703,705,707,710,712],{"class":55,"line":695},42,[53,697,233],{"class":59},[53,699,700],{"class":63},"main",[53,702,202],{"class":79},[53,704,205],{"class":59},[53,706,208],{"class":105},[53,708,709],{"class":109},"p-xl",[53,711,208],{"class":105},[53,713,67],{"class":59},[53,715,717,719,721,723,725,727,729,732,734],{"class":55,"line":716},43,[53,718,255],{"class":59},[53,720,537],{"class":63},[53,722,540],{"class":79},[53,724,202],{"class":79},[53,726,205],{"class":59},[53,728,208],{"class":105},[53,730,731],{"class":109},"mb-l",[53,733,208],{"class":105},[53,735,67],{"class":59},[53,737,739,741,743,745,747,749,751,753,755,758,760,762,765,767],{"class":55,"line":738},44,[53,740,271],{"class":59},[53,742,627],{"class":63},[53,744,630],{"class":79},[53,746,568],{"class":79},[53,748,205],{"class":59},[53,750,208],{"class":105},[53,752,639],{"class":109},[53,754,208],{"class":105},[53,756,757],{"class":79}," @click",[53,759,205],{"class":59},[53,761,208],{"class":105},[53,763,764],{"class":109},"isOpen = !isOpen",[53,766,208],{"class":105},[53,768,67],{"class":59},[53,770,772,774,777],{"class":55,"line":771},45,[53,773,371],{"class":59},[53,775,776],{"class":63},"IconSidebarSimple",[53,778,377],{"class":59},[53,780,782,784,786],{"class":55,"line":781},46,[53,783,383],{"class":59},[53,785,627],{"class":63},[53,787,67],{"class":59},[53,789,791,793,796,798,800,802,805,807],{"class":55,"line":790},47,[53,792,271],{"class":59},[53,794,795],{"class":63},"h4",[53,797,320],{"class":79},[53,799,205],{"class":59},[53,801,208],{"class":105},[53,803,804],{"class":109},"margin: 0;",[53,806,208],{"class":105},[53,808,67],{"class":59},[53,810,812],{"class":55,"line":811},48,[53,813,814],{"class":393},"          My page\n",[53,816,818,820,822],{"class":55,"line":817},49,[53,819,383],{"class":59},[53,821,795],{"class":63},[53,823,67],{"class":59},[53,825,827,829,831],{"class":55,"line":826},50,[53,828,337],{"class":59},[53,830,537],{"class":63},[53,832,67],{"class":59},[53,834,836,838,840,842,845,847,849],{"class":55,"line":835},51,[53,837,255],{"class":59},[53,839,23],{"class":63},[53,841,610],{"class":59},[53,843,844],{"class":393},"Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque deleniti asperiores quibusdam et commodi deserunt libero officia doloremque. Possimus ipsum sunt odit culpa consequatur hic reiciendis doloremque consequuntur tempore excepturi?",[53,846,171],{"class":59},[53,848,23],{"class":63},[53,850,67],{"class":59},[53,852,854,856,859],{"class":55,"line":853},52,[53,855,255],{"class":59},[53,857,858],{"class":63},"hr",[53,860,67],{"class":59},[53,862,864,866,868,870,873,875,877],{"class":55,"line":863},53,[53,865,255],{"class":59},[53,867,23],{"class":63},[53,869,610],{"class":59},[53,871,872],{"class":393},"Yes that's correct",[53,874,171],{"class":59},[53,876,23],{"class":63},[53,878,67],{"class":59},[53,880,882,884,887],{"class":55,"line":881},54,[53,883,255],{"class":59},[53,885,886],{"class":63},"ul",[53,888,67],{"class":59},[53,890,892,894,897,899,902,904,906],{"class":55,"line":891},55,[53,893,271],{"class":59},[53,895,896],{"class":63},"li",[53,898,610],{"class":59},[53,900,901],{"class":393},"Secure",[53,903,171],{"class":59},[53,905,896],{"class":63},[53,907,67],{"class":59},[53,909,911,913,915,917,920,922,924],{"class":55,"line":910},56,[53,912,271],{"class":59},[53,914,896],{"class":63},[53,916,610],{"class":59},[53,918,919],{"class":393},"Reliant",[53,921,171],{"class":59},[53,923,896],{"class":63},[53,925,67],{"class":59},[53,927,929,931,933,935,938,940,942],{"class":55,"line":928},57,[53,930,271],{"class":59},[53,932,896],{"class":63},[53,934,610],{"class":59},[53,936,937],{"class":393},"Ublumf",[53,939,171],{"class":59},[53,941,896],{"class":63},[53,943,67],{"class":59},[53,945,947,949,951],{"class":55,"line":946},58,[53,948,337],{"class":59},[53,950,886],{"class":63},[53,952,67],{"class":59},[53,954,956,958,960],{"class":55,"line":955},59,[53,957,688],{"class":59},[53,959,700],{"class":63},[53,961,67],{"class":59},[53,963,965,968,970],{"class":55,"line":964},60,[53,966,967],{"class":59},"  \u003C\u002F",[53,969,199],{"class":63},[53,971,67],{"class":59},[53,973,975,977,979],{"class":55,"line":974},61,[53,976,171],{"class":59},[53,978,188],{"class":63},[53,980,67],{"class":59},[982,983,985],"h3",{"id":984},"props","Props",[987,988,989,1005],"table",{},[990,991,992],"thead",{},[993,994,995,999,1002],"tr",{},[996,997,998],"th",{},"Name",[996,1000,1001],{},"Default",[996,1003,1004],{},"Type",[1006,1007,1008,1031,1051,1069],"tbody",{},[993,1009,1010,1016,1021],{},[1011,1012,1013],"td",{},[30,1014,1015],{},"width",[1011,1017,1018],{},[30,1019,1020],{},"224",[1011,1022,1023,1026,1027,1030],{},[30,1024,1025],{},"number"," ",[1028,1029],"br",{}," Width of the sidebar in pixels when in full mode",[993,1032,1033,1038,1043],{},[1011,1034,1035],{},[30,1036,1037],{},"mini",[1011,1039,1040],{},[30,1041,1042],{},"false",[1011,1044,1045,1026,1048,1050],{},[30,1046,1047],{},"boolean",[1028,1049],{}," Whether to display the sidebar in mini mode (collapsed)",[993,1052,1053,1058,1062],{},[1011,1054,1055],{},[30,1056,1057],{},"appear",[1011,1059,1060],{},[30,1061,1042],{},[1011,1063,1064,1026,1066,1068],{},[30,1065,1047],{},[1028,1067],{}," Whether the sidebar should appear on hover at the left edge of the screen",[993,1070,1071,1076,1080],{},[1011,1072,1073],{},[30,1074,1075],{},"floaty",[1011,1077,1078],{},[30,1079,1042],{},[1011,1081,1082,1026,1084,1086],{},[30,1083,1047],{},[1028,1085],{}," Whether to add edges of background around the sidebar",[982,1088,1090],{"id":1089},"events","Events",[23,1092,1093,1094,1097],{},"Sidebar is controlled via ",[30,1095,1096],{},"v-model",", because it can also close itself and this change should be propagated to the parent.",[987,1099,1100,1112],{},[990,1101,1102],{},[993,1103,1104,1106,1109],{},[996,1105,998],{},[996,1107,1108],{},"Payload",[996,1110,1111],{},"Description",[1006,1113,1114],{},[993,1115,1116,1121,1124],{},[1011,1117,1118],{},[30,1119,1120],{},"update:modelValue",[1011,1122,1123],{},"—",[1011,1125,1126],{},"Emitted when the sidebar's open state changes",[982,1128,1130],{"id":1129},"slots","Slots",[23,1132,1133],{},"All slots expose the same properties, which allow the UI to control the state of the Sidebar.",[987,1135,1136,1147],{},[990,1137,1138],{},[993,1139,1140,1142,1145],{},[996,1141,998],{},[996,1143,1144],{},"Accepts",[996,1146,1111],{},[1006,1148,1149,1164,1177],{},[993,1150,1151,1156,1161],{},[1011,1152,1153],{},[30,1154,1155],{},"default",[1011,1157,1158],{},[30,1159,1160],{},"SidebarExpose",[1011,1162,1163],{},"Main content of the sidebar",[993,1165,1166,1170,1174],{},[1011,1167,1168],{},[30,1169,263],{},[1011,1171,1172],{},[30,1173,1160],{},[1011,1175,1176],{},"Content to display at the top of the sidebar",[993,1178,1179,1183,1187],{},[1011,1180,1181],{},[30,1182,527],{},[1011,1184,1185],{},[30,1186,1160],{},[1011,1188,1189],{},"Content to display at the bottom of the sidebar",[44,1191,1195],{"className":1192,"code":1193,"language":1194,"meta":49,"style":49},"language-ts shiki shiki-themes vitesse-dark vitesse-light vitesse-dark","interface SidebarExpose {\n  mini: Ref\u003Cboolean>\n  floaty: Ref\u003Cboolean>\n  width: Ref\u003Cnumber>\n  open: Ref\u003Cboolean>\n  close: () => void\n}\n","ts",[30,1196,1197,1209,1226,1241,1256,1271,1282],{"__ignoreMap":49},[53,1198,1199,1202,1206],{"class":55,"line":56},[53,1200,1201],{"class":146},"interface",[53,1203,1205],{"class":1204},"sTIxS"," SidebarExpose",[53,1207,1208],{"class":59}," {\n",[53,1210,1211,1214,1217,1220,1222,1224],{"class":55,"line":70},[53,1212,1213],{"class":79},"  mini",[53,1215,1216],{"class":59},": ",[53,1218,1219],{"class":1204},"Ref",[53,1221,60],{"class":59},[53,1223,1047],{"class":1204},[53,1225,67],{"class":59},[53,1227,1228,1231,1233,1235,1237,1239],{"class":55,"line":116},[53,1229,1230],{"class":79},"  floaty",[53,1232,1216],{"class":59},[53,1234,1219],{"class":1204},[53,1236,60],{"class":59},[53,1238,1047],{"class":1204},[53,1240,67],{"class":59},[53,1242,1243,1246,1248,1250,1252,1254],{"class":55,"line":136},[53,1244,1245],{"class":79},"  width",[53,1247,1216],{"class":59},[53,1249,1219],{"class":1204},[53,1251,60],{"class":59},[53,1253,1025],{"class":1204},[53,1255,67],{"class":59},[53,1257,1258,1261,1263,1265,1267,1269],{"class":55,"line":143},[53,1259,1260],{"class":79},"  open",[53,1262,1216],{"class":59},[53,1264,1219],{"class":1204},[53,1266,60],{"class":59},[53,1268,1047],{"class":1204},[53,1270,67],{"class":59},[53,1272,1273,1276,1279],{"class":55,"line":168},[53,1274,1275],{"class":156},"  close",[53,1277,1278],{"class":59},": () => ",[53,1280,1281],{"class":1204},"void\n",[53,1283,1284],{"class":55,"line":178},[53,1285,1286],{"class":59},"}\n",[982,1288,1290],{"id":1289},"examples","Examples",[1292,1293,1294,1670,1674,1677],"sidebar-floaty-example",{},[44,1295,1297],{"className":46,"code":1296,"language":48,"meta":49,"style":49},"\u003Cscript setup>\nimport { Sidebar } from '@dolanske\u002Fvui'\nimport { ref } from 'vue'\n\nconst isOpen = ref(true)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"vui-sidebar-layout\">\n    \u003CSidebar appear :width=\"128\" floaty>\n      \u003Ctemplate #header>\n        \u003Cimg\n          src=\"https:\u002F\u002Fdolansky.dev\u002Fbackgrounds\u002Fstar.png\"\n          class=\"sidebar-logo\"\n          width=\"40\"\n        >\n      \u003C\u002Ftemplate>\n      \u003CDropdownItem>\n        \u003Ctemplate #icon>\n          \u003CIconHouse \u002F>\n        \u003C\u002Ftemplate>\n        Home\n      \u003C\u002FDropdownItem>\n      \u003CDropdownItem>\n        \u003Ctemplate #icon>\n          \u003CIconUser \u002F>\n        \u003C\u002Ftemplate>\n        About\n      \u003C\u002FDropdownItem>\n      \u003CDropdownItem>\n        \u003Ctemplate #icon>\n          \u003CIconPhone \u002F>\n        \u003C\u002Ftemplate>\n        Contact\n      \u003C\u002FDropdownItem>\n    \u003C\u002FSidebar>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[30,1298,1299,1310,1328,1346,1350,1366,1374,1378,1386,1404,1430,1442,1449,1463,1476,1489,1494,1502,1510,1522,1530,1538,1542,1550,1558,1570,1578,1586,1590,1598,1606,1618,1626,1634,1638,1646,1654,1662],{"__ignoreMap":49},[53,1300,1301,1303,1305,1308],{"class":55,"line":56},[53,1302,60],{"class":59},[53,1304,64],{"class":63},[53,1306,1307],{"class":79}," setup",[53,1309,67],{"class":59},[53,1311,1312,1314,1316,1318,1320,1322,1324,1326],{"class":55,"line":70},[53,1313,73],{"class":63},[53,1315,76],{"class":59},[53,1317,96],{"class":79},[53,1319,99],{"class":59},[53,1321,102],{"class":63},[53,1323,106],{"class":105},[53,1325,110],{"class":109},[53,1327,113],{"class":105},[53,1329,1330,1332,1334,1336,1338,1340,1342,1344],{"class":55,"line":116},[53,1331,73],{"class":63},[53,1333,76],{"class":59},[53,1335,123],{"class":79},[53,1337,99],{"class":59},[53,1339,102],{"class":63},[53,1341,106],{"class":105},[53,1343,48],{"class":109},[53,1345,113],{"class":105},[53,1347,1348],{"class":55,"line":136},[53,1349,140],{"emptyLinePlaceholder":139},[53,1351,1352,1354,1356,1358,1360,1362,1364],{"class":55,"line":143},[53,1353,147],{"class":146},[53,1355,150],{"class":79},[53,1357,153],{"class":59},[53,1359,123],{"class":156},[53,1361,159],{"class":59},[53,1363,162],{"class":63},[53,1365,165],{"class":59},[53,1367,1368,1370,1372],{"class":55,"line":168},[53,1369,171],{"class":59},[53,1371,64],{"class":63},[53,1373,67],{"class":59},[53,1375,1376],{"class":55,"line":178},[53,1377,140],{"emptyLinePlaceholder":139},[53,1379,1380,1382,1384],{"class":55,"line":183},[53,1381,60],{"class":59},[53,1383,188],{"class":63},[53,1385,67],{"class":59},[53,1387,1388,1390,1392,1394,1396,1398,1400,1402],{"class":55,"line":193},[53,1389,196],{"class":59},[53,1391,199],{"class":63},[53,1393,202],{"class":79},[53,1395,205],{"class":59},[53,1397,208],{"class":105},[53,1399,211],{"class":109},[53,1401,208],{"class":105},[53,1403,67],{"class":59},[53,1405,1406,1408,1410,1413,1416,1418,1420,1423,1425,1428],{"class":55,"line":230},[53,1407,233],{"class":59},[53,1409,14],{"class":63},[53,1411,1412],{"class":79}," appear",[53,1414,1415],{"class":79}," :width",[53,1417,205],{"class":59},[53,1419,208],{"class":105},[53,1421,1422],{"class":109},"128",[53,1424,208],{"class":105},[53,1426,1427],{"class":79}," floaty",[53,1429,67],{"class":59},[53,1431,1432,1434,1436,1438,1440],{"class":55,"line":252},[53,1433,255],{"class":59},[53,1435,188],{"class":63},[53,1437,260],{"class":59},[53,1439,263],{"class":156},[53,1441,67],{"class":59},[53,1443,1444,1446],{"class":55,"line":268},[53,1445,271],{"class":59},[53,1447,1448],{"class":63},"img\n",[53,1450,1451,1454,1456,1458,1460],{"class":55,"line":334},[53,1452,1453],{"class":79},"          src",[53,1455,205],{"class":59},[53,1457,208],{"class":105},[53,1459,284],{"class":109},[53,1461,1462],{"class":105},"\"\n",[53,1464,1465,1468,1470,1472,1474],{"class":55,"line":344},[53,1466,1467],{"class":79},"          class",[53,1469,205],{"class":59},[53,1471,208],{"class":105},[53,1473,295],{"class":109},[53,1475,1462],{"class":105},[53,1477,1478,1481,1483,1485,1487],{"class":55,"line":354},[53,1479,1480],{"class":79},"          width",[53,1482,205],{"class":59},[53,1484,208],{"class":105},[53,1486,307],{"class":109},[53,1488,1462],{"class":105},[53,1490,1491],{"class":55,"line":368},[53,1492,1493],{"class":59},"        >\n",[53,1495,1496,1498,1500],{"class":55,"line":380},[53,1497,337],{"class":59},[53,1499,188],{"class":63},[53,1501,67],{"class":59},[53,1503,1504,1506,1508],{"class":55,"line":390},[53,1505,255],{"class":59},[53,1507,349],{"class":63},[53,1509,67],{"class":59},[53,1511,1512,1514,1516,1518,1520],{"class":55,"line":397},[53,1513,271],{"class":59},[53,1515,188],{"class":63},[53,1517,260],{"class":59},[53,1519,363],{"class":156},[53,1521,67],{"class":59},[53,1523,1524,1526,1528],{"class":55,"line":406},[53,1525,371],{"class":59},[53,1527,374],{"class":63},[53,1529,377],{"class":59},[53,1531,1532,1534,1536],{"class":55,"line":415},[53,1533,383],{"class":59},[53,1535,188],{"class":63},[53,1537,67],{"class":59},[53,1539,1540],{"class":55,"line":428},[53,1541,394],{"class":393},[53,1543,1544,1546,1548],{"class":55,"line":438},[53,1545,337],{"class":59},[53,1547,349],{"class":63},[53,1549,67],{"class":59},[53,1551,1552,1554,1556],{"class":55,"line":447},[53,1553,255],{"class":59},[53,1555,349],{"class":63},[53,1557,67],{"class":59},[53,1559,1560,1562,1564,1566,1568],{"class":55,"line":453},[53,1561,271],{"class":59},[53,1563,188],{"class":63},[53,1565,260],{"class":59},[53,1567,363],{"class":156},[53,1569,67],{"class":59},[53,1571,1572,1574,1576],{"class":55,"line":462},[53,1573,371],{"class":59},[53,1575,433],{"class":63},[53,1577,377],{"class":59},[53,1579,1580,1582,1584],{"class":55,"line":471},[53,1581,383],{"class":59},[53,1583,188],{"class":63},[53,1585,67],{"class":59},[53,1587,1588],{"class":55,"line":484},[53,1589,450],{"class":393},[53,1591,1592,1594,1596],{"class":55,"line":494},[53,1593,337],{"class":59},[53,1595,349],{"class":63},[53,1597,67],{"class":59},[53,1599,1600,1602,1604],{"class":55,"line":503},[53,1601,255],{"class":59},[53,1603,349],{"class":63},[53,1605,67],{"class":59},[53,1607,1608,1610,1612,1614,1616],{"class":55,"line":509},[53,1609,271],{"class":59},[53,1611,188],{"class":63},[53,1613,260],{"class":59},[53,1615,363],{"class":156},[53,1617,67],{"class":59},[53,1619,1620,1622,1624],{"class":55,"line":518},[53,1621,371],{"class":59},[53,1623,489],{"class":63},[53,1625,377],{"class":59},[53,1627,1628,1630,1632],{"class":55,"line":532},[53,1629,383],{"class":59},[53,1631,188],{"class":63},[53,1633,67],{"class":59},[53,1635,1636],{"class":55,"line":548},[53,1637,506],{"class":393},[53,1639,1640,1642,1644],{"class":55,"line":582},[53,1641,337],{"class":59},[53,1643,349],{"class":63},[53,1645,67],{"class":59},[53,1647,1648,1650,1652],{"class":55,"line":622},[53,1649,688],{"class":59},[53,1651,14],{"class":63},[53,1653,67],{"class":59},[53,1655,1656,1658,1660],{"class":55,"line":646},[53,1657,967],{"class":59},[53,1659,199],{"class":63},[53,1661,67],{"class":59},[53,1663,1664,1666,1668],{"class":55,"line":657},[53,1665,171],{"class":59},[53,1667,188],{"class":63},[53,1669,67],{"class":59},[982,1671,1673],{"id":1672},"tokens","Tokens",[23,1675,1676],{},"CSS variable tokens used for global or per-instance manipulation of certain styling.",[987,1678,1679,1690],{},[990,1680,1681],{},[993,1682,1683,1686,1688],{},[996,1684,1685],{},"Token",[996,1687,1001],{},[996,1689,1111],{},[1006,1691,1692,1707],{},[993,1693,1694,1699,1704],{},[1011,1695,1696],{},[30,1697,1698],{},"--vui-sidebar-float-offset",[1011,1700,1701],{},[30,1702,1703],{},"8px",[1011,1705,1706],{},"Offset for floating sidebar edges",[993,1708,1709,1714,1719],{},[1011,1710,1711],{},[30,1712,1713],{},"--vui-sidebar-width",[1011,1715,1716],{},[30,1717,1718],{},"224px",[1011,1720,1721],{},"Sidebar width",[1723,1724,1725],"style",{},"html pre.shiki code .sP76a, html code.shiki .sP76a{--shiki-dark:#666666;--shiki-light:#999999;--shiki-default:#666666}html pre.shiki code .sKpE2, html code.shiki .sKpE2{--shiki-dark:#4D9375;--shiki-light:#1E754F;--shiki-default:#4D9375}html pre.shiki code .sflEz, html code.shiki .sflEz{--shiki-dark:#BD976A;--shiki-light:#B07D48;--shiki-default:#BD976A}html pre.shiki code .sBR95, html code.shiki .sBR95{--shiki-dark:#C98A7D77;--shiki-light:#B5695977;--shiki-default:#C98A7D77}html pre.shiki code .sfmH-, html code.shiki .sfmH-{--shiki-dark:#C98A7D;--shiki-light:#B56959;--shiki-default:#C98A7D}html pre.shiki code .sCMWV, html code.shiki .sCMWV{--shiki-dark:#CB7676;--shiki-light:#AB5959;--shiki-default:#CB7676}html pre.shiki code .sRTv0, html code.shiki .sRTv0{--shiki-dark:#80A665;--shiki-light:#59873A;--shiki-default:#80A665}html pre.shiki code .sX1ls, html code.shiki .sX1ls{--shiki-dark:#DBD7CAEE;--shiki-light:#393A34;--shiki-default:#DBD7CAEE}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sTIxS, html code.shiki .sTIxS{--shiki-dark:#5DA994;--shiki-light:#2E8F82;--shiki-default:#5DA994}",{"title":49,"searchDepth":70,"depth":70,"links":1727},[1728,1729,1730,1731,1732],{"id":984,"depth":116,"text":985},{"id":1089,"depth":116,"text":1090},{"id":1129,"depth":116,"text":1130},{"id":1289,"depth":116,"text":1290},{"id":1672,"depth":116,"text":1673},"md",{},"\u002Fdocs\u002Fcomponents\u002Fsidebar",{"title":14,"description":25},"docs\u002Fcomponents\u002Fsidebar","usdFH-Rvr1ppGcunLEc4vSkTa2iFDM3EkkfXaqKRGZs",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1740},"\u003Cpath fill=\"currentColor\" d=\"M69.12 94.15L28.5 128l40.62 33.85a8 8 0 1 1-10.24 12.29l-48-40a8 8 0 0 1 0-12.29l48-40a8 8 0 0 1 10.24 12.3m176 27.7l-48-40a8 8 0 1 0-10.24 12.3L227.5 128l-40.62 33.85a8 8 0 1 0 10.24 12.29l48-40a8 8 0 0 0 0-12.29m-82.39-89.37a8 8 0 0 0-10.25 4.79l-64 176a8 8 0 0 0 4.79 10.26A8.1 8.1 0 0 0 96 224a8 8 0 0 0 7.52-5.27l64-176a8 8 0 0 0-4.79-10.25\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1742},"\u003Cpath fill=\"currentColor\" d=\"M230.92 212c-15.23-26.33-38.7-45.21-66.09-54.16a72 72 0 1 0-73.66 0c-27.39 8.94-50.86 27.82-66.09 54.16a8 8 0 1 0 13.85 8c18.84-32.56 52.14-52 89.07-52s70.23 19.44 89.07 52a8 8 0 1 0 13.85-8M72 96a56 56 0 1 1 56 56a56.06 56.06 0 0 1-56-56\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1744},"\u003Cpath fill=\"currentColor\" d=\"M120 216a8 8 0 0 1-8 8H48a8 8 0 0 1-8-8V40a8 8 0 0 1 8-8h64a8 8 0 0 1 0 16H56v160h56a8 8 0 0 1 8 8m109.66-93.66l-40-40a8 8 0 0 0-11.32 11.32L204.69 120H112a8 8 0 0 0 0 16h92.69l-26.35 26.34a8 8 0 0 0 11.32 11.32l40-40a8 8 0 0 0 0-11.32\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1746},"\u003Cpath fill=\"currentColor\" d=\"M216 40H40a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16M40 56h40v144H40Zm176 144H96V56h120z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1748},"\u003Cpath fill=\"currentColor\" d=\"m219.31 108.68l-80-80a16 16 0 0 0-22.62 0l-80 80A15.87 15.87 0 0 0 32 120v96a8 8 0 0 0 8 8h64a8 8 0 0 0 8-8v-56h32v56a8 8 0 0 0 8 8h64a8 8 0 0 0 8-8v-96a15.87 15.87 0 0 0-4.69-11.32M208 208h-48v-56a8 8 0 0 0-8-8h-48a8 8 0 0 0-8 8v56H48v-88l80-80l80 80Z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1750},"\u003Cpath fill=\"currentColor\" d=\"m222.37 158.46l-47.11-21.11l-.13-.06a16 16 0 0 0-15.17 1.4a8 8 0 0 0-.75.56L134.87 160c-15.42-7.49-31.34-23.29-38.83-38.51l20.78-24.71c.2-.25.39-.5.57-.77a16 16 0 0 0 1.32-15.06v-.12L97.54 33.64a16 16 0 0 0-16.62-9.52A56.26 56.26 0 0 0 32 80c0 79.4 64.6 144 144 144a56.26 56.26 0 0 0 55.88-48.92a16 16 0 0 0-9.51-16.62M176 208A128.14 128.14 0 0 1 48 80a40.2 40.2 0 0 1 34.87-40a.6.6 0 0 0 0 .12l21 47l-20.67 24.74a6 6 0 0 0-.57.77a16 16 0 0 0-1 15.7c9.06 18.53 27.73 37.06 46.46 46.11a16 16 0 0 0 15.75-1.14a8 8 0 0 0 .74-.56L168.89 152l47 21.05h.11A40.21 40.21 0 0 1 176 208\"\u002F>",1782200883252]