{"version":3,"file":"FloatingNavigation.Bb-hl-sQ.mjs","names":["React.useState","React.useRef"],"sources":["https:/framerusercontent.com/modules/jHhlldbVFxIHZY6xRjAR/lcuAie0d3L8QJK3DQ0fZ/FloatingNavigation.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";import{AnimatePresence,motion}from\"framer-motion\";export default function FloatingMenu(props){const{layoutMode=\"home\",selectedLabel=\"Selected work\",menuLabel=\"Menu\",selectedLink=\"/projects\",introText=\"Hi, I’m Ghada. Senior Art Director based in Berlin. Building concepts and visuals for campaigns and brands.\",selectedBackground=\"#0034EE\",selectedTextColor=\"#FFFFFF\",menuBackground=\"#E9FF5D\",menuTextColor=\"#000000\",glassColor=\"rgba(208, 208, 208, 0.25)\",glassBlur=10,fontFamily=\"Helvetica Neue\",fontSize=17,fontWeight=500,style}=props;const isOnCanvas=RenderTarget.current()===RenderTarget.canvas;const isProjectLayout=layoutMode===\"project\";const[isOpen,setIsOpen]=React.useState(false);const[isRaised,setIsRaised]=React.useState(false);const navbarRef=React.useRef(null);const navigationTimer=React.useRef(null);const[navbarWidth,setNavbarWidth]=React.useState(305);const dropdownIsOpen=isOpen&&!isProjectLayout;const navbarIsAtTop=isRaised||dropdownIsOpen;React.useLayoutEffect(()=>{const navbar=navbarRef.current;if(!navbar)return;const updateWidth=()=>{const width=navbar.getBoundingClientRect().width;if(width>0){setNavbarWidth(Math.ceil(width));}};updateWidth();const observer=new ResizeObserver(updateWidth);observer.observe(navbar);return()=>observer.disconnect();},[]);React.useEffect(()=>{if(isProjectLayout){setIsOpen(false);setIsRaised(false);}},[isProjectLayout]);React.useEffect(()=>{return()=>{if(navigationTimer.current!==null){window.clearTimeout(navigationTimer.current);}};},[]);const openLink=link=>{if(!link)return;window.location.href=link;};const handleSelectedClick=()=>{if(!selectedLink||isOnCanvas)return;if(isProjectLayout){openLink(selectedLink);return;}setIsOpen(false);setIsRaised(true);if(navigationTimer.current!==null){window.clearTimeout(navigationTimer.current);}navigationTimer.current=window.setTimeout(()=>{openLink(selectedLink);},450);};const handleMenuClick=()=>{if(isProjectLayout)return;if(dropdownIsOpen){setIsOpen(false);setIsRaised(false);}else{setIsRaised(true);setIsOpen(true);}};const handleIconClick=()=>{if(isProjectLayout)return;setIsRaised(true);};const textStyle={fontFamily,fontSize,fontWeight,lineHeight:\"85%\",letterSpacing:\"-0.01em\",whiteSpace:\"nowrap\"};const positionAnimation=isOnCanvas?{top:0,left:0,x:0,y:0}:isProjectLayout?{top:20,left:20,x:0,y:0}:{top:navbarIsAtTop?20:\"50%\",left:\"50%\",x:\"-50%\",y:navbarIsAtTop?0:\"-50%\"};return /*#__PURE__*/_jsx(\"div\",{style:{...style,width:navbarWidth,height:45,position:\"relative\",pointerEvents:\"none\"},children:/*#__PURE__*/_jsxs(motion.div,{initial:false,animate:positionAnimation,transition:{type:\"spring\",stiffness:240,damping:28,mass:.8},style:{position:isOnCanvas?\"relative\":\"fixed\",width:navbarWidth,zIndex:9999,pointerEvents:\"auto\"},children:[/*#__PURE__*/_jsxs(\"div\",{ref:navbarRef,style:{width:\"max-content\",height:45,display:\"flex\",alignItems:\"center\",gap:5,padding:5,boxSizing:\"border-box\",borderRadius:5,background:glassColor,backdropFilter:`blur(${glassBlur}px)`,WebkitBackdropFilter:`blur(${glassBlur}px)`,overflow:\"hidden\"},children:[/*#__PURE__*/_jsx(\"button\",{type:\"button\",onClick:handleSelectedClick,style:{height:35,padding:\"0 11px\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",border:\"none\",borderRadius:4,background:selectedBackground,color:selectedTextColor,cursor:selectedLink?\"pointer\":\"default\",appearance:\"none\",...textStyle},children:selectedLabel}),/*#__PURE__*/_jsx(\"button\",{type:\"button\",onClick:handleIconClick,\"aria-label\":\"Move navigation to top\",style:{width:68,height:36,flexShrink:0,padding:0,display:\"flex\",alignItems:\"center\",justifyContent:\"center\",border:\"none\",background:\"transparent\",cursor:isProjectLayout?\"default\":\"pointer\",appearance:\"none\"},children:/*#__PURE__*/_jsx(DefaultIcon,{})}),/*#__PURE__*/_jsxs(\"button\",{type:\"button\",onClick:handleMenuClick,\"aria-expanded\":dropdownIsOpen,style:{height:35,padding:\"0 11px\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",gap:6,border:\"none\",borderRadius:4,background:menuBackground,color:menuTextColor,cursor:isProjectLayout?\"default\":\"pointer\",appearance:\"none\",...textStyle},children:[/*#__PURE__*/_jsx(\"span\",{children:dropdownIsOpen?\"Close\":menuLabel}),/*#__PURE__*/_jsxs(\"span\",{\"aria-hidden\":\"true\",style:{display:\"flex\",flexDirection:\"column\",gap:3},children:[/*#__PURE__*/_jsx(\"span\",{style:{width:4,height:4,borderRadius:\"50%\",background:\"currentColor\"}}),/*#__PURE__*/_jsx(\"span\",{style:{width:4,height:4,borderRadius:\"50%\",background:\"currentColor\"}})]})]})]}),/*#__PURE__*/_jsx(AnimatePresence,{children:dropdownIsOpen&&/*#__PURE__*/_jsx(motion.div,{initial:{opacity:0,height:0},animate:{opacity:1,height:\"auto\"},exit:{opacity:0,height:0},transition:{duration:.4,ease:[.22,1,.36,1]},style:{width:navbarWidth,overflow:\"hidden\"},children:/*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",marginTop:5,padding:\"12px 12px 14px\",boxSizing:\"border-box\",borderRadius:5,background:glassColor,backdropFilter:`blur(${glassBlur}px)`,WebkitBackdropFilter:`blur(${glassBlur}px)`},children:/*#__PURE__*/_jsx(\"p\",{style:{margin:0,fontFamily,fontSize:16,fontWeight:500,lineHeight:\"105%\",letterSpacing:\"-0.02em\"},children:introText})})})})]})});}function DefaultIcon(){return /*#__PURE__*/_jsxs(\"svg\",{width:\"76\",height:\"29\",viewBox:\"0 0 75 28\",fill:\"none\",xmlns:\"http://www.w3.org/2000/svg\",style:{display:\"block\",width:76,height:29},children:[/*#__PURE__*/_jsx(\"circle\",{cx:\"13.95\",cy:\"13.95\",r:\"13.95\",fill:\"#0034EE\"}),/*#__PURE__*/_jsx(\"path\",{d:\"M8.1 16.2S9.45 20.7 14.4 20.7s6.3-4.5 6.3-4.5\",stroke:\"#EEF7FF\",strokeWidth:\"1.8\"}),/*#__PURE__*/_jsx(\"circle\",{cx:\"18\",cy:\"10.8\",r:\"1.8\",fill:\"#EEF7FF\"}),/*#__PURE__*/_jsx(\"circle\",{cx:\"10.8\",cy:\"10.8\",r:\"1.8\",fill:\"#EEF7FF\"}),/*#__PURE__*/_jsx(\"circle\",{cx:\"37.35\",cy:\"13.95\",r:\"13.05\",fill:\"#EEF7FF\",stroke:\"#0034EE\",strokeWidth:\"1.8\"}),/*#__PURE__*/_jsx(\"path\",{d:\"M38.66 13.47h5.5v1.71h-5.5v5.52h-1.71v-5.52h-5.5v-1.71h5.5V7.95h1.71v5.52Z\",fill:\"#0034EE\"}),/*#__PURE__*/_jsx(\"circle\",{cx:\"60.75\",cy:\"13.95\",r:\"13.95\",fill:\"#0034EE\"}),/*#__PURE__*/_jsx(\"path\",{d:\"M54.9 16.2s1.35 4.5 6.3 4.5 6.3-4.5 6.3-4.5\",stroke:\"#EEF7FF\",strokeWidth:\"1.8\"}),/*#__PURE__*/_jsx(\"circle\",{cx:\"64.8\",cy:\"10.8\",r:\"1.8\",fill:\"#EEF7FF\"}),/*#__PURE__*/_jsx(\"circle\",{cx:\"57.6\",cy:\"10.8\",r:\"1.8\",fill:\"#EEF7FF\"})]});}addPropertyControls(FloatingMenu,{layoutMode:{type:ControlType.Enum,title:\"Layout\",options:[\"home\",\"project\"],optionTitles:[\"Home\",\"Project\"],defaultValue:\"home\"},selectedLabel:{type:ControlType.String,title:\"Selected\",defaultValue:\"Selected work\"},selectedLink:{type:ControlType.Link,title:\"Selected Link\",defaultValue:\"/projects\"},menuLabel:{type:ControlType.String,title:\"Menu\",defaultValue:\"Menu\"},introText:{type:ControlType.String,title:\"Introduction\",displayTextArea:true,defaultValue:\"Hi, I’m Ghada. Senior Art Director based in Berlin. Building concepts and visuals for campaigns and brands.\"},selectedBackground:{type:ControlType.Color,title:\"Selected BG\",defaultValue:\"#0034EE\"},selectedTextColor:{type:ControlType.Color,title:\"Selected Text\",defaultValue:\"#FFFFFF\"},menuBackground:{type:ControlType.Color,title:\"Menu BG\",defaultValue:\"#E9FF5D\"},menuTextColor:{type:ControlType.Color,title:\"Menu Text\",defaultValue:\"#000000\"},glassColor:{type:ControlType.Color,title:\"Glass\",defaultValue:\"rgba(208, 208, 208, 0.25)\"},glassBlur:{type:ControlType.Number,title:\"Blur\",defaultValue:10,min:0,max:30,step:1,unit:\"px\"},fontFamily:{type:ControlType.String,title:\"Font\",defaultValue:\"Helvetica Neue\"},fontSize:{type:ControlType.Number,title:\"Size\",defaultValue:17,min:8,max:40,step:1,unit:\"px\"},fontWeight:{type:ControlType.Enum,title:\"Weight\",options:[400,500,600,700],optionTitles:[\"Regular\",\"Medium\",\"Semibold\",\"Bold\"],defaultValue:500}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"FloatingMenu\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./FloatingNavigation.map"],"mappings":"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"}