sorta works!

components/slack/arrows.js

@@ -1,7 +1,26 @@
+import { VisibilityContext } from 'react-horizontal-scrolling-menu'
+import { useContext } from 'react'
+
 export function LeftArrow() {
-  return <button>Left</button>
+  const { scrollPrev } = useContext(VisibilityContext)
+  return <button onClick={() => scrollPrev()}>Left</button>
 }
 
 export function RightArrow() {
-  return <button>Right</button>
+  const { scrollNext } = useContext(VisibilityContext)
+  return <button onClick={() => scrollNext()}>Right</button>
+}
+
+export default function Arrows() {
+  return (
+    <div
+      style={{
+        display: 'flex'
+      }}
+    >
+      <div style={{ display: 'flex' }}>
+        <LeftArrow /> <RightArrow />
+      </div>
+    </div>
+  )
 }

components/slack/project.js

@@ -8,11 +8,14 @@ export default function Project({
   sx,
   color,
   img,
-  itemId
+  itemId,
+  width
 }) {
   const visible = useContext(VisibilityContext)
   const isVisible = visible.isItemVisible(itemId)
 
+  console.log(itemId)
+
   return (
     <Box
       sx={{
@@ -28,6 +31,7 @@ export default function Project({
         overflowX: 'auto',
         transition: '700ms cubic-bezier(0.075, 0.02, 0.165, 1)',
         transformOrigin: 'center',
+        opacity: isVisible ? 1 : 0.25,
         sx
       }}
       itemId={itemId}

components/slack/projects.js

@@ -5,35 +5,39 @@ const projects = [
       "BCI's team organizes in #nest Velit voluptate deserunt consequat. Velit voluptate deserunt consequat.Velit voluptate deserunt consequat.",
     img: 'bci',
     color: ['#ec3750', '#F58695'],
-    itemId: 1
+    itemId: 0
   },
   {
     title: 'A free domain service.',
     description:
       'Obl.ong’s team organizes in #oblong Velit voluptate deserunt consequat. Velit voluptate deserunt consequat.Velit voluptate deserunt consequat.',
     img: 'oblong',
-    color: ['#ff8c37', '#F2A510']
+    color: ['#ff8c37', '#F2A510'],
+    itemId: 1
   },
   {
     title: 'An open source VPN.',
     description:
       "Burrow's team organizes in #burrow Velit voluptate deserunt consequat. Velit voluptate deserunt consequat.Velit voluptate deserunt consequat.",
     img: 'burrow',
-    color: ['#f1c40f', '#FAE078']
+    color: ['#f1c40f', '#FAE078'],
+    itemId: 2
   },
   {
     title: 'Free compute infrastructure.',
     description:
       "Nest's team organizes in #nest Velit voluptate deserunt consequat. Velit voluptate deserunt consequat.Velit voluptate deserunt consequat.",
     img: 'nest',
-    color: ['#33d6a6', '#51F5C5']
+    color: ['#33d6a6', '#51F5C5'],
+    itemId: 3
   },
   {
     title: 'A chat app and cell phone carrier.',
     description:
       "Nest's team organizes in #nest Velit voluptate deserunt consequat. Velit voluptate deserunt consequat.Velit voluptate deserunt consequat.",
     img: 'purplebubble',
-    color: ['#5bc0de', '#88e5f8']
+    color: ['#5bc0de', '#88e5f8'],
+    itemId: 4
   }
 ]
 

pages/slack.js

@@ -1,21 +1,22 @@
 import Meta from '@hackclub/meta'
 import Head from 'next/head'
-import { Box, Container, Flex, Grid, Heading, Text } from 'theme-ui'
+import { Box, Container, Flex, Heading, Text } from 'theme-ui'
+import { useRef, useState } from 'react'
+import { ScrollMenu } from 'react-horizontal-scrolling-menu'
+import 'react-horizontal-scrolling-menu/dist/styles.css'
+
+import { thousands } from '../lib/members'
+import projects from '../components/slack/projects'
+import Channels from '../components/slack/channels'
+import Join from '../components/slack/catchall'
+import SlackEvents from '../components/slack/slack-events'
 import Footer from '../components/footer'
 import ForceTheme from '../components/force-theme'
 import Nav from '../components/nav'
 import Header from '../components/slack/header'
-import { thousands } from '../lib/members'
-import { useRef, useState } from 'react'
 import Project from '../components/slack/project'
 import Quote from '../components/slack/quote'
-import { ScrollMenu } from 'react-horizontal-scrolling-menu'
-import 'react-horizontal-scrolling-menu/dist/styles.css'
-import Channels from '../components/slack/channels'
-import projects from '../components/slack/projects'
-import Join from '../components/slack/catchall'
-import SlackEvents from '../components/slack/slack-events'
-import { LeftArrow, RightArrow } from '../components/slack/arrows'
+import Arrows from '../components/slack/arrows'
 
 const SlackPage = () => {
   const nameInputRef = useRef(null)
@@ -34,6 +35,10 @@ const SlackPage = () => {
     }
   }
 
+  const [containerWidth, setContainerWidth] = useState(0)
+  const containerRef = useRef()
+  const itemWidth = containerWidth / 2 || 160
+
   return (
     <>
       <Meta
@@ -90,33 +95,20 @@ const SlackPage = () => {
           Everything here was built by Hack Clubbers.
         </Text>
       </Container>
-      <Grid
-        sx={{
-          backgroundColor: '#f9fafc',
-          justifyItems: 'center',
-          alignItems: 'center',
-          width: 'fit-content',
-          position: 'relative',
-          display: 'grid',
-          paddingLeft: '25vw',
-          overflowX: 'hidden'
-        }}
-        className="container"
-      >
-        <ScrollMenu LeftArrow={LeftArrow} RightArrow={RightArrow}>
-          {projects.map((project, index) => (
-            <Project
-              title={project.title}
-              description={project.description}
-              img={project.img}
-              color={project.color}
-              itemId={project.itemId}
-              selected={index === currentIndex}
-              key={index}
-            />
-          ))}
-        </ScrollMenu>
-      </Grid>
+      <ScrollMenu Footer={Arrows} onWheel={onWheel}>
+        {projects.map((project, index, id) => (
+          <Project
+            title={project.title}
+            description={project.description}
+            img={project.img}
+            color={project.color}
+            itemId={id}
+            selected={id === currentIndex}
+            width={itemWidth + 'px'}
+            key={id}
+          />
+        ))}
+      </ScrollMenu>
       <Container sx={{ py: [4, 5] }}>
         <Box sx={{ gap: '2rem', display: ['grid', 'flex'] }}>
           <Quote
@@ -148,4 +140,19 @@ const SlackPage = () => {
   )
 }
 
+function onWheel(apiObj, ev) {
+  const isThouchpad = Math.abs(ev.deltaX) !== 0 || Math.abs(ev.deltaY) < 15
+
+  if (isThouchpad) {
+    ev.stopPropagation()
+    return
+  }
+
+  if (ev.deltaY < 0) {
+    apiObj.scrollNext()
+  } else if (ev.deltaY > 0) {
+    apiObj.scrollPrev()
+  }
+}
+
 export default SlackPage