import {
chakra,
Flex,
Button,
HStack,
Icon,
IconButton,
Link,
useColorMode,
useColorModeValue,
useDisclosure,
useUpdateEffect,
Menu,
MenuButton,
MenuList,
MenuItem,
MenuDivider,
Image,
Modal,
ModalOverlay,
ModalContent,
ModalBody,
ModalCloseButton,
Text,
} from "@chakra-ui/react"
import siteConfig from "configs/site-config"
import { useViewportScroll } from "framer-motion"
import NextLink from "next/link"
import React from "react"
import { FaMoon, FaSun, FaUserAlt, FaRegSun, FaSignOutAlt, FaRegBookmark, FaChartBar, FaHome, FaArrowRight, FaGithub } from "react-icons/fa"
import Logo, { LogoIcon } from "src/components/logo"
import { MobileNavButton, MobileNavContent } from "./mobile-nav"
import AlgoliaSearch from "src/components/search/algolia-search"
import useLogin from "hooks/use-login"
const DiscordIcon = (props) => (
)
const GithubIcon = (props) => (
)
function HeaderContent() {
const mobileNav = useDisclosure()
const [login,_] = useLogin()
const { isOpen: isLoginOpen, onOpen: onLoginOpen, onClose: onLoginClose } = useDisclosure()
const { toggleColorMode: toggleMode } = useColorMode()
const text = useColorModeValue("dark", "light")
const SwitchIcon = useColorModeValue(FaMoon, FaSun)
const mobileNavBtnRef = React.useRef()
useUpdateEffect(() => {
mobileNavBtnRef.current?.focus()
}, [mobileNav.isOpen])
return (
<>
主页
标签
学习资料
工具
}
/>
{login ?
:
}
欢迎加入im.dev，共同打造全世界最优秀的开发者社区
}>使用github登录
如果继续，则表示你同意im.dev的服务条款和隐私政策
)
}
function Header(props) {
const bg = useColorModeValue("white", "gray.800")
const ref = React.useRef()
const [y, setY] = React.useState(0)
const { height = 0 } = ref.current?.getBoundingClientRect() ?? {}
const { scrollY } = useViewportScroll()
React.useEffect(() => {
return scrollY.onChange(() => setY(scrollY.get()))
}, [scrollY])
return (
height ? "sm" : undefined}
transition="box-shadow 0.2s"
pos="fixed"
top="0"
zIndex="3"
bg={bg}
left="0"
right="0"
borderTop="4px solid"
borderTopColor="teal.400"
width="full"
{...props}
>
)
}
export default Header