https://next-cuba-doc-pixelstrapthemes.vercel.app/_next/static/chu…/mix_layout-af82d9ec53ed2a87.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[252],{3566:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/getting_started/mix_layout",function(){return n(1099)}])},3681:function(e,t,n){"use strict";var r=n(6042),i=n(9396),o=n(5893);n(7294);var s=n(3143),l=function(e){return(0,o.jsx)(s.ri,{children:(0,o.jsx)(s.ck,{original:e.src,children:function(t){var n=t.ref,s=t.open;return(0,o.jsx)("div",{className:"d-flex justify-content-center align-items-center",ref:n,onClick:s,children:(0,o.jsx)("img",(0,i.Z)((0,r.Z)({className:"img-fluid mb-3 img-border img-80"},e),{alt:""}))})}})})};t.Z=l},1099:function(e,t,n){"use strict";n.r(t);var r=n(5893);n(7294);var i=n(3681),o=function(){return(0,r.jsx)("div",{className:"row",children:(0,r.jsxs)("div",{className:"col-12",children:[(0,r.jsx)("div",{className:"card-header",children:(0,r.jsx)("h4",{className:"main-title",id:"mixed-layout",children:"Mixed Layout"})}),(0,r.jsxs)("div",{className:"card-body p-t-0",children:[(0,r.jsx)("p",{children:"Using the dark/light mode functionalities, we have created a few mixed layout modes."}),(0,r.jsx)("div",{className:"d-flex justify-content-center align-items-center",children:(0,r.jsx)(i.Z,{className:"img-fluid mb-3 img-border img-80",src:"../assets/images/document/vue/codeSnaps/mixLayout.png",alt:""})}),(0,r.jsx)("p",{children:"In mix layout we have provided 3 options:"}),(0,r.jsxs)("ol",{children:[(0,r.jsx)("li",{children:"Light Layout With Light Sidebar:"}),(0,r.jsx)("li",{children:"Light Layout With dark sidebar"}),(0,r.jsx)("li",{children:"Dark Layout With Dark Sidebar"})]}),(0,r.jsx)("p",{children:"For applying the changes we change the value of the class property of the body tag."}),(0,r.jsxs)("ul",{children:[(0,r.jsxs)("li",{children:["For",(0,r.jsx)("strong",{id:"light",children:"Light Layout With Light Sidebar: "}),"className='light-only'",(0,r.jsx)("div",{className:"d-flex justify-content-center align-items-center",children:(0,r.jsx)(i.Z,{className:"img-fluid mb-3 img-border img-80",src:"../assets/images/document/vue/codeSnaps/layout_dubai.png",alt:""})})]}),(0,r.jsxs)("li",{children:["For",(0,r.jsx)("strong",{id:"dark-sidebar",children:"Light Layout With Dark Sidebar: "}),"className='dark-sidebar'",(0,r.jsx)("div",{className:"d-flex justify-content-center align-items-center",children:(0,r.jsx)(i.Z,{className:"img-fluid mb-3 img-border img-80",src:"../assets/images/document/vue/codeSnaps/layout_dubai_dark_sidebar.png",alt:""})})]}),(0,r.jsxs)("li",{children:["For",(0,r.jsx)("strong",{id:"dark",children:"Dark Layout With Dark Sidebar: "}),"className='dark-only'",(0,r.jsx)("div",{className:"d-flex justify-content-center align-items-center",children:(0,r.jsx)(i.Z,{className:"img-fluid mb-3 img-border img-80",src:"../assets/images/document/vue/codeSnaps/layout_dubai_dark_layout.png",alt:""})})]})]}),(0,r.jsx)("hr",{})]})]})})};t.default=o},2703:function(e,t,n){"use strict";var r=n(414);function i(){}function o(){}o.resetWarningCache=i,e.exports=function(){function e(e,t,n,i,o,s){if(s!==r){var l=Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw l.name="Invariant Violation",l}}function t(){return e}e.isRequired=e;var n={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:o,resetWarningCache:i}

1;return n.PropTypes=n,n}},5697:function(e,t,n){e.exports=n(2703)()},414:function(e){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},9396:function(e,t,n){"use strict";function r(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):(function(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n.push.apply(n,r)}return n})(Object(t)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}),e}n.d(t,{Z:function(){return r}})},3143:function(e,t,n){"use strict";n.d(t,{ri:function(){return $},ck:function(){return x}});var r=n(5826),i=n(7294),o=n(3935),s=n(5697);class l extends Error{constructor(){super(...arguments),this.message=`No valid \`ref\` provided.
2You shuld use \`ref\` from render prop of Item component.
3Example:
4<Item>{({ ref }) => <div ref={ref}></div>}</Item>
5`}}var a=function(e,t){if(!(e instanceof Element))throw new l;return e===t?0:2&e.compareDocumentPosition(t)?1:-1},c=function(e){return Object.entries(e).map(([e,t])=>t?`${e}=${t}`:e).join("&")},u=function(e){return e.split("&").reduce((e,t)=>{let[n,r]=t.split("=");return n&&(e[n]=r),e},{})},d=function(e){let t=u(e);return delete t.gid,delete t.pid,c(t)},p=function(){return window.location.hash.substring(1)},f=function(){return`${window.location.pathname}${window.location.search}`};let h=i.createContext({remove(){},set(){},handleClick(){},open(){}});class m{constructor(e){this.pswp=e,this.on=e.on.bind(e),this.off=e.off.bind(e),this.dispatch=e.dispatch.bind(e)}}var g=function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&0>t.indexOf(r)&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols)for(var i=0,r=Object.getOwnPropertySymbols(e);i<r.length;i++)0>t.indexOf(r[i])&&Object.prototype.propertyIsEnumerable.call(e,r[i])&&(n[r[i]]=e[r[i]]);return n};let y=null,$=({children:e,options:t,plugins:n,uiElements:s,id:l,onBeforeOpen:$,onOpen:b,withCaption:x,withDownloadButton:v})=>{let[j,w]=(0,i.useState)(null),_=(0,i.useRef)(new Map),k=(0,i.useRef)(null),O=(0,i.useCallback)((e,i,u,h)=>{if(y)return;let j=u||null,k=[],O=Array.from(_.current),S=(t,n)=>{let[r,o]=t,{width:s,height:l,original:a,originalSrcset:c,thumbnail:u,cropped:d,content:p,id:f}=o,h=g(o,["width","height","original","originalSrcset","thumbnail","cropped","content","id"]);(e===r||void 0!==f&&String(f)===i)&&(j=n),k.push(Object.assign(Object.assign(Object.assign({w:Number(s),h:Number(l),src:a,srcset:c,msrc:u,element:r.current,thumbCropped:d,content:p},void 0!==p?{type:"html"}:{}),void 0!==f?{pid:f}:{}),h))};_.current.size>1?O.sort(([{current:e}],[{current:t}])=>a(e,t)).forEach(S):O.forEach(S);let P=h&&void 0!==h.clientX&&void 0!==h.clientY?{x:h.clientX,y:h.clientY}:null,N=new r.Z(Object.assign({dataSource:k,index:null===j?parseInt(i,10)-1:j,initialPointerPos:P},t||{}));y=N,N.on("contentActivate",({content:e})=>{e.data.content?w((0,o.createPortal)(e.data.content,e.element)):w(null)}),N.on("close",()=>{w(null)}),v&&N.on("uiRegister",()=>{N.ui.registerElement({name:"download-button",ariaLabel:"Download",order:8,isButton:!0,tagName:"a",appendTo:"bar",html:{isCustomSVG:!0,inner:'<path d="M20.5 14.3 17.1 18V10h-2.2v7.9l-3.4-3.6L10 16l6 6.1 6-6.1ZM23 23H9v2h14Z" id="pswp__icn-download"/>',outlineID:"pswp__icn-download"},onInit(e,t){e.setAttribute("download",""),e.setAttribute("target","_blank"),e.setAttribute("rel","noopener"),N.on("change",()=>{let n=e;n.href=t.currSlide.data.src})}})}),x&&N.on("uiRegister",()=>{N.ui.registerElement({name:"default-caption",order:9,isButton:!1,appendTo:"root",onInit(e,t){e.style.position="absolute",e.style.bottom="15px",e.style.left="0",e.style.right="0",e.style.padding="0 20px",e.style.color="var(--pswp-icon-color)",e.style.textAlign="center",e.style.fontSize="14px",e.style.lineHeight="1.5",e.style.textShadow="1px 1px 3px var(--pswp-icon-color-secondary)",N.on("change",()=>{let{caption:n,alt:r}=t.currSlide.data;e.innerHTML=n||r||""})}})}),Array.isArray(s)&&s.forEach(e=>{N.on("uiRegister",()=>{N.ui.registerElement(e)})}),"function"==typeof n&&n(new m(N)),"function"==typeof $&&$(N),N.on("change",()=>{if(void 0===l)return;let e=N.currSlide.data.pid||N.currIndex+1,t=f(),n=d(p()),r=c({gid:l,pid:e}),i=`${t}#${n}&${r}`;window.history.pushState({},document.title,i)}),N.on("destroy",()=>{if(void 0!==l){let e=f(),t=d(p()),n=`${e}${t?`#${t}`:""}`;window.history.pushState({},document.title,n)}y=null}),N.init(),"function"==typeof b&&b(N)},[t,n,s,l,$,b,x,v]);(0,i.useEffect)(()=>()=>{y&&y.close()},[]),(0,i.useEffect)(()=>

5{if(void 0===l)return;let e=p();if(e.length<5)return;let t=u(e),{pid:n,gid:r}=t;if(n&&r){if(0===_.current.size){k.current=n;return}n&&r===String(l)&&O(null,n)}},[O,l]);let S=(0,i.useCallback)(e=>{_.current.delete(e)},[]),P=(0,i.useCallback)((e,t)=>{let{id:n}=t;if(_.current.set(e,t),null!==k.current){if(n===k.current){O(e),k.current=null;return}if(!n){let r=parseInt(k.current,10)-1,i=Array.from(_.current.keys())[r];i&&(O(i),k.current=null)}}},[O]),N=(0,i.useCallback)(e=>{O(null,null,e)},[O]),E=(0,i.useMemo)(()=>({remove:S,set:P,handleClick:O,open:N}),[S,P,O,N]);return i.createElement(h.Provider,{value:E},e,j)};$.propTypes={children:s.any,options:s.object,plugins:s.func,uiElements:s.array,id:s.oneOfType([s.string,s.number]),onBeforeOpen:s.func,onOpen:s.func,withCaption:s.bool,withDownloadButton:s.bool};var b=function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&0>t.indexOf(r)&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols)for(var i=0,r=Object.getOwnPropertySymbols(e);i<r.length;i++)0>t.indexOf(r[i])&&Object.prototype.propertyIsEnumerable.call(e,r[i])&&(n[r[i]]=e[r[i]]);return n};let x=e=>{var{children:t}=e,n=b(e,["children"]);let r=(0,i.useRef)(),{remove:o,set:s,handleClick:l}=(0,i.useContext)(h),a=(0,i.useCallback)(e=>l(r,null,null,e),[]);return(0,i.useEffect)(()=>(s(r,n),()=>o(r)),Object.values(n)),t({ref:r,open:a})};x.propTypes={children:s.func.isRequired,original:s.string,originalSrcset:s.string,thumbnail:s.string,width:s.oneOfType([s.number,s.string]),height:s.oneOfType([s.number,s.string]),alt:s.string,caption:s.string,content:s.element,html:s.string,id:s.oneOfType([s.number,s.string]),cropped:s.bool}}},function(e){e.O(0,[687,774,888,179],function(){return e(e.s=3566)}),_N_E=e.O()}]);