Change web shell to use permanent header

1 files changed, 98 insertions, 0 deletions

diff --git a/src/view/shell/web/DesktopHeader.tsx b/src/view/shell/web/DesktopHeader.tsx
new file mode 100644
index 000000000..75acb8da9
--- /dev/null
+++ b/src/view/shell/web/DesktopHeader.tsx
@@ -0,0 +1,98 @@
+import React from 'react'
+import {observer} from 'mobx-react-lite'
+import {StyleSheet, TouchableOpacity, View} from 'react-native'
+import {Text} from 'view/com/util/text/Text'
+import {Link} from 'view/com/util/Link'
+import {usePalette} from 'lib/hooks/usePalette'
+import {useStores} from 'state/index'
+import {ComposeIcon, MagnifyingGlassIcon} from 'lib/icons'
+import {colors} from 'lib/styles'
+
+export const DesktopHeader = observer(function DesktopHeader({}: {
+  canGoBack?: boolean
+}) {
+  const store = useStores()
+  const pal = usePalette('default')
+  const onPressCompose = () => store.shell.openComposer({})
+  return (
+    <View style={[styles.header, pal.borderDark, pal.view]}>
+      <View style={styles.titleContainer} pointerEvents="none">
+        <Text type="title-2xl" style={[pal.text, styles.title]}>
+          Bluesky
+        </Text>
+      </View>
+      <TouchableOpacity style={[styles.newPostBtn]} onPress={onPressCompose}>
+        <View style={styles.newPostBtnIconWrapper}>
+          <ComposeIcon
+            size={16}
+            strokeWidth={2}
+            style={styles.newPostBtnLabel}
+          />
+        </View>
+        <Text type="md" style={styles.newPostBtnLabel}>
+          New Post
+        </Text>
+      </TouchableOpacity>
+      <Link href="/search" style={[pal.view, pal.borderDark, styles.search]}>
+        <MagnifyingGlassIcon
+          size={18}
+          style={[pal.textLight, styles.searchIconWrapper]}
+        />
+        <Text type="md-thin" style={pal.textLight}>
+          Search
+        </Text>
+      </Link>
+    </View>
+  )
+})
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingTop: 18,
+    paddingBottom: 18,
+    paddingLeft: 30,
+    paddingRight: 40,
+    borderBottomWidth: 1,
+  },
+
+  titleContainer: {
+    marginRight: 'auto',
+  },
+  title: {},
+
+  search: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: 300,
+    borderRadius: 20,
+    paddingVertical: 8,
+    paddingHorizontal: 10,
+    borderWidth: 1,
+  },
+  searchIconWrapper: {
+    flexDirection: 'row',
+    width: 30,
+    justifyContent: 'center',
+    marginRight: 2,
+  },
+
+  newPostBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 24,
+    paddingTop: 8,
+    paddingBottom: 9,
+    paddingHorizontal: 18,
+    backgroundColor: colors.blue3,
+    marginRight: 10,
+  },
+  newPostBtnIconWrapper: {
+    marginRight: 8,
+  },
+  newPostBtnLabel: {
+    color: colors.white,
+  },
+})