import styles from './Header.module.scss' import { clsx } from 'clsx' import { router, useRouter } from '../../stores/router' import { Icon } from '../_shared/Icon' import { createEffect, createMemo, createSignal, onCleanup, onMount, Show } from 'solid-js' import Notifications from './Notifications' import { ProfilePopup } from './ProfilePopup' import Userpic from '../Author/Userpic' import { showModal, useWarningsStore } from '../../stores/ui' import { ShowOnlyOnClient } from '../_shared/ShowOnlyOnClient' import { useSession } from '../../context/session' import { useLocalize } from '../../context/localize' import { getPagePath } from '@nanostores/router' import { Button } from '../_shared/Button' import { useEditorContext } from '../../context/editor' import { Popover } from '../_shared/Popover' type HeaderAuthProps = { setIsProfilePopupVisible: (value: boolean) => void } type IconedButton = { value: string icon: string action: () => void } const MD_WIDTH_BREAKPOINT = 992 export const HeaderAuth = (props: HeaderAuthProps) => { const { t } = useLocalize() const { page } = useRouter() const [visibleWarnings, setVisibleWarnings] = createSignal(false) const { warnings } = useWarningsStore() const { session, isSessionLoaded, isAuthenticated } = useSession() const { actions: { toggleEditorPanel, saveShout, publishShout } } = useEditorContext() const toggleWarnings = () => setVisibleWarnings(!visibleWarnings()) const handleBellIconClick = (event: Event) => { event.preventDefault() if (!isAuthenticated()) { showModal('auth') return } toggleWarnings() } const isEditorPage = createMemo( () => page().route === 'create' || page().route === 'edit' || page().route === 'editSettings' ) const showNotifications = createMemo(() => isAuthenticated() && !isEditorPage()) const showSaveButton = createMemo(() => isAuthenticated() && isEditorPage()) const showCreatePostButton = createMemo(() => isAuthenticated() && !isEditorPage()) const showAuthenticatedControls = createMemo(() => isAuthenticated()) const handleBurgerButtonClick = () => { toggleEditorPanel() } const handleSaveButtonClick = () => { saveShout() } const handlePublishButtonClick = () => { publishShout() } const [width, setWidth] = createSignal(0) const handleResize = () => setWidth(window.innerWidth) onMount(() => { handleResize() window.addEventListener('resize', handleResize) onCleanup(() => window.removeEventListener('resize', handleResize)) }) const renderIconedButton = (iconedButtonProps: IconedButton) => { return ( {iconedButtonProps.value}} variant={'outline'} onClick={handleSaveButtonClick} /> } > {(ref) => ( } /> ) }