\n \n \n \n \n Townie\n \n

\n \n

\n );\n}\n\nfunction Dropdown () {\n const { user } = useContext(AppContext);\n const { ref, open, setOpen } = useDropdown();\n\n return (\n

\n {\n setOpen(!open);\n }}\n className=\"dropdown-trigger\">\n \n \n\n {open && (\n

\n \n \n \n \n

\n )}\n

\n );\n}\n\nfunction useDropdown() {\n const [open, setOpen] = useState(false);\n const ref = useRef(null);\n\n useEffect(() => {\n const handleClickOutside = (event) => {\n if (ref.current && !ref.current.contains(event.target)) {\n setOpen(false);\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, []);\n\n return { ref, open, setOpen };\n}\n\nfunction Avatar ({ user }) {\n if (!user?.profileImageUrl) {\n return (\n

\n );\n }\n\n return (\n \n );\n}\n\nfunction LogOut () {\n const { user } = useContext(AppContext);\n return (\n <>\n \n \n );\n}\n\nfunction DarkButton () {\n const [dark, setDark] = useLocalStorage(\"DARK_MODE\", false);\n const toggle = () => {\n document.body.classList.toggle(\"dark\");\n setDark(!dark);\n }\n\n useEffect(() => {\n const cl = document.body.classList;\n if (dark && !cl.contains(\"dark\")) {\n cl.add(\"dark\");\n }\n }, []);\n\n return (\n \n \n {dark ? \"Light mode\" : \"Dark mode\"}\n \n );\n}\n\nfunction AudioButton () {\n const {audio, setAudio} = useContext(AppContext);\n\n const toggle = () => {\n setAudio(!audio);\n }\n\n return (\n \n {audio ? (\n <>\n \n Mute audio\n \n ) : (\n <>\n \n Unmute audio\n \n )}\n \n );\n}\n","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/calipso/Townie/code/frontend/components/Header.tsx","extension","actionData","errors"]