https://gloot.netlify.app/_next/static/chunks/pages/design-system/dropdown-effc5b562a701623.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7055],{28175:function(e,s,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/design-system/dropdown",function(){return n(35704)}])},35704:function(e,s,n){"use strict";n.r(s);var l=n(85893),d=n(67294),a=n(13494),i=function(){var e=(0,d.useState)(!1),s=e[0],n=e[1],a=(0,d.useRef)(null),i=function(e){a.current&&!a.current.contains(e.target)&&n(!1)};return(0,d.useEffect)((function(){return document.addEventListener("click",i,!0),function(){document.removeEventListener("click",i,!0)}})),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)("h1",{className:"mb-2",children:"Dropdown"}),(0,l.jsxs)("div",{className:"mb-12",id:"structure",children:[(0,l.jsx)("h2",{className:"h3 mb-3",children:"Structure"}),(0,l.jsx)("div",{className:"surface rounded-lg p-4",children:(0,l.jsxs)("div",{className:"flex flex-col lg:flex-row gap-4",children:[(0,l.jsx)("div",{className:"flex-1 flex justify-center items-center",children:(0,l.jsxs)("div",{className:"dropdown",children:[(0,l.jsxs)("label",{tabIndex:"1",className:"button button-primary",children:[(0,l.jsx)("span",{className:"icon icon-arrow-sm-down"}),(0,l.jsx)("span",{children:"Click me"})]}),(0,l.jsx)("div",{tabIndex:"1",className:"dropdown-content w-52 p-1",children:(0,l.jsxs)("ul",{className:"menu menu-rounded",children:[(0,l.jsx)("li",{children:(0,l.jsx)("a",{tabIndex:"1",children:(0,l.jsx)("span",{children:"Item 1"})})}),(0,l.jsx)("li",{children:(0,l.jsx)("a",{tabIndex:"1",children:(0,l.jsx)("span",{children:"Item 2"})})}),(0,l.jsx)("li",{children:(0,l.jsx)("a",{tabIndex:"1",children:(0,l.jsx)("span",{children:"Item 3"})})})]})})]})}),(0,l.jsx)("div",{className:"flex-1",children:(0,l.jsx)("iframe",{className:"rounded",width:"100%",height:"300",src:"//jsfiddle.net/augustin_hiebel/czxg1ort/embedded/html/dark/?bodyColor=333366&menuColor=1F1F42&fontColor=FFFFFF&accentColor=13F094"})})]})})]}),(0,l.jsxs)("div",{className:"mb-12",id:"align-end",children:[(0,l.jsx)("h2",{className:"h3 mb-3",children:"Align to end"}),(0,l.jsx)("div",{className:"surface rounded-lg p-4",children:(0,l.jsxs)("div",{className:"flex flex-col lg:flex-row gap-4",children:[(0,l.jsx)("div",{className:"flex-1 flex justify-center items-center",children:(0,l.jsxs)("div",{className:"dropdown dropdown-end",children:[(0,l.jsxs)("label",{tabIndex:"1",className:"button button-primary",children:[(0,l.jsx)("span",{children:"Click me"}),(0,l.jsx)("span",{className:"icon icon-arrow-sm-down"})]}),(0,l.jsx)("div",{tabIndex:"1",className:"dropdown-content w-52 p-1",children:(0,l.jsxs)("ul",{className:"menu menu-rounded",children:[(0,l.jsx)("li",{children:(0,l.jsx)("a",{tabIndex:"1",children:(0,l.jsx)("span",{children:"Item 1"})})}),(0,l.jsx)("li",{children:(0,l.jsx)("a",{tabIndex:"1",children:(0,l.jsx)("span",{children:"Item 2"})})}),(0,l.jsx)("li",{children:(0,l.jsx)("a",{tabIndex:"1",children:(0,l.jsx)("span",{children:"Item 3"})})})]})})]})}),(0,l.jsx)("div",{className:"flex-1",children:(0,l.jsx)("iframe",{className:"rounded",width:"100%",height:"300",src:"//jsfiddle.net/augustin_hiebel/zkb0j2ea/embedded/html/dark/?bodyColor=333366&menuColor=1F1F42&fontColor=FFFFFF&accentColor=13F094"})})]})})]}),(0,l.jsxs)("div",{className:"mb-12",id:"horizontally-centered",children:[(0,l.jsx)("h2",{className:"h3 mb-3",children:"Horizontally centered"}),(0,l.jsx)("div",{className:"surface rounded-lg p-4",children:(0,l.jsxs)("div",{className:"flex flex-col lg:flex-row gap-4",children:[(0,l.jsx)("div",{className:"flex-1 flex justify-center items-center",children:(0,l.jsxs)("div",{className:"dropdown dropdown-center",children:[(0,l.jsxs)("label",{tabIndex:"1",className:"button button-primary",children:[(0,l.jsx)("span",{children:"Click me"}),(0,l.jsx)("span",{className:"icon icon-arrow-sm-down"})]}),(0,l.jsx)("div",{tabIndex:"1",className:"dropdown-content w-52 p-1",children:(0,l.jsxs)("ul",{className:"menu menu-rounded",children:[(0,l.jsx)("li",{children:(0,l.jsx)("a",{tabIndex:"1",children:(0,l.jsx)("span",{children:"Item 1"})})}),(0,l.jsx)("li",{children:(0,l.jsx)("a",{tabIndex:"1",children:(0,l.jsx)("span",{children:"Item 2"})})}),(0,l.jsx)("li",{children:(0,l.jsx)("a",{tabIndex:"1",children:(0,l.jsx)("span",{children:"Item 3"})})})]})})]})}),(0,l.jsx)("div",{className:"flex-1",children:(0,l.jsx)("iframe",{className:"rounded",width:"100%",height:"300",src:"//jsfiddle.net/augustin_hiebel/ot7yv5sn/embedded/html/dark/?bodyColor=333366&menuColor=1F1F42&fontColor=FFFFFF&accentColor=13F094"})})]})})]}),(0,l.jsxs)("div",{className:"mb-12",id:"dropdown-top",children:[(0,l.jsx)("h2",{className:"h3 mb-3",children:"Dropdown top"}),(0,l.jsx)("div",{className:"surface rounded-lg p-4",children:(0,l.jsxs)("div",{className:"flex flex-col lg:flex-row gap-4",children:[(0,l.jsx)("div",{className:"flex-1 flex justify-center items-center",children:(0,l.jsxs)("div",{className:"dropdown dropdown-top",children:[(0,l.jsxs)("label",{tabIndex:"1",className:"button button-primary",children:[(0,l.jsx)("span",{className:"icon icon-arrow-sm-up"}),(0,l.jsx)("span",{children:"Click me"})]}),(0,l.jsx)("div",{tabIndex:"1",className:"dropdown-content w-52 p-1",children:(0,l.jsxs)("ul",{className:"menu menu-rounded",children:[(0,l.jsx)("li",{children:(0,l.jsx)("a",{tabIndex:"1",children:(0,l.jsx)("span",{children:"Item 1"})})}),(0,l.jsx)("li",{children:(0,l.jsx)("a",{tabIndex:"1",children:(0,l.jsx)("span",{children:"Item 2"})})}),(0,l.jsx)("li",{children:(0,l.jsx)("a",{tabIndex:"1",children:(0,l.jsx)("span",{children:"Item 3"})})})]})})]})}),(0,l.jsx)("div",{className:"flex-1",children:(0,l.jsx)("iframe",{className:"rounded",width:"100%",height:"300",src:"//jsfiddle.net/augustin_hiebel/vdsua3qn/embedded/html/dark/?bodyColor=333366&menuColor=1F1F42&fontColor=FFFFFF&accentColor=13F094"})})]})})]}

1),(0,l.jsxs)("div",{className:"mb-12",id:"dropdown-top-align-end",children:[(0,l.jsx)("h2",{className:"h3 mb-3",children:"Dropdown top / align to end"}),(0,l.jsx)("div",{className:"surface rounded-lg p-4",children:(0,l.jsxs)("div",{className:"flex flex-col lg:flex-row gap-4",children:[(0,l.jsx)("div",{className:"flex-1 flex justify-center items-center",children:(0,l.jsxs)("div",{className:"dropdown dropdown-top dropdown-end",children:[(0,l.jsxs)("label",{tabIndex:"1",className:"button button-primary",children:[(0,l.jsx)("span",{children:"Click me"}),(0,l.jsx)("span",{className:"icon icon-arrow-sm-up"})]}),(0,l.jsx)("div",{tabIndex:"1",className:"dropdown-content w-52 p-1",children:(0,l.jsxs)("ul",{className:"menu menu-rounded",children:[(0,l.jsx)("li",{children:(0,l.jsx)("a",{tabIndex:"1",children:(0,l.jsx)("span",{children:"Item 1"})})}),(0,l.jsx)("li",{children:(0,l.jsx)("a",{tabIndex:"1",children:(0,l.jsx)("span",{children:"Item 2"})})}),(0,l.jsx)("li",{children:(0,l.jsx)("a",{tabIndex:"1",children:(0,l.jsx)("span",{children:"Item 3"})})})]})})]})}),(0,l.jsx)("div",{className:"flex-1",children:(0,l.jsx)("iframe",{className:"rounded",width:"100%",height:"300",src:"//jsfiddle.net/augustin_hiebel/dLc1nvoh/embedded/html/dark/?bodyColor=333366&menuColor=1F1F42&fontColor=FFFFFF&accentColor=13F094"})})]})})]}),(0,l.jsxs)("div",{className:"mb-12",id:"dropdown-top-horizontally-centered",children:[(0,l.jsx)("h2",{className:"h3 mb-3",children:"Dropdown top / horizontally centered"}),(0,l.jsx)("div",{className:"surface rounded-lg p-4",children:(0,l.jsxs)("div",{className:"flex flex-col lg:flex-row gap-4",children:[(0,l.jsx)("div",{className:"flex-1 flex justify-center items-center",children:(0,l.jsxs)("div",{className:"dropdown dropdown-top dropdown-center",children:[(0,l.jsxs)("label",{tabIndex:"1",className:"button button-primary",children:[(0,l.jsx)("span",{children:"Click me"}),(0,l.jsx)("span",{className:"icon icon-arrow-sm-up"})]}),(0,l.jsx)("div",{tabIndex:"1",className:"dropdown-content w-52 p-1",children:(0,l.jsxs)("ul",{className:"menu menu-rounded",children:[(0,l.jsx)("li",{children:(0,l.jsx)("a",{tabIndex:"1",children:(0,l.jsx)("span",{children:"Item 1"})})}),(0,l.jsx)("li",{children:(0,l.jsx)("a",{tabIndex:"1",children:(0,l.jsx)("span",{children:"Item 2"})})}),(0,l.jsx)("li",{children:(0,l.jsx)("a",{tabIndex:"1",children:(0,l.jsx)("span",{children:"Item 3"})})})]})})]})}),(0,l.jsx)("div",{className:"flex-1",children:(0,l.jsx)("iframe",{className:"rounded",width:"100%",height:"300",src:"//jsfiddle.net/augustin_hiebel/dLc1nvoh/embedded/html/dark/?bodyColor=333366&menuColor=1F1F42&fontColor=FFFFFF&accentColor=13F094"})})]})})]}),(0,l.jsxs)("div",{className:"mb-12",id:"dropdown-left",children:[(0,l.jsx)("h2",{className:"h3 mb-3",children:"Dropdown left"}),(0,l.jsx)("div",{className:"surface rounded-lg p-4",children:(0,l.jsxs)("div",{className:"flex flex-col lg:flex-row gap-4",children:[(0,l.jsx)("div",{className:"flex-1 flex justify-center items-center",children:(0,l.jsxs)("div",{className:"dropdown dropdown-left",children:[(0,l.jsxs)("label",{tabIndex:"1",className:"button button-primary",children:[(0,l.jsx)("span",{className:"icon icon-arrow-sm-left"}),(0,l.jsx)("span",{children:"Click me"})]}),(0,l.jsx)("div",{tabIndex:"1",className:"dropdown-content w-52 p-1",children:(0,l.jsxs)("ul",{className:"menu menu-rounded",children:[(0,l.jsx)("li",{children:(0,l.jsx)("a",{tabIndex:"1",children:(0,l.jsx)("span",{children:"Item 1"})})}),(0,l.jsx)("li",{children:(0,l.jsx)("a",{tabIndex:"1",children:(0,l.jsx)("span",{children:"Item 2"})})}),(0,l.jsx)("li",{children:(0,l.jsx)("a",{tabIndex:"1",children:(0,l.jsx)("span",{children:"Item 3"})})})]})})]})}),(0,l.jsx)("div",{className:"flex-1",children:(0,l.jsx)("iframe",{className:"rounded",width:"100%",height:"300",src:"//jsfiddle.net/augustin_hiebel/zn8e1bmg/embedded/html/dark/?bodyColor=333366&menuColor=1F1F42&fontColor=FFFFFF&accentColor=13F094"})})]})})]}),(0,l.jsxs)("div",{className:"mb-12",id:"dropdown-left-align-end",children:[(0,l.jsx)("h2",{className:"h3 mb-3",children:"Dropdown left / align to end"}),(0,l.jsx)("div",{className:"surface rounded-lg p-4",children:(0,l.jsxs)("div",{className:"flex flex-col lg:flex-row gap-4",children:[(0,l.jsx)("div",{className:"flex-1 flex justify-center items-center",children:(0,l.jsxs)("div",{className:"dropdown dropdown-left dropdown-end",children:[(0,l.jsxs)("label",{tabIndex:"1",className:"button button-primary",children:[(0,l.jsx)("span",{className:"icon icon-arrow-sm-left"}),(0,l.jsx)("span",{children:"Click me"})]}),(0,l.jsx)("div",{tabIndex:"1",className:"dropdown-content w-52 p-1",children:(0,l.jsxs)("ul",{className:"menu menu-rounded",children:[(0,l.jsx)("li",{children:(0,l.jsx)("a",{tabIndex:"1",children:(0,l.jsx)("span",{children:"Item 1"})})}),(0,l.jsx)("li",{children:(0,l.jsx)("a",{tabIndex:"1",children:(0,l.jsx)("span",{children:"Item 2"})})}),(0,l.jsx)("li",{children:(0,l.jsx)("a",{tabIndex:"1",children:(0,l.jsx)("span",{children:"Item 3"})})})]})})]})}),(0,l.jsx)("div",{className:"flex-1",children:(0,l.jsx)("iframe",{className:"rounded",width:"100%",height:"300",src:"//jsfiddle.net/augustin_hiebel/r69v18Ld/embedded/html/dark/?bodyColor=333366&menuColor=1F1F42&fontColor=FFFFFF&accentColor=13F094"})})]})})]}),(0,l.jsxs)("div",{className:"mb-12",id:"dropdown-right",children:[(0,l.jsx)("h2",{className:"h3 mb-3",children:"Dropdown right"}),(0,l.jsx)("div",{className:"surface rounded-lg p-4",children:(0,l.jsxs)("div",{className:"flex flex-col lg:flex-row gap-4",children:[(0,l.jsx)("div",{className:"flex-1 flex justify-center items-center",children:(0,l.jsxs)("div",{className:"dropdown dropdown-right",children:[(0,l.jsxs)("label",{tabIndex:"1",className:"button button-primary",children:[(0,l.jsx)("span",{children:"Click me"}),(0,l.jsx)("span",{className:"icon icon-arrow-sm-right"})]}),(0,l.jsx)("div",{tabIndex:"1",className:"dropdown-content w-52 p-1",children:(0,l.jsxs)("ul",{className:"menu menu-rounded",children:[(0,l.jsx)("li",{children:(0,l.jsx)("a",{tabIndex:"1",children:(0,l.jsx)("span",{children:"Item 1"})})}),(0,l.jsx)("li",{children:(0,l.jsx)("a",{tabIndex:"1",children:(0,l.jsx)("span",{children:"Item 2"})})}),(0,l.jsx)("li",{children:(0,l.jsx)("a",{tabIndex:"1",children:(0,l.jsx)("span",{children:"Item 3"})})})]})})]})}),(0,l.jsx)("div",{className:"flex-1",children:(0,l.jsx)("iframe",{className:"rounded",width:"100%",height:"300",src:"//jsfiddle.net/augustin_hiebel/056fr2sv/embedded/html/dark/?bodyColor=333366&menuColor=1F1F42&fontColor=FFFFFF&accentColor=13F094"})})]})})]}),(0,l.jsxs)("div",{className:"mb-12",id:"dropdown-right-align-en

1d",children:[(0,l.jsx)("h2",{className:"h3 mb-3",children:"Dropdown right / align to end"}),(0,l.jsx)("div",{className:"surface rounded-lg p-4",children:(0,l.jsxs)("div",{className:"flex flex-col lg:flex-row gap-4",children:[(0,l.jsx)("div",{className:"flex-1 flex justify-center items-center",children:(0,l.jsxs)("div",{className:"dropdown dropdown-right dropdown-end",children:[(0,l.jsxs)("label",{tabIndex:"1",className:"button button-primary",children:[(0,l.jsx)("span",{children:"Click me"}),(0,l.jsx)("span",{className:"icon icon-arrow-sm-right"})]}),(0,l.jsx)("div",{tabIndex:"1",className:"dropdown-content w-52 p-1",children:(0,l.jsxs)("ul",{className:"menu menu-rounded",children:[(0,l.jsx)("li",{children:(0,l.jsx)("a",{tabIndex:"1",children:(0,l.jsx)("span",{children:"Item 1"})})}),(0,l.jsx)("li",{children:(0,l.jsx)("a",{tabIndex:"1",children:(0,l.jsx)("span",{children:"Item 2"})})}),(0,l.jsx)("li",{children:(0,l.jsx)("a",{tabIndex:"1",children:(0,l.jsx)("span",{children:"Item 3"})})})]})})]})}),(0,l.jsx)("div",{className:"flex-1",children:(0,l.jsx)("iframe",{className:"rounded",width:"100%",height:"300",src:"//jsfiddle.net/augustin_hiebel/3Ls9kz6e/embedded/html/dark/?bodyColor=333366&menuColor=1F1F42&fontColor=FFFFFF&accentColor=13F094"})})]})})]}),(0,l.jsxs)("div",{className:"mb-12",id:"open-force",children:[(0,l.jsxs)("h2",{className:"h3 mb-3",children:["Open (forced)"," ",(0,l.jsx)("small",{className:"text-ui-300 font-normal",children:"javascript"})]}),(0,l.jsx)("div",{className:"surface rounded-lg p-4",children:(0,l.jsxs)("div",{className:"flex flex-col lg:flex-row gap-4",children:[(0,l.jsx)("div",{className:"flex-1 flex justify-center items-center",children:(0,l.jsxs)("div",{ref:a,className:"dropdown ".concat(s?"dropdown-open":"dropdown-closed"),children:[(0,l.jsxs)("label",{tabIndex:"1",className:"button button-primary",onClick:function(e){e.preventDefault(),n(!s)},children:[(0,l.jsx)("span",{children:"Click me"}),(0,l.jsx)("span",{className:"icon icon-arrow-sm-down"})]}),(0,l.jsx)("div",{tabIndex:"1",className:"dropdown-content w-52 p-1",children:(0,l.jsxs)("ul",{className:"menu menu-rounded",children:[(0,l.jsx)("li",{children:(0,l.jsx)("a",{tabIndex:"1",children:(0,l.jsx)("span",{children:"Item 1"})})}),(0,l.jsx)("li",{children:(0,l.jsx)("a",{tabIndex:"1",children:(0,l.jsx)("span",{children:"Item 2"})})}),(0,l.jsx)("li",{children:(0,l.jsx)("a",{tabIndex:"1",children:(0,l.jsx)("span",{children:"Item 3"})})})]})})]})}),(0,l.jsx)("div",{className:"flex-1",children:(0,l.jsx)("iframe",{className:"rounded",width:"100%",height:"300",src:"//jsfiddle.net/augustin_hiebel/w03vp2bj/embedded/js/dark/?bodyColor=333366&menuColor=1F1F42&fontColor=FFFFFF&accentColor=13F094"})})]})})]}),(0,l.jsxs)("div",{className:"mb-12",id:"on-hover",children:[(0,l.jsx)("h2",{className:"h3 mb-3",children:"On hover"}),(0,l.jsx)("div",{className:"surface rounded-lg p-4",children:(0,l.jsxs)("div",{className:"flex flex-col lg:flex-row gap-4",children:[(0,l.jsx)("div",{className:"flex-1 flex justify-center items-center",children:(0,l.jsxs)("div",{className:"dropdown dropdown-hover",children:[(0,l.jsxs)("label",{tabIndex:"1",className:"button button-primary",children:[(0,l.jsx)("span",{children:"Click me"}),(0,l.jsx)("span",{className:"icon icon-arrow-sm-down"})]}),(0,l.jsx)("div",{tabIndex:"1",className:"dropdown-content w-52 p-1",children:(0,l.jsxs)("ul",{className:"menu menu-rounded",children:[(0,l.jsx)("li",{children:(0,l.jsx)("a",{tabIndex:"1",children:(0,l.jsx)("span",{children:"Item 1"})})}),(0,l.jsx)("li",{children:(0,l.jsx)("a",{tabIndex:"1",children:(0,l.jsx)("span",{children:"Item 2"})})}),(0,l.jsx)("li",{children:(0,l.jsx)("a",{tabIndex:"1",children:(0,l.jsx)("span",{children:"Item 3"})})})]})})]})}),(0,l.jsx)("div",{className:"flex-1",children:(0,l.jsx)("iframe",{className:"rounded",width:"100%",height:"300",src:"//jsfiddle.net/augustin_hiebel/zqw3L5bn/embedded/html/dark/?bodyColor=333366&menuColor=1F1F42&fontColor=FFFFFF&accentColor=13F094"})})]})})]}),(0,l.jsxs)("div",{className:"mb-12",id:"in-navbar",children:[(0,l.jsx)("h2",{className:"h3 mb-3",children:"Dropdown in navbar"}),(0,l.jsx)("div",{className:"surface rounded-lg p-4",children:(0,l.jsxs)("div",{className:"flex flex-col lg:flex-row gap-4",children:[(0,l.jsx)("div",{className:"flex-1 flex justify-center items-center",children:(0,l.jsxs)("div",{className:"w-full surface surface-ui-700 rounded-xl p-2 flex items-center justify-between",children:[(0,l.jsx)("a",{href:"#",className:"text-0 rounded-full bg-ui-800 border border-ui-600 p-1 block",children:(0,l.jsx)("span",{className:"icon icon-gloot-symbol text-main text-2xl"})}),(0,l.jsxs)("div",{className:"dropdown dropdown-end",children:[(0,l.jsxs)("div",{tabIndex:"1",className:"flex items-center rounded-full border border-ui-600 bg-ui-600/25 interactive",children:[(0,l.jsx)("div",{className:"avatar avatar-circle avatar-xs",children:(0,l.jsx)("div",{children:(0,l.jsx)("img",{src:"/images/prototype/DummyContent/avatars/

1avatar_user_5.jpg",alt:"avatar"})})}),(0,l.jsx)("span",{className:"icon icon-arrow-sm-down mx-2"})]}),(0,l.jsx)("div",{tabIndex:"1",className:"dropdown-content bg-ui-600 w-52 p-1",children:(0,l.jsxs)("ul",{className:"menu menu-rounded menu-secondary",children:[(0,l.jsx)("li",{children:(0,l.jsxs)("a",{tabIndex:"1",children:[(0,l.jsx)("span",{className:"icon icon-circle-09"}),(0,l.jsx)("span",{children:"Profile"})]})}),(0,l.jsx)("li",{children:(0,l.jsxs)("a",{tabIndex:"1",children:[(0,l.jsx)("span",{className:"icon icon-wallet-43"}),(0,l.jsx)("span",{children:"Wallet"})]})}),(0,l.jsx)("li",{className:"separator"}),(0,l.jsx)("li",{children:(0,l.jsxs)("a",{tabIndex:"1",children:[(0,l.jsx)("span",{className:"icon icon-cogwheel"}),(0,l.jsx)("span",{children:"Settings"})]})}),(0,l.jsx)("li",{children:(0,l.jsxs)("a",{tabIndex:"1",children:[(0,l.jsx)("span",{className:"icon icon-file-article"}),(0,l.jsx)("span",{children:"How G-Loot works"})]})}),(0,l.jsx)("li",{children:(0,l.jsxs)("a",{tabIndex:"1",href:"#",rel:"noopener noreferrer",children:[(0,l.jsx)("span",{className:"icon icon-cloud-data-download"}),(0,l.jsx)("span",{children:"Download tracker"})]})}),(0,l.jsx)("li",{className:"separator"}),(0,l.jsx)("li",{children:(0,l.jsxs)("a",{tabIndex:"1",children:[(0,l.jsx)("span",{className:"icon icon-leave"}),(0,l.jsx)("span",{children:"Log out"})]})})]})})]})]})}),(0,l.jsx)("div",{className:"flex-1",children:(0,l.jsx)("iframe",{className:"rounded",width:"100%",height:"300",src:"//jsfiddle.net/augustin_hiebel/378d6x2q/embedded/html/dark/?bodyColor=333366&menuColor=1F1F42&fontColor=FFFFFF&accentColor=13F094"})})]})})]}),(0,l.jsxs)("div",{className:"mb-12",id:"responsive-positioning",children:[(0,l.jsx)("h2",{className:"h3 mb-3",children:"Responsive positioning"}),(0,l.jsx)("div",{className:"surface rounded-lg p-4",children:(0,l.jsx)("div",{className:"",children:(0,l.jsxs)("div",{className:"flex gap-4 flex-col lg:flex-row lg:items-center",children:[(0,l.jsxs)("div",{className:"flex-1 space-y-4",children:[(0,l.jsxs)("p",{className:"text-ui-300 mb-6",children:["You can change the position of the dropdown based on the screen size using the following class name:",(0,l.jsx)("code",{className:"interactive text-xs",onClick:function(){uiContext.openToastr({size:"small",text:"class name to your clipboard",color:"green",autoDelete:!0,autoDeleteDelay:2500}),navigator.clipboard.writeText("lg:dropdown-start")},children:".{xx}:dropdown-{position}"}),".",(0,l.jsx)("br",{}),"{xx} can be ",(0,l.jsx)("code",{className:"text-xs",children:"xs"}),", ",(0,l.jsx)("code",{className:"text-xs",children:"sm"}),","," ",(0,l.jsx)("code",{className:"text-xs",children:"md"}),","," ",(0,l.jsx)("code",{className:"text-xs",children:"lg"}),","," ",(0,l.jsx)("code",{className:"text-xs",children:"xl"}),"."]}),(0,l.jsxs)("div",{className:"w-full flex gap-4 items-center",children:[(0,l.jsx)("div",{className:"w-1/2 text-ui-400 text-right text-sm leading-tight",children:"In this example, the tooltip will be displayed aligned on end by default, but will be centered above 1024px (lg)."}),(0,l.jsxs)("div",{className:"dropdown dropdown-end lg:dropdown-center",children:[(0,l.jsxs)("label",{tabIndex:"1",className:"button button-primary",children:[(0,l.jsx)("span",{children:"Click me"}),(0,l.jsx)("span",{className:"icon icon-arrow-sm-down"})]}),(0,l.jsx)("div",{tabIndex:"1",className:"dropdown-content w-52 p-1",children:(0,l.jsxs)("ul",{className:"menu menu-rounded",children:[(0,l.jsx)("li",{children:(0,l.jsx)("a",{tabIndex:"1",children:(0,l.jsx)("span",{children:"Item 1"})})}),(0,l.jsx)("li",{children:(0,l.jsx)("a",{tabIndex:"1",children:(0,l.jsx)("span",{children:"Item 2"})})}),(0,l.jsx)("li",{children:(0,l.jsx)("a",{tabIndex:"1",children:(0,l.jsx)("span",{children:"Item 3"})})})]})})]})]})]}),(0,l.jsx)("div",{className:"flex-1",children:(0,l.jsx)("iframe",{className:"rounded",width:"100%",height:"300",src:"//jsfiddle.net/augustin_hiebel/17t08vup/embedded/html/dark/?bodyColor=333366&menuColor=1F1F42&fontColor=FFFFFF&accentColor=13F094"})})]})})})]})]})};i.getLayout=a.G,s.default=i}},function(e){e.O(0,[1664,5797,3494,9774,2888,179],(function(){return s=28175,e(e.s=s);var s}));var s=e.O();_N_E=s}]);