{"version":3,"file":"CaseStudyNav.DF7if3Gc.mjs","names":["useState","useRef"],"sources":["https:/framerusercontent.com/modules/SpiAC8R4Ao5Aw9R3Gipu/u62H97Sw9mZE6Lq3dVBV/CaseStudyNav.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useState,useEffect,useRef}from\"react\";import{createPortal}from\"react-dom\";import{addPropertyControls,ControlType}from\"framer\";/**\n * CASE STUDY FLOATING NAV\n *\n * Drop one instance on each case-study page.\n * In the right-hand properties panel, edit:\n *   - Nav Items  -> the label + scroll target for THIS page\n *\n * Scroll targets:\n *   Type the section's HTML id with a leading \"#\", e.g. \"#overview\".\n *   To create that id on a Framer section, drop the companion\n *   <SectionAnchor> component (below) at the top of the section\n *   and give it the matching id (\"overview\", no \"#\").\n */// shared shadow stack from your spec (default + hover are identical)\nconst SHADOW=[\"0 0 0 2px #0F0F0F\",\"0 2px 5px 1px rgba(10, 10, 10, 0.6)\",\"inset 2px 4px 3px 0 #2B2B2B\",\"inset -2px -3px 3px 0 rgba(36, 36, 36, 0.5)\"].join(\", \");export default function CaseStudyNav(props){const{items,buttonSize,iconColor,buttonColor,buttonHoverColor,overlayPillColor,pillHoverColor,textColor,fontFamily,fontSize,position,offset,floating}=props;const[mounted,setMounted]=useState(false);useEffect(()=>setMounted(true),[]);const[open,setOpen]=useState(false);const[hoverBtn,setHoverBtn]=useState(false);const[activeId,setActiveId]=useState(null);const closeTimer=useRef(null);// keep open while moving between button and overlay\nconst handleEnter=()=>{if(closeTimer.current)clearTimeout(closeTimer.current);setOpen(true);};const handleLeave=()=>{closeTimer.current=setTimeout(()=>setOpen(false),120);};// active-section tracking via IntersectionObserver\nuseEffect(()=>{const targets=items.map(it=>it.target?.replace(\"#\",\"\")).filter(Boolean);if(targets.length===0)return;const els=targets.map(id=>document.getElementById(id)).filter(Boolean);if(els.length===0)return;const obs=new IntersectionObserver(entries=>{entries.forEach(entry=>{if(entry.isIntersecting)setActiveId(entry.target.id);});},{rootMargin:\"-40% 0px -55% 0px\",threshold:0});els.forEach(el=>obs.observe(el));return()=>obs.disconnect();},[items]);const scrollTo=target=>{const id=target?.replace(\"#\",\"\");const el=document.getElementById(id);if(el)el.scrollIntoView({behavior:\"smooth\",block:\"start\"});setOpen(false);};// positioning: fixed to viewport when floating, otherwise inline\n// (let Framer place/pin the component itself)\nconst posStyle=floating?{position:\"fixed\",zIndex:9999}:{position:\"relative\"};if(floating){if(position===\"Bottom Right\"){posStyle.bottom=offset;posStyle.right=offset;posStyle.alignItems=\"flex-end\";}else if(position===\"Bottom Left\"){posStyle.bottom=offset;posStyle.left=offset;posStyle.alignItems=\"flex-start\";}else if(position===\"Top Right\"){posStyle.top=offset;posStyle.right=offset;posStyle.alignItems=\"flex-end\";}else{posStyle.top=offset;posStyle.left=offset;posStyle.alignItems=\"flex-start\";}}else{posStyle.alignItems=position===\"Bottom Right\"||position===\"Top Right\"?\"flex-end\":\"flex-start\";}const openUpward=position===\"Bottom Right\"||position===\"Bottom Left\";const tree=/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",flexDirection:\"column\",gap:12,...posStyle},onMouseEnter:handleEnter,onMouseLeave:handleLeave,children:[open&&/*#__PURE__*/_jsx(\"div\",{style:{display:\"flex\",flexDirection:\"column\",gap:10,order:openUpward?0:2,alignItems:posStyle.alignItems,animation:\"csnav-fade 160ms ease-out\"},children:items.map((item,i)=>{const isActive=activeId&&item.target?.replace(\"#\",\"\")===activeId;return /*#__PURE__*/_jsx(\"div\",{onClick:()=>scrollTo(item.target),style:{cursor:\"pointer\",background:isActive?pillHoverColor:overlayPillColor,color:textColor,fontFamily,fontSize,fontWeight:600,padding:\"12px 22px\",borderRadius:14,whiteSpace:\"nowrap\",boxShadow:SHADOW,transition:\"background 160ms ease\"},onMouseEnter:e=>e.currentTarget.style.background=pillHoverColor,onMouseLeave:e=>e.currentTarget.style.background=isActive?pillHoverColor:overlayPillColor,children:item.label},i);})}),/*#__PURE__*/_jsx(\"button\",{onMouseEnter:()=>setHoverBtn(true),onMouseLeave:()=>setHoverBtn(false),style:{order:openUpward?1:0,width:buttonSize,height:buttonSize,borderRadius:\"50%\",border:\"none\",cursor:\"pointer\",background:hoverBtn?buttonHoverColor:buttonColor,boxShadow:SHADOW,display:\"flex\",alignItems:\"center\",justifyContent:\"center\",transition:\"background 160ms ease\",padding:0},\"aria-label\":\"Section navigation\",children:/*#__PURE__*/_jsxs(\"svg\",{width:buttonSize*.5,height:buttonSize*.5,viewBox:\"0 0 24 24\",fill:\"none\",stroke:iconColor,strokeWidth:2.5,strokeLinecap:\"round\",children:[/*#__PURE__*/_jsx(\"line\",{x1:\"3\",y1:\"6\",x2:\"21\",y2:\"6\"}),/*#__PURE__*/_jsx(\"line\",{x1:\"3\",y1:\"12\",x2:\"21\",y2:\"12\"}),/*#__PURE__*/_jsx(\"line\",{x1:\"3\",y1:\"18\",x2:\"21\",y2:\"18\"})]})}),/*#__PURE__*/_jsx(\"style\",{children:`\n                @keyframes csnav-fade {\n                    from { opacity: 0; transform: translateY(6px); }\n                    to   { opacity: 1; transform: translateY(0); }\n                }\n            `})]});// When floating, render into a body-level portal so the fixed\n// positioning escapes Framer's component wrapper and pins to the\n// viewport reliably. On the Framer canvas (no document body portal\n// target during SSR), fall back to inline until mounted.\nif(floating){if(!mounted||typeof document===\"undefined\")return null;return /*#__PURE__*/createPortal(tree,document.body);}return tree;}CaseStudyNav.defaultProps={items:[{label:\"Overview\",target:\"#overview\"},{label:\"Problem\",target:\"#problem\"},{label:\"Process\",target:\"#process\"},{label:\"Outcome\",target:\"#outcome\"}],buttonSize:72,iconColor:\"#31CC7E\",buttonColor:\"#262626\",buttonHoverColor:\"#2D2D2D\",pillHoverColor:\"#2D2D2D\",overlayPillColor:\"#262626\",textColor:\"#31CC7E\",fontFamily:\"Inter, sans-serif\",fontSize:18,position:\"Bottom Right\",offset:32,floating:true};addPropertyControls(CaseStudyNav,{items:{type:ControlType.Array,title:\"Nav Items\",control:{type:ControlType.Object,controls:{label:{type:ControlType.String,title:\"Label\",defaultValue:\"Section\"},target:{type:ControlType.String,title:\"Scroll To\",defaultValue:\"#section\",placeholder:\"#section-id\"}}}},floating:{type:ControlType.Boolean,title:\"Floating\",enabledTitle:\"Fixed\",disabledTitle:\"Inline\",defaultValue:true},position:{type:ControlType.Enum,title:\"Position\",options:[\"Bottom Right\",\"Bottom Left\",\"Top Right\",\"Top Left\"],defaultValue:\"Bottom Right\"},offset:{type:ControlType.Number,title:\"Offset\",min:0,max:120,defaultValue:32},buttonSize:{type:ControlType.Number,title:\"Button Size\",min:40,max:120,defaultValue:72},buttonColor:{type:ControlType.Color,title:\"Button\",defaultValue:\"#262626\"},buttonHoverColor:{type:ControlType.Color,title:\"Button Hover\",defaultValue:\"#2D2D2D\"},overlayPillColor:{type:ControlType.Color,title:\"Pill\",defaultValue:\"#262626\"},pillHoverColor:{type:ControlType.Color,title:\"Pill Hover\",defaultValue:\"#2D2D2D\"},iconColor:{type:ControlType.Color,title:\"Icon\",defaultValue:\"#31CC7E\"},textColor:{type:ControlType.Color,title:\"Text\",defaultValue:\"#31CC7E\"},fontSize:{type:ControlType.Number,title:\"Font Size\",min:10,max:36,defaultValue:18}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"CaseStudyNav\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./CaseStudyNav.map"],"mappings":"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"}