refactor(RSS-ECOMM-5_19): move cart and wishlist to top header (#360)

refactor: move cart and wishlist to top header
stardustmeg · Jun 11, 2024 · f5bc7a5 · f5bc7a5
1 parent 50f5b60
commit f5bc7a5
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 14 deletions.
diff --git a/src/app/App/view/appView.module.scss b/src/app/App/view/appView.module.scss
@@ -4,7 +4,11 @@
   flex-direction: column;
   justify-content: center;
   margin: 0 auto;
-  padding: var(--medium-offset) 0;
+  padding: calc(var(--medium-offset) * 2) 0;
   width: 100%;
   min-height: calc(100vh - calc(var(--extra-small-offset) * 7.1));
+
+  @media (max-width: 768px) {
+    padding: calc(var(--medium-offset) * 2.65) 0;
+  }
 }
diff --git a/src/widgets/Header/view/HeaderView.ts b/src/widgets/Header/view/HeaderView.ts
@@ -177,9 +177,7 @@ class HeaderView {
     this.navigationWrapper.append(
       this.createSwitchLanguageLabel(),
       this.logoutButton.getHTML(),
-      this.toCartLink.getHTML(),
       this.toProfileLink.getHTML(),
-      this.toWishlistLink.getHTML(),
       this.createSwitchThemeLabel(),
     );
 
@@ -321,22 +319,22 @@ class HeaderView {
       attrs: {
         href: PAGE_ID.CART_PAGE,
       },
-      classes: [styles.cartLink],
+      classes: [styles.wishListLink],
     });
 
     const svg = document.createElementNS(SVG_DETAILS.SVG_URL, 'svg');
-    svg.append(createSVGUse(SVG_DETAILS.HEART_OUTLINE));
+    svg.append(createSVGUse(SVG_DETAILS.FILL_HEART));
 
     this.toWishlistLink.getHTML().append(svg);
 
     this.toWishlistLink
       .getHTML()
-      .classList.toggle(styles.cartLinkActive, RouterModel.getCurrentPage() === PAGE_ID.WISHLIST_PAGE);
+      .classList.toggle(styles.wishListLinkActive, RouterModel.getCurrentPage() === PAGE_ID.WISHLIST_PAGE);
 
     observeStore(selectCurrentPage, () =>
       this.toWishlistLink
         .getHTML()
-        .classList.toggle(styles.cartLinkActive, RouterModel.getCurrentPage() === PAGE_ID.WISHLIST_PAGE),
+        .classList.toggle(styles.wishListLinkActive, RouterModel.getCurrentPage() === PAGE_ID.WISHLIST_PAGE),
     );
 
     return this.toWishlistLink;
@@ -348,7 +346,12 @@ class HeaderView {
       tag: 'div',
     });
 
-    this.wrapper.append(this.linkLogo.getHTML(), this.burgerButton.getHTML());
+    this.wrapper.append(
+      this.linkLogo.getHTML(),
+      this.toCartLink.getHTML(),
+      this.burgerButton.getHTML(),
+      this.toWishlistLink.getHTML(),
+    );
     return this.wrapper;
   }
 

diff --git a/src/widgets/Header/view/headerView.module.scss b/src/widgets/Header/view/headerView.module.scss
@@ -1,7 +1,7 @@
 @import 'src/app/styles/mixins';
 
 .header {
-  position: sticky;
+  position: fixed;
   left: 0;
   right: 0;
   top: 0;
@@ -21,6 +21,7 @@
   @media (max-width: 768px) {
     display: grid;
     padding: 0;
+    padding-block-start: 3rem;
   }
 }
 
@@ -58,6 +59,7 @@
 }
 
 .logo {
+  position: absolute;
   order: 1;
   width: var(--small-offset);
   height: var(--small-offset);
@@ -78,6 +80,7 @@
   }
 
   @media (max-width: 768px) {
+    top: 0;
     grid-row: 1;
     margin-top: calc(var(--tiny-offset) * 1.5);
     margin-left: calc(var(--extra-small-offset) * 1.5);
@@ -91,6 +94,7 @@
 }
 
 .cartLink,
+.wishListLink,
 .profileLink {
   position: relative;
   display: flex;
@@ -114,7 +118,46 @@
 }
 
 .cartLink {
-  order: 1;
+  position: absolute;
+  right: calc(var(--extra-small-offset) * 6);
+
+  svg {
+    width: calc(var(--small-offset) / 1.5);
+    height: calc(var(--small-offset) / 1.5);
+  }
+
+  @media (max-width: 768px) {
+    top: calc(var(--extra-small-offset) * 1.2);
+  }
+}
+
+.wishListLink {
+  position: absolute;
+  right: calc(var(--extra-small-offset) * 3.65);
+
+  svg {
+    width: calc(var(--small-offset) / 1.5);
+    height: calc(var(--small-offset) / 1.5);
+    fill: none;
+    stroke: var(--noble-gray-1100);
+    stroke-width: 4px;
+    transition:
+      stroke 0.2s,
+      fill 0.2s;
+  }
+
+  @media (max-width: 768px) {
+    top: calc(var(--extra-small-offset) * 1.2);
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      svg {
+        fill: none;
+        stroke: var(--steam-green-800);
+      }
+    }
+  }
 }
 
 .cartLinkActive {
@@ -125,6 +168,15 @@
   }
 }
 
+.wishListLinkActive {
+  pointer-events: none;
+
+  svg {
+    fill: none;
+    stroke: var(--steam-green-800);
+  }
+}
+
 .profileLink {
   order: 2;
 
@@ -171,15 +223,15 @@
 .burgerLine {
   position: absolute;
   border-radius: var(--two);
-  background-color: var(--steam-green-800);
+  background-color: var(--noble-gray-1100);
   transition: 0.3s cubic-bezier(0.8, 0.5, 0.2, 1.4);
   pointer-events: none;
 }
 
 .burgerButton:hover .burgerLine:nth-child(1),
 .burgerButton:hover .burgerLine:nth-child(2),
 .burgerButton:hover .burgerLine:nth-child(3) {
-  filter: brightness(1.3);
+  background-color: var(--steam-green-800);
 }
 
 .burgerButton:not(.open):hover .burgerLine:nth-child(1),
@@ -427,8 +479,8 @@
 
 .badgeWrap {
   position: absolute;
-  right: -10%;
-  top: 1%;
+  right: -30%;
+  top: -20%;
   display: flex;
   align-items: center;
   justify-content: center;