import {
chakra,
Flex,
Button,
HStack,
Icon,
IconButton,
Link,
useColorMode,
useColorModeValue,
useDisclosure,
useUpdateEffect,
Menu,
MenuButton,
MenuList,
MenuItem,
MenuDivider,
Image,
Modal,
ModalOverlay,
ModalContent,
ModalBody,
ModalCloseButton,
Text,
Box,
VStack,
} 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, FaFileAlt, FaBookmark, FaEdit } 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 useSession from "hooks/use-session"
import { requestApi } from "utils/axios/request"
import { removeToken, saveToken } from "utils/axios/getToken"
import { Session } from "src/types/session"
import navLinks from "./nav-links"
import { useRouter } from "next/router"
import events from "utils/events"
import storage from "utils/localStorage"
import { logout } from "utils/session"
const DiscordIcon = (props) => (
)
const GithubIcon = (props) => (
)
function HeaderContent() {
const router = useRouter()
const {pathname} = router
const mobileNav = useDisclosure()
const session:Session = useSession()
const { toggleColorMode: toggleMode } = useColorMode()
const text = useColorModeValue("dark", "light")
const SwitchIcon = useColorModeValue(FaMoon, FaSun)
const mobileNavBtnRef = React.useRef()
useUpdateEffect(() => {
mobileNavBtnRef.current?.focus()
}, [mobileNav.isOpen])
const login = () => {
storage.set("current-page", pathname)
router.push('/login')
}
return (
<>
{navLinks.map(link => {link.title})}
}
/>
{session ?
:
}
)
}
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