feat(usermenu): connect to store and get cart state

display cart's quantity next to cart icon

src/app/components/core/UserMenu/UserMenu.js

@@ -1,13 +1,19 @@
 // @flow strict
 import React, { useState } from 'react';
+// $FlowFixMe
+import { useSelector } from 'react-redux';
 
 import Icon from '@/components/base/Icon/Icon';
 import { useLazy } from '@/hooks/useLazy';
+import { getCart } from '@/store/reducers/cart';
+
+import type { CartType } from '@/store/types/CartType';
 
 import './UserMenu.scss';
 
 const UserMenu = () => {
   const [open, setOpen] = useState(false);
+  const cart: CartType = useSelector(getCart);
 
   const handleOpen = () => setOpen(!open);
 
@@ -32,6 +38,7 @@ const UserMenu = () => {
           </Sidebar>)
         : null}
       <span
+        className="user-menu__cart-icon"
         tabIndex="-1"
         role="button"
         onKeyPress={() => {}}
@@ -41,6 +48,9 @@ const UserMenu = () => {
           size="20"
           path="icons/cart"
         />
+        <span className="user-menu__cart-quantity">
+          ({ cart.quantity })
+        </span>
       </span>
     </div>
   );

src/app/components/core/UserMenu/UserMenu.scss

@@ -6,4 +6,13 @@
   align-items: center;
   display: flex;
   padding: 0 px-to-rem(16);
+
+  @include element(cart-icon) {
+    align-items: center;
+    display: flex;
+  }
+
+  @include element(cart-quantity) {
+    margin-left: px-to-rem(5);
+  }
 }