diff --git a/apps/mobile/src/app/Router.tsx b/apps/mobile/src/app/Router.tsx index d5774725..78b64556 100644 --- 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(); const AuthStack = createNativeStackNavigator(); @@ -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 ( ({ 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 new file mode 100644 index 00000000..c5edc6aa --- /dev/null +++ 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 ( + + AFK + Features coming soon + + Launchpad + + + Notifications + + + Communities + + + Art peace + + + Onramp & DeFI + + + ); +}; + +export default Sidebar; diff --git a/apps/mobile/src/components/Layout/sidebar/styles.ts b/apps/mobile/src/components/Layout/sidebar/styles.ts new file mode 100644 index 00000000..38f96c87 --- /dev/null +++ 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 index dd3846b3..f677fce4 100644 --- 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 = ({style, children, ...props}) => { +export const RootScreenContainer: React.FC = ({ style, children, ...props }) => { const styles = useStyles(stylesheet); - + const isWeb = Platform.OS === 'web'; + const windowWidth = Dimensions.get('window').width; + const shouldShowSidebar = isWeb && windowWidth >= 768; return ( + {shouldShowSidebar && } {children} ); @@ -17,13 +21,14 @@ export const RootScreenContainer: React.FC = ({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 index c67c4f16..ff4a8943 100644 --- 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.

diff --git a/apps/website/src/app/components/HeroSection.tsx b/apps/website/src/app/components/HeroSection.tsx index d27a8ea2..4902113b 100644 --- a/apps/website/src/app/components/HeroSection.tsx +++ b/apps/website/src/app/components/HeroSection.tsx @@ -33,15 +33,15 @@ export function HeroSection() {