From 967f9fc474f2903dd2c12ef4f662ead1592ea26c Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Thu, 9 Jun 2022 21:34:43 -0500
Subject: Add desktop shell

---
 src/platform/desktop-web/left-column.tsx | 57 ++++++++++++++++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 src/platform/desktop-web/left-column.tsx

(limited to 'src/platform/desktop-web/left-column.tsx')

diff --git a/src/platform/desktop-web/left-column.tsx b/src/platform/desktop-web/left-column.tsx
new file mode 100644
index 000000000..082231ec9
--- /dev/null
+++ b/src/platform/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',
+  },
+})
-- 
cgit 1.4.1

