Creating Navbar

package.json

@@ -3,18 +3,24 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@babel/preset-env": "^7.16.0",
+    "@babel/preset-react": "^7.16.0",
     "@reduxjs/toolkit": "^1.6.2",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
     "axios": "^0.24.0",
+    "babel-jest": "^26.6.3",
     "node-sass": "^6.0.1",
     "react": "^17.0.2",
+    "react-detect-click-outside": "^1.1.1",
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",
     "react-redux": "^7.2.6",
     "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
+    "react-test-renderer": "^17.0.2",
+    "react-toggle": "^4.1.2",
     "redux": "^4.1.2",
     "web-vitals": "^1.1.2"
   },
@@ -41,5 +47,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "jest": "^26.6.0"
   }
 }

src/components/Layouts/NavBar/DropDownActivity.js

@@ -0,0 +1,27 @@
+import './DropDownActivity.scss'
+import React from 'react';
+import {NavLink} from 'react-router-dom';
+import { NavbarIcons } from '../../UI/Icons';
+
+function DropDownActivity(props) {
+    return (
+        <div className="activity">
+            <div className="header">
+                <span>username</span>
+                <NavLink to='/blog/username/activity'>---------</NavLink>
+            </div>
+            <div className="content">
+            <NavLink to='/dashboard'>All</NavLink>
+            <NavLink to='/dashboard'>Mentions</NavLink>
+            <NavLink to='/dashboard'>Reblogs</NavLink>
+            <NavLink to='/dashboard'>Replies</NavLink>
+            </div>
+            <div className="footer">
+                <NavbarIcons.GiElectric/>
+                <span>Check out this tab when you make a post to see Likes, Reblogs, and new followers.</span>
+            </div>
+        </div>
+    );
+}
+
+export default DropDownActivity;

src/components/Layouts/NavBar/DropDownActivity.scss

@@ -0,0 +1,65 @@
+@import 'config';
+
+.activity{
+    @media screen and (max-width:$max-width){
+        display: none;
+    }
+    background-color:#fff;
+    width:380px;
+    height:190px;
+    margin:56px 0 0 1152px;
+    color:$smile-color;
+    border-radius: 3px;
+    a{
+        color:$smile-color;
+        font-size: 12px;
+    }
+    .header{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-bottom: 1px solid #A5AEB8;
+        padding:10px;
+        height: 50px;
+    }
+    .content{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 44px;
+        flex: 0 1 auto;
+
+
+        a{
+            flex:1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            font-size: 17px;
+            &:focus{
+                color:$newpost-color;
+                border-bottom: 2px solid $newpost-color;
+            }
+
+        }
+
+    }
+    .footer{
+        margin-top: 3px;
+        height: 94px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;   
+        padding:0 33px;
+        svg{
+            height: 20%;
+        }
+        span{
+            font-size: 11px;
+            text-align: center;
+            height: 80%;
+            padding:10px 5px;
+        }
+    }
+}

src/components/Layouts/NavBar/DropDownInbox.js

@@ -0,0 +1,23 @@
+import './DropDownInbox.scss';
+import React from 'react';
+import {NavLink} from 'react-router-dom';
+import { NavbarIcons } from '../../UI/Icons';
+
+function DropDownInbox(props) {
+    return (
+        <div className="smile">
+                  <div className="header">
+                    <span>username</span>
+                    <NavLink to='/'>New Message</NavLink>
+                  </div>
+                  <div className="content">
+                  <NavbarIcons.RiChatSmile3Fill/>
+                    <span>Talk to tumblr</span>
+
+
+                  </div>
+        </div>
+    )
+}
+
+export default DropDownInbox;

src/components/Layouts/NavBar/DropDownInbox.scss

@@ -0,0 +1,46 @@
+@import 'config';
+
+.smile{
+    @media screen and (max-width:$max-width){
+        display: none;
+    }
+    background-color:#fff;
+    width:280px;
+    height:280px;
+    margin:55px 0 0 1184px;
+    color:#000;
+    border-radius: 3px 3px 0 0;
+    a{
+        color:#00B8FF;
+        font-size: 12px;
+    }
+    .header{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-bottom: 1px solid #A5AEB8;
+        padding:6px;
+        height: 44px;
+    }
+
+
+    .content{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 237px;  
+        padding:15px 0;
+        color:$smile-color;
+        svg{
+            flex:1;
+            width:80px;
+        }
+        span{
+            font-size: 25px;
+            flex:2;
+            padding-top:20px;
+        }
+    }
+
+}

src/components/Layouts/NavBar/DropDownProfile.js

@@ -0,0 +1,50 @@
+import './DropDownProfile.scss'
+import React,{useState} from 'react';
+import {NavLink} from 'react-router-dom';
+import { NavbarIcons } from '../../UI/Icons';
+import {useDetectClickOutside} from 'react-detect-click-outside';
+
+function DropDownProfile() {
+
+
+    return (
+
+            <div className="profile" >
+            <div className="account">
+                <span>Account</span>
+                <NavLink to="/">Log out</NavLink>   
+            </div>
+            <ul className="account-list">
+                <NavLink to="/likes"><NavbarIcons.AiFillHeart/>Likes</NavLink>
+                <NavLink to="/following"><NavbarIcons.RiUserFollowFill/>Following</NavLink>
+                <NavLink to="/settings/account"><NavbarIcons.FiSettings/>Settings</NavLink>
+                <NavLink to="/blog/view/changes"><NavbarIcons.GiPresent/>What's new</NavLink>
+                <NavLink to="/help"><NavbarIcons.IoMdHelpCircle/>Help</NavLink>
+                <span><NavbarIcons.BsFillKeyboardFill/>Keyboard shortcuts</span>
+                <span><NavbarIcons.BsFillPaletteFill/>Change Palette</span>
+
+            </ul>
+            <div className="tumblrs">
+                <span>Tumblrs</span>
+                <NavLink to="/new/blog">+ New</NavLink>
+            </div>
+            <ul className="tumblrs-list">
+                <NavLink to='/blog/username'>Posts</NavLink>
+                <NavLink to='/blog/username/followers'>Followers</NavLink>
+                <NavLink to='/blog/username/activity'>Activity</NavLink>
+                <NavLink to='/blog/username/drafts'>Drafts</NavLink>
+                <NavLink to='/blog/username/queue'>Queue</NavLink>
+                <NavLink to='/settings/blog/username'>Edit Apperance</NavLink>
+            </ul>
+            <div className="links">
+                <NavLink to='/about'>About</NavLink>
+                <NavLink to='/apps'>Apps</NavLink>
+                <NavLink to='/policy/terms-of-services'>Legal</NavLink>
+                <NavLink to='/policy/privacy'>Privacy</NavLink>
+            </div>
+            </div>
+
+    )
+}
+
+export default DropDownProfile;

src/components/Layouts/NavBar/DropDownProfile.scss

@@ -0,0 +1,104 @@
+@import 'config';
+
+
+.profile{
+    @media screen and (max-width:$max-width){
+        display: none;
+    }
+    background-color:#fff;
+    width:240px;
+    height:600px;
+    margin:56px 0 0 1273px;
+    border-radius: 3px;
+    a{
+        color: $dropdown-profile-icons-color;
+
+    }
+
+    span{
+        color: $dropdown-profile-icons-color;
+
+    }
+    .account{
+        background-color: $dropdown-profile-background-color;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 10px 10px;
+        font-size: 14px;
+        font-weight: 100;
+    }
+    .account-list{
+        display: flex;
+        flex-direction: column;
+        font-weight: 400;
+        a{
+            padding:8px 10px;
+            display: flex;
+            align-items: center;
+            svg{
+                margin-right: 10px;
+                width: 20px;
+                height: 20px;
+            }
+        }
+        span{
+            cursor: pointer;
+            padding:8px 10px;
+            display: flex;
+            align-items: center;
+            svg{
+                margin-right: 10px;
+                width: 20px;
+                height: 20px;
+            }
+        }
+
+        a:hover{
+            background-color:$dropdown-profile-hover-color;
+        }
+        span:hover{
+            background-color:$dropdown-profile-hover-color;
+        }
+    }
+
+    .tumblrs    {
+        background-color: $dropdown-profile-background-color;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 7px 10px;
+        font-size: 14px;
+        font-weight: 100;
+    }
+
+    .tumblrs-list{
+        display: flex;
+        flex-direction: column;
+        font-weight: 400;
+        margin:0 12px 0 50px;
+
+        a{
+            padding:2px
+        }
+        a:hover{
+            background-color: $dropdown-profile-hover-color;
+        }
+
+    }
+    .links{
+        background-color: $dropdown-profile-background-color;
+        display: flex;
+        align-items: center;
+        padding: 5px 10px;
+        font-size: 12px;
+        font-weight: 100;
+        a{
+            margin: 0 5px;
+        }
+        a:hover{
+            text-decoration: underline;
+        }
+    }
+
+}