diff --git a/src/components/Nav/Header.module.scss b/src/components/Nav/Header.module.scss index 83f0d992..dd17f050 100644 --- a/src/components/Nav/Header.module.scss +++ b/src/components/Nav/Header.module.scss @@ -338,7 +338,6 @@ .control { cursor: pointer; - margin-left: 1.6rem; border: 0; .icon { @@ -356,7 +355,128 @@ } } + .control + .control { + margin-left: 1.6rem; + } + img { vertical-align: middle; } } + +.userControl { + align-items: baseline; + display: flex; + + @include font-size(1.7rem); + + justify-content: flex-end; + + @include media-breakpoint-down(md) { + padding: divide($container-padding-x, 2); + } + + .userpic { + margin-right: 0; + + img { + height: 100%; + width: 100%; + } + } +} + +.userControlItem { + align-items: center; + border: 2px solid #f6f6f6; + border-radius: 100%; + display: flex; + height: 2.4em; + justify-content: center; + margin-left: divide($container-padding-x, 2); + position: relative; + width: 2.4em; + + @include media-breakpoint-up(sm) { + margin-left: 1.2rem; + } + + .circlewrap { + height: 23px; + min-width: 23px; + width: 23px; + } + + .button, + a { + border: none; + + &:hover { + background: none; + + &::before { + background-color: #000; + } + + img { + filter: invert(1); + } + } + + img { + filter: invert(0); + transition: filter 0.3s; + } + + &::before { + background-color: #fff; + border-radius: 100%; + content: ''; + height: 100%; + left: 0; + position: absolute; + top: 0; + transition: background-color 0.3s; + width: 100%; + } + } + + img { + height: 20px; + vertical-align: middle; + width: auto; + } + + .textLabel { + display: none; + } +} + +.userControlItemInbox, +.userControlItemSearch { + @include media-breakpoint-down(sm) { + display: none; + } +} + +.userControlItemWritePost { + width: auto; + + @include media-breakpoint-up(lg) { + .icon { + display: none; + } + + .textLabel { + display: inline; + padding: 0 1.2rem; + position: relative; + z-index: 1; + } + } + + &, + a::before { + border-radius: 1.2em; + } +} diff --git a/src/components/Nav/Header.tsx b/src/components/Nav/Header.tsx index cf19c73c..aa29bb56 100644 --- a/src/components/Nav/Header.tsx +++ b/src/components/Nav/Header.tsx @@ -1,5 +1,4 @@ import { For, Show, createSignal, createMemo, createEffect, onMount, onCleanup } from 'solid-js' -import Private from './Private' import Notifications from './Notifications' import { Icon } from './Icon' import { Modal } from './Modal' @@ -9,11 +8,13 @@ import { useModalStore, showModal, useWarningsStore } from '../../stores/ui' import { useAuthStore } from '../../stores/auth' import { handleClientRouteLinkClick, router, Routes, useRouter } from '../../stores/router' import styles from './Header.module.scss' -import privateStyles from './Private.module.scss' import { getPagePath } from '@nanostores/router' import { getLogger } from '../../utils/logger' import { clsx } from 'clsx' import { SharePopup } from '../Article/SharePopup' +import { ProfilePopup } from './ProfilePopup' +import Userpic from '../Author/Userpic' +import type { Author } from '../../graphql/types.gen' const log = getLogger('header') @@ -35,6 +36,8 @@ export const Header = (props: Props) => { const [fixed, setFixed] = createSignal(false) const [visibleWarnings, setVisibleWarnings] = createSignal(false) const [isSharePopupVisible, setIsSharePopupVisible] = createSignal(false) + const [isProfilePopupVisible, setIsProfilePopupVisible] = createSignal(false) + // stores const { warnings } = useWarningsStore() const { session } = useAuthStore() @@ -86,7 +89,8 @@ export const Header = (props: Props) => { classList={{ [styles.headerFixed]: props.isHeaderFixed, [styles.headerScrolledTop]: !getIsScrollingBottom() && getIsScrolled(), - [styles.headerScrolledBottom]: (getIsScrollingBottom() && getIsScrolled()) || isSharePopupVisible(), + [styles.headerScrolledBottom]: + (getIsScrollingBottom() && getIsScrolled() && !isProfilePopupVisible()) || isSharePopupVisible(), [styles.headerWithTitle]: Boolean(props.title) }} > @@ -128,8 +132,15 @@ export const Header = (props: Props) => {