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
webgpu · Jan 10, 2024 · dd6d8e2 · dd6d8e2
1 parent bbe65e9
commit dd6d8e2
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 3 deletions.
diff --git 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
@@ -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 (