Fix link + start desktop view (#7)

* lint fix * fix link + start ui desktop
AFK-AlignedFamKernel · Aug 5, 2024 · 9c2c9cd · 9c2c9cd
1 parent 1402ae5
commit 9c2c9cd
Show file tree

Hide file tree

Showing 7 changed files with 137 additions and 16 deletions.
diff --git a/apps/mobile/src/app/Router.tsx b/apps/mobile/src/app/Router.tsx
@@ -2,7 +2,7 @@ import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { useEffect, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { Dimensions, Platform, StyleSheet, View } from 'react-native';
 
 import { Icon } from '../components';
 import { useStyles, useTheme } from '../hooks';
@@ -25,6 +25,7 @@ import { useAuth } from '../store/auth';
 import { ThemedStyleSheet } from '../styles';
 import { AuthStackParams, HomeBottomStackParams, MainStackParams, RootStackParams } from '../types';
 import { retrievePublicKey } from '../utils/storage';
+import Sidebar from '../components/Layout/sidebar';
 
 const RootStack = createNativeStackNavigator<RootStackParams>();
 const AuthStack = createNativeStackNavigator<AuthStackParams>();
@@ -210,6 +211,11 @@ const RootNavigator: React.FC = () => {
 };
 
 export const Router: React.FC = () => {
+  const isWeb = Platform.OS === 'web';
+  const windowWidth = Dimensions.get('window').width;
+  const shouldShowSidebar = isWeb && windowWidth >= 768;
+  const styles = useStyles(stylesheet);
+
   return (
     <NavigationContainer
     // linking={linking}
@@ -223,6 +229,14 @@ const stylesheet = ThemedStyleSheet((theme) => ({
   sceneContainer: {
     backgroundColor: theme.colors.background,
   },
+  container: {
+    flex: 1,
+    flexDirection: 'row'
+  },
+  content: {
+    flex: 1,
+    padding: 20
+  },
 
   tabBar: {
     backgroundColor: theme.colors.surface,

diff --git a/apps/mobile/src/components/Layout/sidebar/index.tsx b/apps/mobile/src/components/Layout/sidebar/index.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import stylesheet from './styles';
+import { useStyles } from '../../../hooks';
+
+const Sidebar = () => {
+    const styles = useStyles(stylesheet);
+
+    return (
+        <View style={styles.sidebar}>
+            <Text style={styles.sidebarText}>AFK</Text>
+            <Text style={[styles.title]}>Features coming soon</Text>
+            <Text style={[styles.item]}>
+                Launchpad
+            </Text>
+            <Text style={[styles.item,]}>
+                Notifications
+            </Text>
+            <Text style={[styles.item]}>
+                Communities
+            </Text>
+            <Text style={[styles.item]}>
+                Art peace
+            </Text>
+            <Text style={[styles.item]}>
+                Onramp & DeFI
+            </Text>
+        </View>
+    );
+};
+
+export default Sidebar;
diff --git a/apps/mobile/src/components/Layout/sidebar/styles.ts b/apps/mobile/src/components/Layout/sidebar/styles.ts
@@ -0,0 +1,70 @@
+import { Spacing, ThemedStyleSheet } from "../../../styles";
+
+export default ThemedStyleSheet((theme) => ({
+    container: {},
+    sidebar: {
+        width: 250,
+        height: '100%',
+        backgroundColor: theme.colors.background,
+        padding: 20
+    },
+    sidebarText: {
+        fontSize: 18
+    },
+    title: {
+        fontWeight: 'bold',
+        marginBottom: 16,
+        color:theme.colors.text
+    },
+    item: {
+        paddingVertical: 8,
+        color:theme.colors.text
+
+    },
+    outsideContainer: {
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+    },
+
+    outside: {
+        width: '100%',
+        height: '100%',
+    },
+
+    menuContainer: {
+        position: 'absolute',
+        zIndex: 1,
+    },
+    menu: {
+        position: 'absolute',
+        height: 'auto',
+        backgroundColor: theme.colors.divider,
+        borderRadius: 16,
+        overflow: 'hidden',
+        shadowColor: theme.colors.shadow,
+        shadowOffset: { width: 0, height: 2 },
+        shadowRadius: 4,
+        elevation: 2,
+    },
+
+    menuItem: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: Spacing.xxsmall,
+        backgroundColor: theme.colors.surface,
+        paddingHorizontal: Spacing.medium,
+        paddingVertical: Spacing.small,
+    },
+    menuItemLabel: {
+        flex: 1,
+        fontSize: 17,
+        lineHeight: 22,
+        color: theme.colors.text,
+    },
+}));
diff --git a/apps/mobile/src/components/Skeleton/RootScreenContainer.tsx b/apps/mobile/src/components/Skeleton/RootScreenContainer.tsx
@@ -1,14 +1,18 @@
-import {Platform, View, ViewProps} from 'react-native';
+import { Dimensions, Platform, View, ViewProps } from 'react-native';
 
-import {WEB_MAX_WIDTH} from '../../constants/misc';
-import {useStyles} from '../../hooks';
-import {ThemedStyleSheet} from '../../styles';
+import { WEB_MAX_WIDTH } from '../../constants/misc';
+import { useStyles } from '../../hooks';
+import { ThemedStyleSheet } from '../../styles';
+import Sidebar from '../Layout/sidebar';
 
-export const RootScreenContainer: React.FC<ViewProps> = ({style, children, ...props}) => {
+export const RootScreenContainer: React.FC<ViewProps> = ({ style, children, ...props }) => {
   const styles = useStyles(stylesheet);
-
+  const isWeb = Platform.OS === 'web';
+  const windowWidth = Dimensions.get('window').width;
+  const shouldShowSidebar = isWeb && windowWidth >= 768;
   return (
     <View style={[styles.container, style]} {...props}>
+      {shouldShowSidebar && <Sidebar></Sidebar>}
       <View style={styles.content}>{children}</View>
     </View>
   );
@@ -17,13 +21,14 @@ export const RootScreenContainer: React.FC<ViewProps> = ({style, children, ...pr
 const stylesheet = ThemedStyleSheet((theme) => ({
   container: {
     flex: 1,
-    alignItems: 'center',
     backgroundColor: theme.colors.background,
-  },
+    flexDirection:"row",
+    width: '100%',
 
+  },
   content: {
     flex: 1,
     width: '100%',
-    maxWidth: Platform.OS === 'web' ? WEB_MAX_WIDTH : '100%',
+    maxWidth: '100%',
   },
 }));
diff --git a/apps/website/src/app/components/ContributeSection.tsx b/apps/website/src/app/components/ContributeSection.tsx
@@ -26,7 +26,7 @@ export function ContributeSection() {
           AlIgnedFamKernel is available on iOS, Web and Android. It’s free and open source.
         </p>
         <a
-          href="https://github.com/keep-starknet-strange/AlIgnedFamKernel"
+          href="https://github.com/AFK-AlignedFamKernel/afk_monorepo"
           target="_blank"
           className="py-[15px] desktop:px-[42px] px-[24px] bg-white rounded-[5px] flex gap-x-[10px] items-center text-black"
         >

diff --git a/apps/website/src/app/components/HeroSection.tsx b/apps/website/src/app/components/HeroSection.tsx
@@ -33,15 +33,15 @@ export function HeroSection() {
         </p>
         <div className="flex desktop:flex-row flex-col items-center gap-y-4 gap-x-6 text-[18px] leading-[21px]">
           <button className="desktop:py-5 text-sm desktop:text-base py-3 px-4 bg-black w-[200px] border-white border-[1px] border-solid desktop:border-none">
-            <a href="https://app.afk-community" target="_blank">
+            <a href="https://afk-community.xyz" target="_blank">
               Sign up
             </a>
           </button>
-          <button className="desktop:py-5 text-sm text-black desktop:text-base py-3 px-4 bg-white w-[200px]">
-            <a href="https://app.afk-community" target="_blank">
+          {/* <button className="desktop:py-5 text-sm text-black desktop:text-base py-3 px-4 bg-white w-[200px]">
+            <a href="https://afk-community.xyz" target="_blank">
               Download App
             </a>
-          </button>
+          </button> */}
         </div>
       </motion.div>
       <motion.img

diff --git a/apps/website/src/app/components/Navbar.tsx b/apps/website/src/app/components/Navbar.tsx
@@ -24,7 +24,7 @@ export function Navbar() {
       <NavigationLinks />
       <div className="desktop:flex hidden items-center gap-x-4 font-bold text-sm leading-[16px]">
         <button className="py-[15px] px-[48px] bg-white">
-          <a href="https://app.afk-community" target="_blank">
+          <a href="https://afk-community.xyz" target="_blank">
             Log in
           </a>
         </button>