From dd6d8e2a606f4bc82442275f0387304713469f60 Mon Sep 17 00:00:00 2001
From: cmhhelgeson <62450112+cmhhelgeson@users.noreply.github.com>
Date: Tue, 9 Jan 2024 17:06:47 -0800
Subject: [PATCH] Added a subtle gradient effect when code tabs overflow.
 Gradient can be increased or arrows can be added to content of pseudo
 elements to make overflow more obvious if necessary

---
 src/components/SampleLayout.module.css | 39 +++++++++++++++++++++++++-
 src/components/SampleLayout.tsx        | 22 +++++++++++++--
 2 files changed, 58 insertions(+), 3 deletions(-)

diff --git a/src/components/SampleLayout.module.css b/src/components/SampleLayout.module.css
index f63833e7..25d38a16 100644
--- a/src/components/SampleLayout.module.css
+++ b/src/components/SampleLayout.module.css
@@ -10,7 +10,9 @@
   max-width: 600px;
 }
 
-
+nav.sourceFileNav {
+  position: relative;
+}
 
 nav.sourceFileNav ul {
   box-sizing: border-box;
@@ -27,6 +29,41 @@ nav.sourceFileNav li {
   transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 
+nav.sourceFileNav::before {
+  content: '';
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  width: 30px;
+  height: 37px;
+  top: 15px;
+  left: 0px;
+  pointer-events: none;
+}
+
+nav.sourceFileNav[data-left=true]::before {
+  background: linear-gradient(90deg, rgba(0, 0, 0, 0.35), transparent);
+}
+
+nav.sourceFileNav::after {
+  content: '';
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 30px;
+  height: 37px;
+  top: 15px;
+  right: 0px;
+  pointer-events: none;
+}
+
+nav.sourceFileNav[data-right=true]::after {
+  background: linear-gradient(270deg, rgba(0, 0, 0, 0.35), transparent);
+}
+
 nav.sourceFileNav div.sourceFileScrollContainer {
   white-space: nowrap;
   overflow-x: auto;
diff --git a/src/components/SampleLayout.tsx b/src/components/SampleLayout.tsx
index 8b8875ea..db39d5e4 100644
--- a/src/components/SampleLayout.tsx
+++ b/src/components/SampleLayout.tsx
@@ -77,6 +77,7 @@ const SampleLayout: React.FunctionComponent<
   }>
 > = (props) => {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const navRef = useRef<HTMLDivElement | null>(null);
   const sources = useMemo(
     () =>
       props.sources.map(({ name, contents }) => {
@@ -228,8 +229,25 @@ const SampleLayout: React.FunctionComponent<
         <canvas ref={canvasRef}></canvas>
       </div>
       <div>
-        <nav className={styles.sourceFileNav}>
-          <div className={styles.sourceFileScrollContainer}>
+        <nav className={styles.sourceFileNav} ref={navRef}>
+          <div
+            className={styles.sourceFileScrollContainer}
+            onScroll={(event) => {
+              const element = event.currentTarget;
+              const scrollRight =
+                element.scrollWidth - element.clientWidth - element.scrollLeft;
+              if (element.scrollLeft > 25) {
+                navRef.current.setAttribute('data-left', 'true');
+              } else {
+                navRef.current.setAttribute('data-left', 'false');
+              }
+              if (scrollRight > 25) {
+                navRef.current.setAttribute('data-right', 'true');
+              } else {
+                navRef.current.setAttribute('data-right', 'false');
+              }
+            }}
+          >
             <ul>
               {sources.map((src, i) => {
                 return (