https://serialkillercalendar.com/SiteNav.v3.js

1function SiteNav({
2  noRule
3}) {
4  const [autoNoRule, setAutoNoRule] = React.useState(false);
5  const [open, setOpen] = React.useState(false);
6  const [hov, setHov] = React.useState(-1);
7  const panelRef = React.useRef(null);
8  React.useEffect(() => {
9    if (!open) return;
10    const onKey = e => {
11      if (e.key === "Escape") setOpen(false);
12    };
13    const onDown = e => {
14      const p = panelRef.current;
15      if (p && !p.contains(e.target) && !e.target.closest(".vfNavBurger")) setOpen(false);
16    };
17    document.addEventListener("keydown", onKey);
18    document.addEventListener("pointerdown", onDown);
19    return () => {
20      document.removeEventListener("keydown", onKey);
21      document.removeEventListener("pointerdown", onDown);
22    };
23  }, [open]);
24  const rowRef = React.useRef(null),
25    logoRef = React.useRef(null),
26    navRef = React.useRef(null),
27    outerRef = React.useRef(null);
28  React.useEffect(() => {
29    // a TornEdge right after the nav wrapper makes the hairline redundant
30    const o = outerRef.current;
31    if (!o) return;
32    let nx = o.parentElement && o.parentElement.nextElementSibling || o.nextElementSibling;
33    for (let i = 0; i < 3 && nx; i++) {
34      if (nx.hasAttribute("data-torn") || nx.querySelector("[data-torn]")) {
35        setAutoNoRule(true);
36        break;
37      }
38      if ((nx.textContent || "").trim().length) break; // real content, stop looking
39      nx = nx.nextElementSibling;
40    }
41  }, []);
42  React.useEffect(() => {
43    const measure = () => {
44      const row = rowRef.current,
45        logo = logoRef.current,
46        nav = navRef.current,
47        outer = outerRef.current;
48      if (!row || !logo || !nav || !outer) return;
49      outer.setAttribute("data-nav", "full");
50      const cart = row.querySelector(".vfNavIcons") || row.querySelector(".vfCartBtn");
51      const avail = () => row.clientWidth - logo.offsetWidth - (cart ? cart.offsetWidth : 0) - 16;
52      if (nav.scrollWidth > avail()) {
53        outer.setAttribute("data-nav", "short");
54        if (nav.scrollWidth > avail()) {
55          outer.setAttribute("data-nav", "tiny");
56          if (nav.scrollWidth > avail()) outer.setAttribute("data-nav", "burger");
57        }
58      }
59    };
60    measure();
61    const t = setTimeout(measure, 400);
62    const ro = window.ResizeObserver ? new ResizeObserver(measure) : null;
63    if (ro && rowRef.current) ro.observe(rowRef.current);
64    window.addEventListener("resize", measure);
65    return () => {
66      clearTimeout(t);
67      if (ro) ro.disconnect();
68      window.removeEventListener("resize", measure);
69    };
70  }, []);
71  const [sOpen, setSOpen] = React.useState(false);
72  const [sQ, setSQ] = React.useState("");
73  const sInpRef = React.useRef(null);
74  const openSearch = () => {
75    setSOpen(true);
76    setTimeout(() => sInpRef.current && sInpRef.current.focus(), 120);
77  };
78  const submitSearch = e => {
79    e && e.preventDefault();
80    const q = sQ.trim();
81    const ext = /\.html?$/i.test(window.location.pathname) ? "./Search.html" : "./Search.php";
82    window.location.href = ext + (q ? "?q=" + encodeURIComponent(q) : "");
83  };
84  const goHash = (e, h) => {
85    if (h.charAt(0) !== "#") return;
86    const el = document.querySelector(h);
87    if (!el) return;
88    e.preventDefault();
89    window.scrollTo({
90      top: el.getBoundingClientRect().top + window.pageYOffset - 12,
91      behavior: "smooth"
92    });
93    history.replaceState(null, "", h);
94  };
95  const links = [["All Merch", "./All-Serial-Killer-Merch.php", "All Merch", "All Merch"], ["Serial Killer Magazine", "./All-Issues-of-Serial-Killer-Magazine.php", "Killer Magazine", "Magazine"], ["Serial Killer Trading Cards", "./SERIAL-KILLER-TRADING-CARDS.php", "Killer Trading Cards", "Cards"], ["Serial Killer Books", "./All-Serial-Killer-Books.php", "Killer Books", "Books"], ["Serial Killer Archives", "./Serial-Killer-Archives.php", "Killer Archives", "Archives"], ["Contact", "#faq", "Contact", "Contact"]];
96  return /*#__PURE__*/React.createElement("div", {
97    ref: outerRef,
98    "data-nav": "full",
99    className: "relative z-40 w-full"
100  }, /*#__PURE__*/React.createElement("style", null, '.vfNavTiny{display:none}[data-nav="tiny"] .vfNavFull,[data-nav="tiny"] .vfNavShort{display:none}[data-nav="tiny"] .vfNavTiny{display:inline}[data-nav="tiny"] .vfNavDesk span[aria-hidden]{margin-left:14px;margin-right:14px}'), /*#__PURE__*/React.createElement("div", {
101    className: "vfShell"
102  }, /*#__PURE__*/React.createElement("div", {
103    ref: rowRef,
104    className: "flex items-center justify-between py-7" + (noRule || autoNoRule ? "" : " border-b border-[rgba(251,247,240,.22)]")
105  }, /*#__PURE__*/React.createElement("span", {
106    ref: logoRef,
107    className: "inline-flex shrink-0"
108  }, /*#__PURE__*/React.createElement(Wordmark, {
109    size: 28,
110    onDark: true,
111    stacked: true,
112    name: "Serial Killer",
113    sub: "Magazine",
114    href: "./index.php"
115  })), /*#__PURE__*/React.createElement("nav", {
116    ref: navRef,
117    className: "vfNavDesk items-center justify-end ml-auto"
118  }, links.map(([l, h, s, t], i) => /*#__PURE__*/React.createElement(React.Fragment, {
119    key: l
120  }, i ? /*#__PURE__*/React.createElement("span", {
121    "aria-hidden": "true",
122    className: "self-center h-[16px] w-px mx-6 bg-[rgba(251,247,240,.28)]"
123  }) : null, /*#__PURE__*/React.createElement("a", {
124    href: h,
125    onClick: e => goHash(e, h),
126    className: "vfNavLink"
127  }, /*#__PURE__*/React.createElement("span", {
128    className: "vfNavFull"
129  }, l), /*#__PURE__*/React.createElement("span", {
130    className: "vfNavShort"
131  }, s), /*#__PURE__*/React.createElement("span", {
132    className: "vfNavTiny"
133  }, t || s))))), /*#__PURE__*/React.createElement("div", {
134    className: "vfNavIcons flex items-center shrink-0 relative",
135    style: {
136      marginLeft: "auto",
137      gap: "20px"
138    }
139  }, /*#__PURE__*/React.createElement("style", null, ".vfNavIcons .vfCartBtn{margin-left:0!important;margin-right:0!important;padding-left:0!important}.vfNavSearchInput::placeholder{color:rgba(251,248,241,.5);text-transform:none;letter-spacing:0;font-size:17px}.vfNavBurger{margin-left:18px}"), /*#__PURE__*/React.createElement("form", {
140    onSubmit: submitSearch,
141    className: "flex items-center",

142    style: sOpen ? {
143      flexDirection: "row-reverse",
144      position: "absolute",
145      right: "48px",
146      top: "50%",
147      transform: "translateY(-50%)",
148      zIndex: 50,
149      border: "2px solid #F0301C",
150      background: "var(--ink-900)",
151      width: "clamp(220px,26vw,340px)",
152      overflow: "hidden",
153      padding: "3px 14px 3px 10px"
154    } : {
155      flexDirection: "row-reverse",
156      flex: "0 0 auto",
157      border: "1px solid transparent",
158      background: "transparent",
159      width: "28px",
160      overflow: "hidden"
161    }
162  }, /*#__PURE__*/React.createElement("button", {
163    type: sOpen ? "submit" : "button",
164    onClick: e => {
165      if (!sOpen) {
166        e.preventDefault();
167        openSearch();
168      }
169    },
170    className: "vfCartBtn",
171    "aria-label": "Search",
172    title: "Search",
173    style: {
174      flex: "0 0 auto",
175      color: sOpen ? "#F0301C" : undefined
176    }
177  }, /*#__PURE__*/React.createElement("svg", {
178    width: "28",
179    height: "28",
180    viewBox: "0 0 24 24",
181    fill: "none",
182    stroke: "currentColor",
183    strokeWidth: "1.8",
184    strokeLinecap: "round",
185    strokeLinejoin: "round",
186    "aria-hidden": "true"
187  }, /*#__PURE__*/React.createElement("circle", {
188    cx: "10.5",
189    cy: "10.5",
190    r: "7.5"
191  }), /*#__PURE__*/React.createElement("line", {
192    x1: "16",
193    y1: "16",
194    x2: "21",
195    y2: "21"
196  }))), /*#__PURE__*/React.createElement("input", {
197    ref: sInpRef,
198    value: sQ,
199    onChange: e => setSQ(e.target.value),
200    onBlur: () => {
201      if (!sQ.trim()) setSOpen(false);
202    },
203    onKeyDown: e => {
204      if (e.key === "Escape") {
205        setSQ("");
206        setSOpen(false);
207      }
208    },
209    placeholder: "Search the site\u2026",
210    tabIndex: sOpen ? 0 : -1,
211    className: "vfNavSearchInput",
212    style: sOpen ? {
213      flex: "1 1 auto",
214      minWidth: 0,
215      background: "transparent",
216      border: 0,
217      outline: "none",
218      color: "var(--bone-100)",
219      fontFamily: "var(--font-text)",
220      fontSize: "17px",
221      letterSpacing: "0",
222      padding: "12px 6px 12px 2px",
223      opacity: 1,
224      transition: "opacity .25s"
225    } : {
226      flex: "0 0 0px",
227      width: 0,
228      minWidth: 0,
229      padding: 0,
230      background: "transparent",
231      border: 0,
232      outline: "none",
233      opacity: 0
234    }
235  })), /*#__PURE__*/React.createElement("a", {
236    href: "https://www.paypal.com/cgi-bin/webscr?cmd=_cart&display=1&business=WUSATYUKKDUYJ",
237    target: "_blank",
238    rel: "noopener",
239    className: "vfCartBtn",
240    "aria-label": "View cart",
241    title: "View cart"
242  }, /*#__PURE__*/React.createElement("svg", {
243    width: "28",
244    height: "28",
245    viewBox: "0 0 24 24",
246    fill: "none",
247    stroke: "currentColor",
248    strokeWidth: "1.8",
249    strokeLinecap: "round",
250    strokeLinejoin: "round",
251    "aria-hidden": "true"
252  }, /*#__PURE__*/React.createElement("circle", {
253    cx: "9",
254    cy: "21",
255    r: "1"
256  }), /*#__PURE__*/React.createElement("circle", {
257    cx: "20",
258    cy: "21",
259    r: "1"
260  }), /*#__PURE__*/React.createElement("path", {
261    d: "M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"
262  })))), /*#__PURE__*/React.createElement("button", {
263    className: "vfNavBurger vfBurger",
264    style: {
265      color: "var(--bone-100)"
266    },
267    "aria-label": "Menu",
268    onClick: () => setOpen(!open)
269  }, open ? /*#__PURE__*/React.createElement("svg", {
270    width: "20",
271    height: "20",
272    viewBox: "0 0 24 24",
273    fill: "none",
274    stroke: "currentColor",
275    strokeWidth: "2.2",
276    strokeLinecap: "round",
277    "aria-hidden": "true"
278  }, /*#__PURE__*/React.createElement("line", {
279    x1: "5",
280    y1: "5",
281    x2: "19",
282    y2: "19"
283  }), /*#__PURE__*/React.createElement("line", {
284    x1: "19",
285    y1: "5",
286    x2: "5",
287    y2: "19"
288  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("span", null))))), open && /*#__PURE__*/React.createElement("div", {
289    className: "absolute left-0 right-0 top-full",
290    style: {
291      zIndex: 60
292    }
293  }, /*#__PURE__*/React.createElement("div", {
294    onClick: () => setOpen(false),
295    "aria-hidden": "true",
296    className: "vfNavScrim",
297    style: {
298      position: "fixed",
299      inset: "0",
300      background: "rgba(16,14,12,.55)",
301      zIndex: -1
302    }
303  }), /*#__PURE__*/React.createElement("div", {
304    className: "vfShell vfNavSheetWrap flex justify-end"
305  }, /*#__PURE__*/React.createElement("div", {
306    ref: panelRef,
307    className: "vfNavSheet",
308    style: {
309      width: "max-content",
310      minWidth: "232px",
311      maxWidth: "100%",
312      background: "var(--ink-900)",
313      border: "1px solid rgba(251,248,241,.2)",
314      borderTop: "none",
315      boxShadow: "0 28px 54px -24px rgba(0,0,0,.85)"
316    }
317  }, /*#__PURE__*/React.createElement("div", {
318    "aria-hidden": "true",
319    style: {
320      height: "3px",
321      background: "#F0301C"
322    }
323  }), /*#__PURE__*/React.createElement("nav", {
324    className: "flex flex-col py-2"
325  }, [...links.map(([l, h]) => [l, h, false]), ["View Cart", "https://www.paypal.com/cgi-bin/webscr?cmd=_cart&display=1&business=WUSATYUKKDUYJ", true]].map(([l, h, ext], i, arr) => /*#__PURE__*/React.createElement("a", {
326    key: l,
327    href: h,
328    target: ext ? "_blank" : undefined,
329    rel: ext ? "noopener" : undefined,
330    onClick: e => {
331      goHash(e, h);
332      setOpen(false);
333    },
334    onMouseEnter: () => setHov(i),
335    onMouseLeave: () => setHov(-1),
336    className: "vfNavRow",
337    style: {
338      display: "flex",
339      alignItems: "center",
340      justifyContent: "space-between",
341      gap: "18px",
342      padding: "13px 26px",
343      fontFamily: "var(--font-display)",
344      fontSize: "16px",
345      letterSpacing: ".07em",
346      textTransform: "uppercase",
347      whiteSpace: "nowrap",
348      textDecoration: "none",
349      border: 0,
350      borderTop: i ? "1px solid rgba(251,248,241,.12)" : "none",
351      color: hov === i ? "var(--amber-300)" : "var(--bone-100)",
352      background: hov === i ? "rgba(251,248,241,.06)" : "transparent",
353      transition: "color .15s,background .15s"
354    }
355  }, /*#__PURE__*/React.createElement("span", null, l), /*#__PURE__*/React.createElement("svg", {
356    className: "vfNavChev",
357    width: "7",
358    height: "12",

359    viewBox: "0 0 7 12",
360    fill: "none",
361    stroke: "currentColor",
362    strokeWidth: "1.6",
363    strokeLinecap: "round",
364    strokeLinejoin: "round",
365    "aria-hidden": "true",
366    style: {
367      flex: "0 0 auto",
368      opacity: .5
369    }
370  }, /*#__PURE__*/React.createElement("path", {
371    d: "M1 1l5 5-5 5"
372  })))))))));
373}
374window.SiteNav = SiteNav;