added drop menu user (profile, setings, logout)

src/App.scss

@@ -49,12 +49,14 @@ select {
     font: inherit;
 }
 
-//
 .Header {
     display: flex;
     background-color: #ececec;
     justify-content: space-between;
     align-items: center;
+    .Logo {
+        display: block;
+    }
     &__inner {
         max-width: 1250px;
         margin: 0 auto;
@@ -76,27 +78,69 @@ select {
             background-color: #0057ff1f;
         }
     }
+    &__search-drop {
+        max-width: 500px;
+        min-width: 320px;
+        max-height: 500px;
+        padding: 16px 0;
+        overflow: auto;
+    }
     &__userNav {
         div {
             padding-left: 20px;
         }
+        a {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        svg {
+            width: 24px;
+            height: 24px;
+        }
     }
 }
-.ant-popover-inner-content {
-    max-width: 500px;
-    min-width: 320px;
-    max-height: 500px;
-    padding: 16px 0;
-    overflow: auto;
+
+.ant-popover {
+    padding-top: 12px;
+    &-arrow {
+        width: 14px;
+        height: 19px;
+        &-content {
+            width: 14px;
+            height: 14px;
+        }
+    }
+    &-inner-content {
+        padding: 2px 0 0;
+    }
+}
+
+.dropMenu {
+    max-width: 200px;
+    min-width: 150px;
+    .anticon.anticon-user,
+    li {
+        transition: all 0.3s;
+        &:hover {
+            background-color: rgba($color: #0057ff, $alpha: 0.12);
+        }
+    }
+    a {
+        transition: all 0.3s;
+    }
+    button {
+        cursor: pointer;
+        text-align-last: left;
+        width: 100%;
+        background-color: transparent;
+        border: none;
+        padding: 0;
+        margin: 0;
+        transition: all 0.3s;
+    }
 }
-// .UserNav {
-//     img {
-//         width: 50px;
-//         border-radius: 50%;
-//         overflow: hidden;
-//         border: 1px solid #000;
-//     }
-// }
+
 
 .Authorization {
     height: 100%;

src/actions/index.js

@@ -7,6 +7,8 @@ export const actionPending = name => ({ type: 'PROMISE', status: 'PENDING', name
 export const actionResolved = (name, payload) => ({ type: 'PROMISE', status: 'RESOLVED', name, payload })
 export const actionRejected = (name, error) => ({ type: 'PROMISE', status: 'REJECTED', name, error })
 
+export const actionAuthLogin = (token, remember) => ({ type: 'AUTH_LOGIN', token, remember })
+export const actionAuthLogout = () => ({ type: 'AUTH_LOGOUT' })
 
 export const actionAddPostsFeedAC = (addPosts, myLikes) => ({ type: 'ADD-POST-FEED', addPosts, myLikes })
 export const actionAddLikePostAC = (postId, newResult) => ({ type: 'ADD-POST-LIKE', postId, newResult })

src/components/header/Header.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import logo from '../../logo.svg';
 import { Link } from 'react-router-dom';
-import { CFieldSearch, Searcha } from './Search';
+import { CFieldSearch } from './Search';
 import { connect } from 'react-redux';
-import { actionProfilData } from '../../actions';
+import { actionAuthLogout, actionProfilData } from '../../actions';
 import { backURL } from '../../helpers';
 import Layout, { Header } from 'antd/lib/layout/layout';
-import { Avatar, Col, Image, Row } from 'antd';
+import { Avatar, Col, Menu, Popover, Row } from 'antd';
+import { UserOutlined, CompassOutlined, SettingOutlined, HomeOutlined, ImportOutlined, MessageOutlined, PlusCircleOutlined } from '@ant-design/icons/lib/icons';
 
 const UserNav = ({ id, profileData }) => {
     profileData(id)
@@ -15,61 +16,75 @@ const UserNav = ({ id, profileData }) => {
     </div>
 }
 
-export const UserAvatar = ({ avatar, login = "user", nick }) => {
+export const UserAvatar = ({ avatarSize, avatar, login = "user", nick }) => {
     return (
         <>
             {
                 avatar && avatar?.url ?
                     <Avatar style={{
-                        width: 40,
-                        height: 40
+                        width: avatarSize,
+                        height: avatarSize
                     }}
                         src={
                             <img src={(backURL + '/' + avatar.url)} alt='avatar' />
                         } /> :
                     <Avatar style={{
-                        width: '40px',
-                        height: '40px',
+                        width: avatarSize,
+                        height: avatarSize,
                         color: '#040c80',
                         backgroundColor: '#f8cff0'
                     }}>
-                        <span style={{ fontWeight: 500, fontSize: '1.3em', lineHeight: '40px' }}>{nick ? nick[0].toUpperCase() : login ? login[0].toUpperCase() : 'U'}
+                        <span style={{ fontWeight: 500, fontSize: '1.3em', lineHeight: avatarSize }}>{nick ? nick[0].toUpperCase() : login ? login[0].toUpperCase() : 'U'}
                         </span>
                     </Avatar >
             }
         </>
     )
 }
+const ProfileDropMenu = ({ onLogOut }) =>
+    <Menu className='dropMenu'>
+        <Menu.Item key={'0'}>
+            <Link to={'/'}><UserOutlined /> My Profile</Link>
+        </Menu.Item>
+        <Menu.Item key={'1'}>
+            <Link to={'/'}><SettingOutlined /> Settings</Link>
+        </Menu.Item>
+        <Menu.Divider />
+        <Menu.Item key={'2'}>
+            <button onClick={() => onLogOut()}><ImportOutlined /> Log out</button>
+        </Menu.Item>
+    </Menu>
 
-
+const CProfileDropMenu = connect(null, { onLogOut: actionAuthLogout })(ProfileDropMenu)
 
 const UserNavIcon = ({ userData: { _id, avatar, login } }) =>
     <Row justify="end" align="middle" className='Header__userNav'>
         <Col >
-            <Link to='/'>Home</Link>
+            <Link to='/'><HomeOutlined /></Link>
         </Col>
         <Col >
-            <Link to='/message'>Messsege</Link>
+            <Link to='/message'><MessageOutlined /></Link>
         </Col>
         <Col >
-            <Link to='/add'>addq</Link>
+            <Link to='/add'><PlusCircleOutlined /></Link>
         </Col>
         <Col >
-            <Link to='/rar'>Random</Link>
+            <Link to='/rar'><CompassOutlined /></Link>
         </Col>
         <Col>
-            <Link to={`/${_id}`}>
-                <UserAvatar avatar={avatar} login={login} />
-            </Link>
+            <Popover placement="bottomRight" content={<CProfileDropMenu myID={_id} />} trigger={'click'}>
+                <></>
+                <UserAvatar avatar={avatar} login={login} avatarSize={'45px'} />
+            </Popover>
         </Col>
-    </Row>
+    </Row >
 
 const CUserNav = connect(state => ({ id: state.auth?.payload.sub.id || {} }), { profileData: actionProfilData })(UserNav)
 
 const CUserNavIcon = connect(state => ({ userData: state.promise?.dataProfileAuth.payload || {} }))(UserNavIcon)
 
 const Logo = () =>
-    <Link to='/'>
+    <Link className='Logo' to='/'>
         <img src={logo} alt='logo' width='180vw' />
     </Link>
 

src/components/header/Search.jsx

@@ -7,24 +7,23 @@ import { UserAvatar } from './Header';
 
 const { Search } = Input;
 const FindUsersResult = ({ usersRes }) => {
-    console.log(usersRes);
-    return <>
-        {usersRes.length === 0 ?
-            <Empty /> :
-            usersRes.map(u => {
-                return (<Link
-                    className='Header__search-link'
-                    key={u._id}
-                    to={`/profile/${u._id}`} >
-                    <UserAvatar avatar={u.avatar} login={u.login} nick={u.nick} />
-                    <strong>{u?.nick || u?.login || 'User'}</strong>
-                </Link>)
-            })
+    return <div className='Header__search-drop' >
+        {
+            usersRes.length === 0 ?
+                <Empty /> :
+                usersRes.map(u => {
+                    return (<Link
+                        className='Header__search-link'
+                        key={u._id}
+                        to={`/profile/${u._id}`} >
+                        <UserAvatar avatar={u.avatar} login={u.login} nick={u.nick} avatarSize={'40px'} />
+                        <strong>{u?.nick || u?.login || 'User'}</strong>
+                    </Link>)
+                })
         }
-    </>
+    </div >
 }
 
-
 export const FieldSearch = ({ usersRes, findUsers }) => {
     return (
         <>

src/components/main/MainPostFeed.js

@@ -15,7 +15,7 @@ const PostTitle = ({ owner }) =>
     <Link to={`/${owner?._id}`} className='owner'>
         <Row justify="start" align='middle'>
             <Col >
-                <UserAvatar avatar={owner?.avatar} login={owner?.login} nick={owner?.nick} />
+                <UserAvatar avatar={owner?.avatar} login={owner?.login} avatarSize={'45px'} nick={owner?.nick} />
             </Col>
             <Col offset={1}>
                 <span>{owner?.nick ? owner.nick : owner?.login ? owner.login : 'Null'}</span>
@@ -224,7 +224,7 @@ const Post = ({ postData: { _id, text, title, owner, images, createdAt, comments
 
 const MainPostFeed = ({ posts, postsFollowing }) => {
     const [checkScroll, setCheckScroll] = useState(true)
-    
+
     useEffect(async () => {
         if (checkScroll) {
             await postsFollowing(posts.length)

src/redux/auth-reducer.js

@@ -24,14 +24,12 @@ export const authReducer = (state, { type, token, remember }) => {
     }
     if (type === 'AUTH_LOGOUT') {
         localStorage.removeItem('authToken')
+        sessionStorage.removeItem('authToken')
         return {}
     }
     return state
 }
 
-export const actionAuthLogin = (token, remember) => ({ type: 'AUTH_LOGIN', token, remember })
-
-export const actionAuthLogout = () => ({ type: 'AUTH_LOGOUT' })