diff --git a/src/assets/images/united-states.svg b/src/assets/images/united-states.svg new file mode 100644 index 0000000..755c75b --- /dev/null +++ b/src/assets/images/united-states.svg @@ -0,0 +1,88 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Partials/Header.jsx b/src/components/Partials/Header.jsx index e15c891..5aca49d 100644 --- a/src/components/Partials/Header.jsx +++ b/src/components/Partials/Header.jsx @@ -13,12 +13,16 @@ import SearchCom from "../Helpers/SearchCom"; import WalletHeader from "../MyWallet/WalletHeader"; import usersService from "../../services/UsersService"; +import siteLogo from '../../assets/images/wrenchboard.png' +import Flag from '../../assets/images/united-states.svg' + export default function Header({ logoutModalHandler, sidebarHandler }) { const [balanceDropdown, setbalanceValue] = useToggle(false); const [notificationDropdown, setNotificationValue] = useToggle(false); const [userProfileDropdown, setProfileDropdown] = useToggle(false); const [moneyPopup, setPopup] = useToggle(false); + const [toggleNotification, setToggleNotification] = useToggle(false) const darkMode = useContext(DarkModeContext); const [myWalletList, setMyWalletList] = useState([]); @@ -79,6 +83,10 @@ export default function Header({ logoutModalHandler, sidebarHandler }) { setPopup.toggle(); setbalanceValue.set(false); }; + + const setNotification = ()=> { + setToggleNotification.toggle() + } return ( <>
@@ -470,18 +478,22 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
-
-

- My Profile -

+
+ Logo
-
-
    -
  • +
    +

    + Surname +

    +

    broklinslam_75@gamil.com

    +
    +
    +
      + {/*
    -
    • -
  • +
    • */} + {/*
- -
  • +
    • */} + {/*
    • - -
  • +
    • */} + {/*
  • +
    • */} + +
  • + +
    +

    + My Profile +

    +
    + +
    • +
  • + +
    +

    + My Wallet +

    +
    + +
    • +
  • + +
    +

    + Reports > +

    +
    + + {/* report list items*/} +
    +
      +
    • + +
      +

      + Referrals +

      +
      + +
      • +
    • + +
      +

      + Billing +

      +
      + +
      • +
    • + +
      +

      + Payments +

      +
      + +
      • +
    • + +
      +

      + Completed Jobs +

      +
      + +
      • +
    • + +
      +

      + Previous Task +

      +
      + +
      • +
    +
    +
    +
    +
    +
    +

    + Notifications +

    +
    +
    + {/* end report list items*/} +
    • +
  • + +
    +

    + My Statements +

    +
    +
    • +
    + +
    diff --git a/src/index.css b/src/index.css index 4ae5bdd..67745b5 100644 --- a/src/index.css +++ b/src/index.css @@ -458,6 +458,21 @@ input[type="number"] { background-size: cover; } + +.content-item .inner-list-items { + top: 0; + right: -100%; + opacity: 0; + transition: all .5s; + background-color: white; +} + +.content-item:hover .inner-list-items { + right: -30%; + opacity: 1; + z-index: 2; +} + /* TODO: =================================upload product end================================ */ /* TODO: =================================setting ================================ */ .notification-page .content-item .notifications { diff --git a/tailwind.config.js b/tailwind.config.js index 4dfbbb4..2a6af0f 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -16,7 +16,8 @@ module.exports = { "light-red": "#EB5757", "white-opacity": "#7B7EFC", "dark-white":"#1D1F2F", - "dark-light-purple":"#5356fb29" + "dark-light-purple":"#5356fb29", + 'sky-blue': '#009ef7' }, }, },