home: add sticky cart link

app/(home)/layout.js

@@ -1,11 +1,16 @@
-import { HomeNav, HomeFooter } from '/components/home';
+import { HomeNav, HomeFooter, CartLink } from '/components/home';
 
 import styles from './styles.module.scss';
 
 export default function HomeLayout({ children }) {
     return (
         <>
-            <header>
+            {/* <div className={styles.scrollContainer}> */}
+            <div className={styles.spacer} />
+            <div className={styles.scrollContainer}>
+                <CartLink />
+            </div>
+            <header className={styles.header}>
                 <nav>
                     <HomeNav />
                 </nav>
@@ -14,6 +19,7 @@ export default function HomeLayout({ children }) {
             <footer>
                 <HomeFooter />
             </footer>
+            {/* </div> */}
         </>
     );
 }

app/(home)/styles.module.scss

@@ -1,5 +1,24 @@
 @use 'styles/_spacing';
 
+.scrollContainer {
+    position: absolute;
+    height: calc(100% - 822px);
+    right: spacing.$page-margin-x;
+    // float: right;
+}
+
+.spacer {
+    height: spacing.$home-spacer-y;
+}
+
+.header {
+    overflow: visible;
+
+    > nav {
+        overflow: visible;
+    }
+}
+
 .main {
     padding: 0 spacing.$page-margin-x;
 }

app/styles.module.scss

@@ -2,6 +2,7 @@
 
 .body {
     background-color: colors.$grey-tint;
+    // isolation: isolate;
 
     font-family: var(--font-dia);
 

components/home/index.js

@@ -102,6 +102,14 @@ export async function TypesNav() {
     );
 }
 
+export const CartLink = () => (
+    /* <div className={styles.cartLink}> */
+    <Link className={styles.cartLink} href='/cart'>
+        Cart ( 0 )
+    </Link>
+    // </div>
+);
+
 export const HomeNav = () => (
     <div className={styles.homeNav}>
         <Link href='/information' className='information'>

components/home/styles.module.scss

@@ -9,7 +9,9 @@
 }
 
 .homeNav {
-    padding: 51px 115px 22px 115px;
+    padding: (51px - spacing.$home-spacer-y) 115px 22px 115px;
+
+    overflow: visible;
 
     display: grid;
     grid-template-columns: 200px 1fr 200px;
@@ -38,6 +40,24 @@
     }
 }
 
+.cartLink {
+    position: sticky;
+    overflow: visible;
+
+    top: 12px;
+
+    @include typography.subheader;
+
+    text-align: right;
+    word-wrap: none;
+    text-decoration-line: none;
+    mix-blend-mode: difference;
+    // mix-blend-mode: exclusion;
+    z-index: 10;
+
+    color: #fff !important;
+}
+
 .homeProductsList {
     @include home-grid;
 
@@ -140,6 +160,7 @@
         > div {
             display: flex;
             align-items: flex-end;
+            justify-content: flex-end;
         }
 
         button {

styles/_spacing.scss

@@ -1 +1,2 @@
 $page-margin-x: 60px;
+$home-spacer-y: 13px + 12px;

styles/global.scss

@@ -1 +1,8 @@
 @use 'scss-reset/reset';
+
+html,
+body {
+    // overflow: hidden;
+
+    // height: 100%;
+}