Add mock API and reorg code for clarity

1 files changed, 57 insertions, 0 deletions

diff --git a/src/view/shell/desktop-web/left-column.tsx b/src/view/shell/desktop-web/left-column.tsx
new file mode 100644
index 000000000..082231ec9
--- /dev/null
+++ b/src/view/shell/desktop-web/left-column.tsx
@@ -0,0 +1,57 @@
+import React from 'react'
+import {Pressable, View, StyleSheet} from 'react-native'
+import {Link} from '@react-navigation/native'
+import {useRoute} from '@react-navigation/native'
+
+export const NavItem: React.FC<{label: string; screen: string}> = ({
+  label,
+  screen,
+}) => {
+  const route = useRoute()
+  return (
+    <View>
+      <Pressable
+        style={state => [
+          // @ts-ignore it does exist! (react-native-web) -prf
+          state.hovered && styles.navItemHovered,
+        ]}>
+        <Link
+          style={[
+            styles.navItemLink,
+            route.name === screen && styles.navItemLinkSelected,
+          ]}
+          to={{screen, params: {}}}>
+          {label}
+        </Link>
+      </Pressable>
+    </View>
+  )
+}
+
+export const DesktopLeftColumn: React.FC = () => {
+  return (
+    <View style={styles.container}>
+      <NavItem screen="Home" label="Home" />
+      <NavItem screen="Search" label="Search" />
+      <NavItem screen="Notifications" label="Notifications" />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    left: 'calc(50vw - 500px)',
+    width: '200px',
+    height: '100%',
+  },
+  navItemHovered: {
+    backgroundColor: 'gray',
+  },
+  navItemLink: {
+    padding: '1rem',
+  },
+  navItemLinkSelected: {
+    color: 'blue',
+  },
+})