establishing session routes

app/mobile/src/session/Session.jsx

@@ -11,6 +11,9 @@ import Colors from 'constants/Colors';
 import { Profile } from './profile/Profile';
 import { Channels } from './channels/Channels';
 import { Cards } from './cards/Cards';
+import { Contact } from './contact/Contact';
+import { Details } from './details/Details';
+import { Conversation } from './conversation/Conversation';
 
 export function Session() {
 
@@ -18,63 +21,125 @@ export function Session() {
 
   const Tab = createBottomTabNavigator();
 
+  const openCards = (nav) => {}
+  const closeCards = (nav) => {}
+  const openProfile = (nav) => {}
+  const closeProfile = (nav) => {}
+  const openContact = (nav, cardId) => {}
+  const closeContact = (nav) => {}
+  const openConversation = (nav, channelId) => {}
+  const closeConversation = (nav) => {}
+
+
+  // tabbed containers
   const ConversationStack = createStackNavigator();
   const ConversationStackScreen = () => {
     return (
       <ConversationStack.Navigator screenOptions={({ route }) => ({ headerShown: false })}>
-        <ConversationStack.Screen name="channels" component={Channels} />
+        <ConversationStack.Screen name="channels" component={ChannelsTabScreen} />
+        <ConversationStack.Screen name="details" component={DetailsTabScreen} />
       </ConversationStack.Navigator>
     );
   }
-
+  const ChannelsTabScreen = ({ navigation }) => {
+    return <Channels
+      openConversation={(channelId) => openConversation(navigation, channelId)}
+      openProfile={() => openProfile(navigation)}
+    />
+  }
+  const DetailsTabScreen = ({ navigation }) => {
+    return <Details closeDetails={() => closeDetails(navigation)} />
+  }
   const ProfileStack = createStackNavigator();
   const ProfileStackScreen = () => {
     return (
       <ProfileStack.Navigator screenOptions={({ route }) => ({ headerShown: false })}>
-        <ProfileStack.Screen name="channels" component={Profile} />
+        <ProfileStack.Screen name="profile" component={Profile} />
       </ProfileStack.Navigator>
     );
   }
-
   const ContactStack = createStackNavigator();
   const ContactStackScreen = () => {
     return (
       <ContactStack.Navigator screenOptions={({ route }) => ({ headerShown: false })}>
-        <ContactStack.Screen name="channels" component={Cards} />
+        <ContactStack.Screen name="cards" component={ContactsTabScreen} />
+        <ContactStack.Screen name="card" component={ContactTabScreen} />
       </ContactStack.Navigator>
     );
   }
+  const ContactsTabScreen = ({ navigation }) => {
+    return <Cards openContact={(cardId) => openContact(navigation, cardId)} />
+  }
+  const ContactTabScreen = ({ navigation }) => {
+    return <Contact closeContact={() => closeContact(navigation)} />
+  }
 
-  const Drawer = createDrawerNavigator();
-  const CustomDrawerContent = ({ navigation }) => {
+
+  // drawered containers
+
+
+  const CardDrawer = createDrawerNavigator();
+  const CardDrawerContent = ({ otherNav, navigation }) => {
     return (
-      <SafeAreaView><Text>CUSTOM DRAWER</Text></SafeAreaView>
+      <SafeAreaView><TouchableOpacity onPress={() => otherNav.openDrawer()}><Text>CARD DRAWER</Text></TouchableOpacity></SafeAreaView>
     )
   }
-  const HomeScreen = ({ navigation }) => {
+
+  const ContactDrawer = createDrawerNavigator();
+  const ContactDrawerContent = ({ navigation }) => {
+    return (
+      <SafeAreaView><Text>Contact DRAWER</Text></SafeAreaView>
+    )
+  }
+  const HomeScreen = ({ otherNav, navigation }) => {
     return (
       <SafeAreaView>
         <TouchableOpacity onPress={() => navigation.openDrawer()}>
           <Text>OPEN</Text>
         </TouchableOpacity>
+        <TouchableOpacity onPress={() => otherNav.openDrawer()}>
+          <Text>OTHER</Text>
+        </TouchableOpacity>
       </SafeAreaView>
     )
   }
 
+  const CardDrawerScreen = ({ navigation }) => {
+    return (
+      <CardDrawer.Navigator screenOptions={{ 
+            drawerPosition: 'right',
+            headerShown: false,
+            swipeEnabled: false,
+            drawerType: 'front',
+            drawerStyle: {
+              width: state.cardWidth,
+            },
+          }}
+          drawerContent={(props) => <CardDrawerContent otherNav={navigation}  {...props} />}>
+        <CardDrawer.Screen name="Root">
+          {(props) => <HomeScreen otherNav={navigation} {...props} />}
+        </CardDrawer.Screen>
+      </CardDrawer.Navigator>
+    );
+  };
+
   return (
     <SafeAreaProvider>
       <NavigationContainer>
         { state.tabbed === false && (
-          <Drawer.Navigator
-            screenOptions={({ route }) => ({
+          <ContactDrawer.Navigator
+            screenOptions={{
               headerShown: false,
               swipeEnabled: false,
               drawerType: 'front',
               drawerPosition: 'right',
-            })}
-            drawerContent={(props) => <CustomDrawerContent {...props} />}>
-            <Drawer.Screen name="Home" component={HomeScreen} />
-          </Drawer.Navigator>
+              drawerStyle: {
+                width: state.profileWidth,
+              }
+            }}
+            drawerContent={(props) => <ContactDrawerContent {...props} />}>
+            <ContactDrawer.Screen name="Home" component={CardDrawerScreen} />
+          </ContactDrawer.Navigator>
         )}
         { state.tabbed === true && (
           <Tab.Navigator

app/mobile/src/session/contact/Contact.jsx

@@ -0,0 +1,3 @@
+export function Contact() {
+  return <></>
+}

app/mobile/src/session/conversation/Conversation.jsx

@@ -0,0 +1,4 @@
+export function Conversation() {
+  return <></>
+}
+

app/mobile/src/session/details/Details.jsx

@@ -0,0 +1,4 @@
+export function Details() {
+  return <></>
+}
+

app/mobile/src/session/useSession.hook.js

@@ -8,6 +8,8 @@ export function useSession() {
 
   const [state, setState] = useState({
     tabbled: null,
+    profileWidth: '33%',
+    cardWidth: '33%',
   });
   const dimensions = useWindowDimensions();
   const app = useContext(AppContext);
@@ -18,7 +20,18 @@ export function useSession() {
   }
 
   useEffect(() => {
-      updateState({ tabbed: false });
+    if (dimensions.width > config.tabbedWidth) {
+      const width = Math.floor((dimensions.width * 33) / 100);
+      if (width > 500) {
+        updateStatus({ tabbed: false, cardWidth: 550, profileWidth: 500 });
+      }
+      else {
+        updateState({ tabbed: false, cardWidth: width + 50, profileWidth: width });
+      }
+    }
+    else {
+      updateState({ tabbed: true });
+    }
   }, [dimensions]);
 
   const actions = {