Scrollbar for Samples with Numerous Sources (#343)

* Added auto scrollbar for codemirror ul * minor style change * scrollbar thin is good enough for now * 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 * Make scrollbar slighter larger and brighter
webgpu · Jan 11, 2024 · 85beeda · 85beeda
1 parent 6397f23
commit 85beeda
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 18 deletions.
diff --git a/src/components/SampleLayout.module.css b/src/components/SampleLayout.module.css
@@ -10,7 +10,12 @@
   max-width: 600px;
 }
 
+nav.sourceFileNav {
+  position: relative;
+}
+
 nav.sourceFileNav ul {
+  box-sizing: border-box;
   list-style-type: none;
   padding: 0;
   margin: 0;
@@ -24,6 +29,68 @@ 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;
+  scrollbar-width: thin;
+}
+
+nav.sourceFileNav div.sourceFileScrollContainer::-webkit-scrollbar {
+  display: inline;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  height: 11px;
+  width: 10px;
+}
+
+nav.sourceFileNav div.sourceFileScrollContainer::-webkit-scrollbar-thumb {
+  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;
+  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
@@ -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,24 +229,43 @@ const SampleLayout: React.FunctionComponent<
         <canvas ref={canvasRef}></canvas>
       </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>
+        <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 (
+                  <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 (