From 3eb4d5de1feb53bbbb5d27049bfdd6f5c07c2b62 Mon Sep 17 00:00:00 2001
From: cmhhelgeson <62450112+cmhhelgeson@users.noreply.github.com>
Date: Tue, 2 Jan 2024 12:10:39 -0800
Subject: [PATCH 1/5] Added auto scrollbar for codemirror ul

---
 src/components/SampleLayout.module.css | 29 +++++++++++++++++++++
 src/components/SampleLayout.tsx        | 36 ++++++++++++++------------
 2 files changed, 48 insertions(+), 17 deletions(-)

diff --git a/src/components/SampleLayout.module.css b/src/components/SampleLayout.module.css
index fac4d2b0..002c5bc0 100644
--- a/src/components/SampleLayout.module.css
+++ b/src/components/SampleLayout.module.css
@@ -10,7 +10,10 @@
   max-width: 600px;
 }
 
+
+
 nav.sourceFileNav ul {
+  box-sizing: border-box;
   list-style-type: none;
   padding: 0;
   margin: 0;
@@ -24,6 +27,32 @@ nav.sourceFileNav li {
   transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 
+nav.sourceFileNav div.sourceFileScrollContainer {
+  white-space: nowrap;
+  overflow-x: auto;
+}
+
+nav.sourceFileNav div.sourceFileScrollContainer::-webkit-scrollbar {
+  display: inline;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  height: 7px;
+  width: 10px;
+}
+
+nav.sourceFileNav div.sourceFileScrollContainer::-webkit-scrollbar-thumb {
+  background: rgb(167, 167, 167);
+  height: 5px;
+  border-radius: 20px;
+  -webkit-box-shadow: inset 0 0 10px rgb(45, 33, 33);
+  border: 1px solid transparent;
+  background-clip: content-box;
+}
+
+nav.sourceFileNav div.sourceFileScrollContainer::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0);
+}
+
 nav.sourceFileNav li a {
   display: block;
   margin: 0;
diff --git a/src/components/SampleLayout.tsx b/src/components/SampleLayout.tsx
index f961ec90..8b8875ea 100644
--- a/src/components/SampleLayout.tsx
+++ b/src/components/SampleLayout.tsx
@@ -229,23 +229,25 @@ const SampleLayout: React.FunctionComponent<
       </div>
       <div>
         <nav className={styles.sourceFileNav}>
-          <ul>
-            {sources.map((src, i) => {
-              return (
-                <li key={i}>
-                  <a
-                    href={`#${src.name}`}
-                    data-active={activeHash == src.name}
-                    onClick={() => {
-                      setActiveHash(src.name);
-                    }}
-                  >
-                    {src.name}
-                  </a>
-                </li>
-              );
-            })}
-          </ul>
+          <div className={styles.sourceFileScrollContainer}>
+            <ul>
+              {sources.map((src, i) => {
+                return (
+                  <li key={i}>
+                    <a
+                      href={`#${src.name}`}
+                      data-active={activeHash == src.name}
+                      onClick={() => {
+                        setActiveHash(src.name);
+                      }}
+                    >
+                      {src.name}
+                    </a>
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
         </nav>
         {sources.map((src, i) => {
           return (

From 55c301f7f49ec95848fb23f3e84a1aaa0746ead1 Mon Sep 17 00:00:00 2001
From: cmhhelgeson <62450112+cmhhelgeson@users.noreply.github.com>
Date: Tue, 2 Jan 2024 12:14:50 -0800
Subject: [PATCH 2/5] minor style change

---
 src/components/SampleLayout.module.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/SampleLayout.module.css b/src/components/SampleLayout.module.css
index 002c5bc0..4b6225f2 100644
--- a/src/components/SampleLayout.module.css
+++ b/src/components/SampleLayout.module.css
@@ -44,8 +44,8 @@ nav.sourceFileNav div.sourceFileScrollContainer::-webkit-scrollbar-thumb {
   background: rgb(167, 167, 167);
   height: 5px;
   border-radius: 20px;
-  -webkit-box-shadow: inset 0 0 10px rgb(45, 33, 33);
-  border: 1px solid transparent;
+  -webkit-box-shadow: inset 0px 0px 10px rgb(45, 33, 33);
+  border: 0.5px solid transparent;
   background-clip: content-box;
 }
 

From bbe65e963048dfa21ef2e6357fc6c998b0d32b2f Mon Sep 17 00:00:00 2001
From: cmhhelgeson <62450112+cmhhelgeson@users.noreply.github.com>
Date: Tue, 2 Jan 2024 13:21:36 -0800
Subject: [PATCH 3/5] scrollbar thin is good enough for now

---
 src/components/SampleLayout.module.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/SampleLayout.module.css b/src/components/SampleLayout.module.css
index 4b6225f2..f63833e7 100644
--- a/src/components/SampleLayout.module.css
+++ b/src/components/SampleLayout.module.css
@@ -30,6 +30,7 @@ nav.sourceFileNav li {
 nav.sourceFileNav div.sourceFileScrollContainer {
   white-space: nowrap;
   overflow-x: auto;
+  scrollbar-width: thin;
 }
 
 nav.sourceFileNav div.sourceFileScrollContainer::-webkit-scrollbar {

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 4/5] 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 (

From 7ceef3897cb2f96131b492114e395676537844f7 Mon Sep 17 00:00:00 2001
From: cmhhelgeson <62450112+cmhhelgeson@users.noreply.github.com>
Date: Wed, 10 Jan 2024 17:25:39 -0800
Subject: [PATCH 5/5] Make scrollbar slighter larger and brighter

---
 src/components/SampleLayout.module.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/SampleLayout.module.css b/src/components/SampleLayout.module.css
index 25d38a16..888f6950 100644
--- a/src/components/SampleLayout.module.css
+++ b/src/components/SampleLayout.module.css
@@ -74,13 +74,13 @@ nav.sourceFileNav div.sourceFileScrollContainer::-webkit-scrollbar {
   display: inline;
   margin-top: 10px;
   margin-bottom: 10px;
-  height: 7px;
+  height: 11px;
   width: 10px;
 }
 
 nav.sourceFileNav div.sourceFileScrollContainer::-webkit-scrollbar-thumb {
-  background: rgb(167, 167, 167);
-  height: 5px;
+  background: rgb(200, 200, 200);
+  height: 4px;
   border-radius: 20px;
   -webkit-box-shadow: inset 0px 0px 10px rgb(45, 33, 33);
   border: 0.5px solid transparent;