1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3659],{87228:function(e,n,s){(window.__NEXT_P=window.__NEXT_P||[]).push(["/components/bootstrap/offcanvas",function(){return s(17529)}])},17529:function(e,n,s){"use strict";s.r(n);var t=s(85893),a=s(33272),o=s(67294),l=s(35005),i=s(44874),r=s(34051),c=s(31555),d=s(52686),h=s(34289),m=s(70552),x=s(9966),f=s(72867);let u=()=>{let[e,n]=(0,o.useState)(!1),[s,u]=(0,o.useState)(!1),[p,j]=(0,o.useState)(!1),[v,w]=(0,o.useState)(!1),Z=()=>w(!1),b=()=>w(!0),[k,g]=(0,o.useState)(!1),y=()=>g(!1),N=()=>g(!0);function C(e){let{name:n,...s}=e,[a,r]=(0,o.useState)(!1),c=()=>r(!1),d=()=>r(e=>!e);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(l.Z,{variant:"primary",onClick:d,className:"me-2",children:n}),(0,t.jsxs)(i.Z,{show:a,onHide:c,...s,children:[(0,t.jsxs)(i.Z.Header,{children:[(0,t.jsx)(i.Z.Title,{children:(0,t.jsx)("b",{children:"Colored with scrolling"})}),(0,t.jsx)("span",{className:"d-flex ms-auto",onClick:c,children:(0,t.jsx)("i",{className:"fe fe-x ms-auto"})})]}),(0,t.jsxs)(i.Z.Body,{children:["Try scrolling the rest of the page to see this option in action.",(0,t.jsx)("br",{}),(0,t.jsx)("br",{}),"It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using"," 'Content here, content here',"," making it look like readable English."]})]})]})}function O(e){let{name:n,...s}=e,[a,r]=(0,o.useState)(!1),c=()=>r(!1),d=()=>r(!0);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(l.Z,{variant:"primary",onClick:d,className:"me-2",children:n}),(0,t.jsxs)(i.Z,{show:a,onHide:c,...s,children:[(0,t.jsxs)(i.Z.Header,{children:[(0,t.jsx)(i.Z.Title,{children:"Offcanvas"}),(0,t.jsx)("span",{className:"d-flex ms-auto",onClick:c,children:(0,t.jsx)("i",{className:"fe fe-x ms-auto"})})]}),(0,t.jsx)(i.Z.Body,{children:"Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc."})]})]})}return(0,t.jsxs)("div",{children:[(0,t.jsx)(a.Z,{title:"Offcanvas"}),(0,t.jsx)(f.Z,{titles:"Offcanvas",active:"Offcanvas",items:["Apps"]}),(0,t.jsxs)(r.Z,{children:[(0,t.jsx)(c.Z,{md:12,xl:6,children:(0,t.jsxs)(d.Z,{children:[(0,t.jsxs)(d.Z.Header,{children:[(0,t.jsx)(d.Z.Title,{children:"Default Offcanvas"}),(0,t.jsx)(h.Z,{className:"ms-auto",children:(0,t.jsx)(h.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>n(!e),className:"showcode d-flex ms-auto mx-2"})})]}),(0,t.jsxs)(d.Z.Body,{children:[(0,t.jsxs)("div",{className:"btn-list",children:[(0,t.jsx)(l.Z,{variant:"primary",onClick:b,children:"Link with href"}),(0,t.jsxs)(i.Z,{show:v,onHide:Z,children:[(0,t.jsxs)(i.Z.Header,{children:[(0,t.jsx)(i.Z.Title,{children:"Offcanvas"}),(0,t.jsx)("span",{className:"d-flex ms-auto",onClick:Z,children:(0,t.jsx)("i",{className:"fe fe-x ms-auto"})})]}),(0,t.jsxs)(i.Z.Body,{children:["Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.",(0,t.jsxs)(m.Z,{className:"mt-5",children:[(0,t.jsx)(m.Z.Toggle,{children:"Dropdown button"}),(0,t.jsxs)(m.Z.Menu,{children:[(0,t.jsx)(m.Z.Item,{eventkey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventkey:"2",children:"Another Action"}),(0,t.jsx)(m.Z.Item,{eventkey:"3",children:"Something else"})]})]})]})]}),(0,t.jsx)(l.Z,{variant:"primary",onClick:N,children:"Button with data-bs-target"}),(0,t.jsxs)(i.Z,{show:k,onHide:y,children:[(0,t.jsxs)(i.Z.Header,{children:[(0,t.jsx)(i.Z.Title,{children:"Offcanvas"}),(0,t.jsx)("span",{className:"d-flex ms-auto",onClick:y,children:(0,t.jsx)("i",{className:"fe fe-x ms-auto"})})]}),(0,t.jsxs)(i.Z.Body,{children:["Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.",(0,t.jsxs)(m.Z,{className:"mt-5",children:[(0,t.jsx)(m.Z.Toggle,{children:"Dropdown button"}),(0,t.jsxs)(m.Z.Menu,{children:[(0,t.jsx)(m.Z.Item,{eventkey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventkey:"2",children:"Another Action"}),(0,t.jsx)(m.Z.Item,{eventkey:"3",children:"Something else"})]})]})]})]})]}),(0,t.jsx)(x.Z,{in:e,className:"mt-2",children:(0,t.jsx)("pre",{children:(0,t.jsx)("code",{children:'\n export function Defaultlink() {\n const [show, setShow] = useState(false);\n\n const handleClose = () => setShow(false);\n const handleShow = () => setShow(true);\n\n return (\n <>\n <Button variant="primary" onClick={handleShow}>\n Link with href\n </Button>\n\n <Offcanvas show={show} onHide={handleClose}>\n <Offcanvas.Header>\n <Offcanvas.Title>Offcanvas</Offcanvas.Title>
1\n <span className="d-flex ms-auto" onClick={handleClose}><i className=\'fe fe-x ms-auto\'></i></span>\n </Offcanvas.Header>\n\n <Offcanvas.Body>\n Some text as placeholder. In real life you can have the elements you\n have chosen. Like, text, images, lists, etc.\n <Dropdown className="mt-5">\n <Dropdown.Toggle>\n Dropdown button\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Item eventkey="1">Action</Dropdown.Item>\n <Dropdown.Item eventkey="2">Another Action</Dropdown.Item>\n <Dropdown.Item eventkey="3">Something else</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </Offcanvas.Body>\n </Offcanvas>\n </>\n );\n}\n\n\nexport function Databutton() {\n const [show, setShow] = useState(false);\n\n const handleClose1 = () => setShow(false);\n const handleShow1 = () => setShow(true);\n\n return (\n <>\n <Button variant="primary" onClick={handleShow1}>\n Button with data-bs-target\n </Button>\n\n <Offcanvas show={show} onHide={handleClose1}>\n <Offcanvas.Header>\n <Offcanvas.Title>Offcanvas</Offcanvas.Title>\n <span className="d-flex ms-auto" onClick={handleClose1}><i className=\'fe fe-x ms-auto\'></i></span>\n </Offcanvas.Header>\n\n <Offcanvas.Body>\n Some text as placeholder. In real life you can have the elements you\n have chosen. Like, text, images, lists, etc.\n <Dropdown className="mt-5">\n <Dropdown.Toggle>\n Dropdown button\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Item eventkey="1">Action</Dropdown.Item>\n <Dropdown.Item eventkey="2">Another Action</Dropdown.Item>\n <Dropdown.Item eventkey="3">Something else</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </Offcanvas.Body>\n </Offcanvas>\n </>\n );\n}\n'})})})]})]})}),(0,t.jsx)(c.Z,{md:12,xl:6,children:(0,t.jsxs)(d.Z,{children:[(0,t.jsxs)(d.Z.Header,{children:[(0,t.jsx)(d.Z.Title,{children:"BackDrop Offcanvas"}),(0,t.jsx)(h.Z,{className:"ms-auto",children:(0,t.jsx)(h.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>u(!s),className:"showcode d-flex ms-auto mx-2"})})]}),(0,t.jsxs)(d.Z.Body,{children:[(0,t.jsx)("div",{className:"btn-list",children:[{name:"Enable body scrolling",scroll:!0,backdrop:!1},{name:"Enable backdrop (default)",scroll:!1,backdrop:!0},{name:"Enable both scrolling & backdrop",scroll:!0,backdrop:!0}].map((e,n)=>(0,t.jsx)(C,{...e},n))}),(0,t.jsx)(x.Z,{in:s,className:"mt-2",children:(0,t.jsx)("pre",{children:(0,t.jsx)("code",{children:"\nexport function Backdrop() {\n return (\n <>\n {options.map((props, idx) => (\n <OffCanvasExample key={idx} {...props} />\n ))}\n </>\n );\n}\n\n"})})})]})]})}),(0,t.jsx)(c.Z,{md:12,children:(0,t.jsxs)(d.Z,{children:[(0,t.jsxs)(d.Z.Header,{children:[(0,t.jsx)(d.Z.Title,{children:"Placement Offcanvas"}),(0,t.jsx)(h.Z,{className:"ms-auto",children:(0,t.jsx)(h.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>j(!p),className:"showcode d-flex ms-auto mx-2"})})]}),(0,t.jsxs)(d.Z.Body,{children:[(0,t.jsx)("div",{className:"btn-list",children:["top","end","bottom"].map((e,n)=>(0,t.jsx)(O,{placement:e,name:"Toggle ".concat(e," Offcanvas ")},n))}),(0,t.jsx)(x.Z,{in:p,className:"mt-2",children:(0,t.jsx)("pre",{children:(0,t.jsx)("code",{children:"\nexport function Placementbutton() {\n return (\n <>\n {['top', 'end', 'bottom'].map((placement, idx) => (\n <OffCanvasplacement key={idx} placement={placement} name={Toggle {placement} Offcanvas } />\n ))}\n </>\n );\n}\n\n"})})})]})]})})]})]})};u.layout="Contentlayout",n.default=u},72867:function(e,n,s){"use strict";var t=s(85893);s(67294);var a=s(26699);let o=e=>(0,t.jsx)("div",{children:(0,t.jsxs)("div",{className:"page-header",children:[(0,t.jsx)("h1",{className:"page-title",children:e.titles}),(0,t.jsx)("div",{children:(0,t.jsxs)(a.Z,{children:[e.items.map((e,n)=>(0,t.jsx)(a.Z.Item,{href:"#!",children:e},n)),(0,t.jsx)(a.Z.Item,{href:"#!",active:!0,children:e.active})]})})]})});n.Z=o},33272:function(e,n,s){"use strict";s.d(n,{Z:function(){return r}});var t=s(85893);s(67294);var a=s(9008),o=s.n(a),l={src:"/_next/static/media/favicon.00e6795d.ico",height:16,width:16,blurWidth:0,blurHeight:0};let i=e=>{let{title:n}=e;return(0,t.jsxs)(o(),{children:[(0,t.jsx)("title",{children:" Fandoro Technologies
1- Making Businesses Responsible"}),(0,t.jsx)("link",{rel:"icon",href:l.src}),(0,t.jsx)("meta",{name:"description",content:"Fandoro Technologies - making businesses responsible"}),(0,t.jsx)("meta",{name:"author",content:"Fandoro Technologies Private Limited"}),(0,t.jsx)("meta",{name:"keywords",content:"next js dashboard template, admin dashboard nextjs, next js admin template, next js admin panel, admin dashboard, nextjs react bootstrap, react bootstrap with next js, next js admin dashboard, nextjs admin dashboard template, admin panel template, admin template react bootstrap, nextjs dashboard,next js react bootstrap"})]})};var r=i},9008:function(e,n,s){e.exports=s(42636)},26699:function(e,n,s){"use strict";s.d(n,{Z:function(){return h}});var t=s(93967),a=s.n(t),o=s(67294),l=s(76792),i=s(13551),r=s(85893);let c=o.forwardRef(({bsPrefix:e,active:n=!1,children:s,className:t,as:o="li",linkAs:c=i.Z,linkProps:d={},href:h,title:m,target:x,...f},u)=>{let p=(0,l.vE)(e,"breadcrumb-item");return(0,r.jsx)(o,{ref:u,...f,className:a()(p,t,{active:n}),"aria-current":n?"page":void 0,children:n?s:(0,r.jsx)(c,{...d,href:h,title:m,target:x,children:s})})});c.displayName="BreadcrumbItem";let d=o.forwardRef(({bsPrefix:e,className:n,listProps:s={},children:t,label:o="breadcrumb",as:i="nav",...c},d)=>{let h=(0,l.vE)(e,"breadcrumb");return(0,r.jsx)(i,{"aria-label":o,className:n,ref:d,...c,children:(0,r.jsx)("ol",{...s,className:a()(h,null==s?void 0:s.className),children:t})})});d.displayName="Breadcrumb";var h=Object.assign(d,{Item:c})}},function(e){e.O(0,[9774,2888,179],function(){return e(e.s=87228)}),_N_E=e.O()}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.