From c37e052aa2c4bf80c2af703f1651ad2c9983752c Mon Sep 17 00:00:00 2001
From: Arnaud Vergnet <vergnet@etud.insa-toulouse.fr>
Date: Tue, 21 Apr 2020 09:50:13 +0200
Subject: [PATCH] Removed drawer and put all links in home screen

---
 src/components/Home/ActionsDashboardItem.js |  78 ++---
 src/navigation/DrawerNavigator.js           | 220 ++++----------
 src/navigation/MainTabNavigator.js          | 306 +++++++++++---------
 src/screens/Amicale/AmicaleHomeScreen.js    |  85 ++++++
 src/screens/Home/HomeScreen.js              |  25 +-
 src/screens/Insa/InsaHomeScreen.js          |  85 ++++++
 src/screens/Websites/WebsitesHomeScreen.js  |  79 +++++
 src/utils/URLHandler.js                     |   2 +-
 8 files changed, 503 insertions(+), 377 deletions(-)
 create mode 100644 src/screens/Amicale/AmicaleHomeScreen.js
 create mode 100644 src/screens/Insa/InsaHomeScreen.js
 create mode 100644 src/screens/Websites/WebsitesHomeScreen.js

diff --git a/src/components/Home/ActionsDashboardItem.js b/src/components/Home/ActionsDashboardItem.js
index 6c7f466..00175b2 100644
--- a/src/components/Home/ActionsDashboardItem.js
+++ b/src/components/Home/ActionsDashboardItem.js
@@ -1,12 +1,13 @@
 // @flow
 
 import * as React from 'react';
-import {Button, Card, withTheme} from 'react-native-paper';
-import {Platform, StyleSheet} from "react-native";
-import i18n from 'i18n-js';
+import {Avatar, Card, List, withTheme} from 'react-native-paper';
+import {StyleSheet} from "react-native";
 import {DrawerNavigationProp} from "@react-navigation/drawer";
 import type {CustomTheme} from "../../managers/ThemeManager";
 
+const ICON_AMICALE = require("../../../assets/amicale.png");
+
 type Props = {
     navigation: DrawerNavigationProp,
     theme: CustomTheme,
@@ -18,45 +19,37 @@ class ActionsDashBoardItem extends React.Component<Props> {
         return (nextProps.theme.dark !== this.props.theme.dark)
     }
 
-    openDrawer = () => this.props.navigation.openDrawer();
-
-    gotToSettings = () => this.props.navigation.navigate("settings");
-
     render() {
         return (
             <Card style={{
                 ...styles.card,
                 borderColor: this.props.theme.colors.primary,
             }}>
-                <Card.Content style={styles.content}>
-                    <Button
-                        icon="information"
-                        mode="contained"
-                        onPress={this.openDrawer}
-                        style={styles.servicesButton}
-                    >
-                        {i18n.t("homeScreen.servicesButton")}
-                    </Button>
-                    {
-                        // Leave space to fix ios icon position
-                        Platform.OS === 'ios'
-                            ? <Button
-                                icon="settings"
-                                mode="contained"
-                                onPress={this.gotToSettings}
-                                style={styles.settingsButton}
-                                compact
-                            > </Button>
-                            : <Button
-                                icon="settings"
-                                mode="contained"
-                                onPress={this.gotToSettings}
-                                style={styles.settingsButton}
-                                compact
-                            />
-                    }
-
-                </Card.Content>
+                <List.Item
+                    title={"AMICALE"}
+                    description={"VOTRE COMPTE"}
+                    left={props => <Avatar.Image
+                        {...props}
+                        size={54}
+                        source={ICON_AMICALE}
+                        style={styles.avatar}/>}
+                    right={props => <List.Icon {...props} icon="chevron-right"/>}
+                    onPress={() => this.props.navigation.navigate("amicale-home")}
+                />
+                <List.Item
+                    title={"STUDENT WEBSITES"}
+                    description={"TROP COOL"}
+                    left={props => <List.Icon {...props} icon="web"/>}
+                    right={props => <List.Icon {...props} icon="chevron-right"/>}
+                    onPress={() => this.props.navigation.navigate("websites-home")}
+                />
+                <List.Item
+                    title={"SERVICES INSA"}
+                    description={"TROP BIEN"}
+                    left={props => <List.Icon {...props} icon="star"/>}
+                    right={props => <List.Icon {...props} icon="chevron-right"/>}
+                    onPress={() => this.props.navigation.navigate("insa-home")}
+                />
             </Card>
         );
     }
@@ -68,25 +61,12 @@ const styles = StyleSheet.create({
         marginLeft: 10,
         marginRight: 10,
         marginTop: 10,
-        overflow: 'hidden',
         elevation: 4,
         borderWidth: 1,
     },
     avatar: {
         backgroundColor: 'transparent'
     },
-    content: {
-        flex: 1,
-        flexDirection: 'row',
-    },
-    servicesButton: {
-        marginLeft: 'auto',
-        marginRight: 5,
-    },
-    settingsButton: {
-        marginLeft: 5,
-        marginRight: 'auto',
-    }
 });
 
 export default withTheme(ActionsDashBoardItem);
diff --git a/src/navigation/DrawerNavigator.js b/src/navigation/DrawerNavigator.js
index 846369d..0a9db8a 100644
--- a/src/navigation/DrawerNavigator.js
+++ b/src/navigation/DrawerNavigator.js
@@ -1,31 +1,12 @@
 // @flow
 
 import * as React from 'react';
-import {createDrawerNavigator, DrawerNavigationProp} from '@react-navigation/drawer';
 import SettingsScreen from '../screens/Other/SettingsScreen';
 import AboutScreen from '../screens/About/AboutScreen';
 import AboutDependenciesScreen from '../screens/About/AboutDependenciesScreen';
-import SelfMenuScreen from '../screens/Other/SelfMenuScreen';
-import AvailableRoomScreen from "../screens/Websites/AvailableRoomScreen";
-import BibScreen from "../screens/Websites/BibScreen";
-import TetrisScreen from "../screens/Tetris/TetrisScreen";
 import DebugScreen from '../screens/About/DebugScreen';
-import Sidebar from "../components/Sidebar/Sidebar";
 import {createStackNavigator, TransitionPresets} from "@react-navigation/stack";
 import i18n from "i18n-js";
-import LoginScreen from "../screens/Amicale/LoginScreen";
-import ProfileScreen from "../screens/Amicale/ProfileScreen";
-import ClubListScreen from "../screens/Amicale/Clubs/ClubListScreen";
-import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen";
-import ClubAboutScreen from "../screens/Amicale/Clubs/ClubAboutScreen";
-import VoteScreen from "../screens/Amicale/VoteScreen";
-import AmicaleContactScreen from "../screens/Amicale/AmicaleContactScreen";
-import {AmicaleWebsiteScreen} from "../screens/Websites/AmicaleWebsiteScreen";
-import {TutorInsaWebsiteScreen} from "../screens/Websites/TutorInsaWebsiteScreen";
-import {WiketudWebsiteScreen} from "../screens/Websites/WiketudWebsiteScreen";
-import {ElusEtudiantsWebsiteScreen} from "../screens/Websites/ElusEtudiantsWebsiteScreen";
-import {createCollapsibleStack} from "react-navigation-collapsible";
-import {useTheme} from "react-native-paper";
 import TabNavigator from "./MainTabNavigator";
 
 const defaultScreenOptions = {
@@ -34,139 +15,54 @@ const defaultScreenOptions = {
     ...TransitionPresets.SlideFromRightIOS,
 };
 
-function createScreenCollapsibleStack (name: string, component: any, title: string, useNativeDriver?: boolean) {
-    const {colors} = useTheme();
-    return createCollapsibleStack(
-        <DrawerStack.Screen
-            name={name}
-            component={component}
-            options={{
-                title: title,
-                headerStyle: {
-                    backgroundColor: colors.surface,
-                },
-            }}
-        />,
-        {
-            collapsedColor: 'transparent',
-            useNativeDriver: useNativeDriver != null ? useNativeDriver : true, // native driver does not work with webview
-        }
-    )
+const MainStack = createStackNavigator();
+
+function MainStackComponent(props: { createTabNavigator: () => React.Node }) {
+    return (
+        <MainStack.Navigator
+            initialRouteName={'main'}
+            headerMode={'screen'}
+            screenOptions={defaultScreenOptions}
+        >
+            <MainStack.Screen
+                name="main"
+                component={props.createTabNavigator}
+                options={{
+                    headerShown: false,
+                }}
+            />
+            <MainStack.Screen
+                name="settings"
+                component={SettingsScreen}
+                options={{
+                    title: i18n.t('screens.settings'),
+                }}
+            />
+            <MainStack.Screen
+                name="about"
+                component={AboutScreen}
+                options={{
+                    title: i18n.t('screens.about'),
+                }}
+            />
+            <MainStack.Screen
+                name="dependencies"
+                component={AboutDependenciesScreen}
+                options={{
+                    title: i18n.t('aboutScreen.libs')
+                }}
+            />
+            <MainStack.Screen
+                name="debug"
+                component={DebugScreen}
+                options={{
+                    title: i18n.t('aboutScreen.debug')
+                }}
+            />
+        </MainStack.Navigator>
+    );
 }
 
-function getWebsiteStack(name: string, component: any, title: string) {
-    return createScreenCollapsibleStack(name, component, title, false);
-}
-
-const DrawerStack = createStackNavigator();
-
-function DrawerStackComponent(props) {
-        return (
-            <DrawerStack.Navigator
-                initialRouteName={'main'}
-                headerMode={'screen'}
-                screenOptions={defaultScreenOptions}
-            >
-                <DrawerStack.Screen
-                    name="main"
-                    component={props.createTabNavigator}
-                    options={{
-                        headerShown: false,
-                    }}
-                />
-                <DrawerStack.Screen
-                    name="settings"
-                    component={SettingsScreen}
-                    options={{
-                        title: i18n.t('screens.settings'),
-                    }}
-                />
-                <DrawerStack.Screen
-                    name="about"
-                    component={AboutScreen}
-                    options={{
-                        title: i18n.t('screens.about'),
-                    }}
-                />
-                <DrawerStack.Screen
-                    name="dependencies"
-                    component={AboutDependenciesScreen}
-                    options={{
-                        title: i18n.t('aboutScreen.libs')
-                    }}
-                />
-                <DrawerStack.Screen
-                    name="debug"
-                    component={DebugScreen}
-                    options={{
-                        title: i18n.t('aboutScreen.debug')
-                    }}
-                />
-                {createScreenCollapsibleStack("self-menu", SelfMenuScreen, i18n.t('screens.menuSelf'))}
-                {getWebsiteStack("available-rooms", AvailableRoomScreen, i18n.t('screens.availableRooms'))}
-                {getWebsiteStack("bib", BibScreen, i18n.t('screens.bib'))}
-                {getWebsiteStack("amicale-website", AmicaleWebsiteScreen, "Amicale")}
-                {getWebsiteStack("elus-etudiants", ElusEtudiantsWebsiteScreen, "Élus Étudiants")}
-                {getWebsiteStack("wiketud", WiketudWebsiteScreen, "Wiketud")}
-                {getWebsiteStack("tutorinsa", TutorInsaWebsiteScreen, "Tutor'INSA")}
-                <DrawerStack.Screen
-                    name="tetris"
-                    component={TetrisScreen}
-                    options={{
-                        title: i18n.t("game.title"),
-                    }}
-                />
-                <DrawerStack.Screen
-                    name="login"
-                    component={LoginScreen}
-                    options={{
-                        title: i18n.t('screens.login'),
-                    }}
-                />
-                <DrawerStack.Screen
-                    name="profile"
-                    component={ProfileScreen}
-                    options={{
-                            title: i18n.t('screens.profile'),
-                        }}
-                />
-                {createScreenCollapsibleStack("club-list", ClubListScreen, i18n.t('clubs.clubList'))}
-                <DrawerStack.Screen
-                    name="club-information"
-                    component={ClubDisplayScreen}
-                    options={{
-                        title: i18n.t('screens.clubDisplayScreen'),
-                        ...TransitionPresets.ModalSlideFromBottomIOS,
-                    }}
-                />
-                <DrawerStack.Screen
-                    name="club-about"
-                    component={ClubAboutScreen}
-                    options={{
-                        title: i18n.t('screens.clubsAbout'),
-                        ...TransitionPresets.ModalSlideFromBottomIOS,
-                    }}
-                />
-                <DrawerStack.Screen
-                    name="vote"
-                    component={VoteScreen}
-                    options={{
-                        title: i18n.t('screens.vote'),
-                    }}
-                />
-                <DrawerStack.Screen
-                    name="amicale-contact"
-                    component={AmicaleContactScreen}
-                    options={{
-                        title: i18n.t('screens.amicaleAbout'),
-                    }}
-                />
-            </DrawerStack.Navigator>
-        );
-}
-
-const Drawer = createDrawerNavigator();
-
 type Props = {
     defaultHomeRoute: string | null,
     defaultHomeData: { [key: string]: any }
@@ -174,34 +70,16 @@ type Props = {
 
 export default class DrawerNavigator extends React.Component<Props> {
 
-    createDrawerStackComponent: () => React.Node;
+    createTabNavigator: () => React.Node;
 
     constructor(props: Props) {
         super(props);
-        const createTabNavigator = () => <TabNavigator {...props}/>
-        this.createDrawerStackComponent = () => <DrawerStackComponent createTabNavigator={createTabNavigator}/>;
+        this.createTabNavigator = () => <TabNavigator {...props}/>
     }
 
-    getDrawerContent = (props: {
-        navigation: DrawerNavigationProp,
-        state: { [key: string]: any }
-    }) => <Sidebar {...props}/>
-
     render() {
         return (
-            <Drawer.Navigator
-                initialRouteName={'stack'}
-                headerMode={'none'}
-                backBehavior={'initialRoute'}
-                drawerType={'front'}
-                drawerContent={this.getDrawerContent}
-                screenOptions={defaultScreenOptions}
-            >
-                <Drawer.Screen
-                    name="stack"
-                    component={this.createDrawerStackComponent}
-                />
-            </Drawer.Navigator>
+            <MainStackComponent createTabNavigator={this.createTabNavigator}/>
         );
     }
 }
diff --git a/src/navigation/MainTabNavigator.js b/src/navigation/MainTabNavigator.js
index 8eac23e..02eb1e5 100644
--- a/src/navigation/MainTabNavigator.js
+++ b/src/navigation/MainTabNavigator.js
@@ -13,82 +13,97 @@ import ProximoAboutScreen from "../screens/Proximo/ProximoAboutScreen";
 import PlanexScreen from '../screens/Planex/PlanexScreen';
 import AsyncStorageManager from "../managers/AsyncStorageManager";
 import {useTheme} from 'react-native-paper';
+import {Platform} from 'react-native';
 import i18n from "i18n-js";
 import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen";
 import ScannerScreen from "../screens/Home/ScannerScreen";
-import MaterialHeaderButtons, {Item} from "../components/Overrides/CustomHeaderButton";
 import FeedItemScreen from "../screens/Home/FeedItemScreen";
 import {createCollapsibleStack} from "react-navigation-collapsible";
 import GroupSelectionScreen from "../screens/Planex/GroupSelectionScreen";
 import CustomTabBar from "../components/Tabbar/CustomTabBar";
-import {DrawerNavigationProp} from "@react-navigation/drawer";
+import SelfMenuScreen from "../screens/Other/SelfMenuScreen";
+import AvailableRoomScreen from "../screens/Websites/AvailableRoomScreen";
+import BibScreen from "../screens/Websites/BibScreen";
+import {AmicaleWebsiteScreen} from "../screens/Websites/AmicaleWebsiteScreen";
+import {ElusEtudiantsWebsiteScreen} from "../screens/Websites/ElusEtudiantsWebsiteScreen";
+import {WiketudWebsiteScreen} from "../screens/Websites/WiketudWebsiteScreen";
+import {TutorInsaWebsiteScreen} from "../screens/Websites/TutorInsaWebsiteScreen";
+import TetrisScreen from "../screens/Tetris/TetrisScreen";
+import LoginScreen from "../screens/Amicale/LoginScreen";
+import ProfileScreen from "../screens/Amicale/ProfileScreen";
+import ClubListScreen from "../screens/Amicale/Clubs/ClubListScreen";
+import ClubAboutScreen from "../screens/Amicale/Clubs/ClubAboutScreen";
+import VoteScreen from "../screens/Amicale/VoteScreen";
+import AmicaleContactScreen from "../screens/Amicale/AmicaleContactScreen";
+import AmicaleHomeScreen from "../screens/Amicale/AmicaleHomeScreen";
+import WebsitesHomeScreen from "../screens/Websites/WebsitesHomeScreen";
+import InsaHomeScreen from "../screens/Insa/InsaHomeScreen";
 
 const defaultScreenOptions = {
     gestureEnabled: true,
     cardOverlayEnabled: true,
-    ...TransitionPresets.SlideFromRightIOS,
+    ...TransitionPresets.ScaleFromCenterAndroid,
 };
 
-function getDrawerButton(navigation: DrawerNavigationProp) {
-    return (
-        <MaterialHeaderButtons left={true}>
-            <Item title="menu" iconName="menu" onPress={navigation.openDrawer}/>
-        </MaterialHeaderButtons>
-    );
+const modalTransition = Platform.OS === 'ios' ? TransitionPresets.ModalPresentationIOS : TransitionPresets.ModalSlideFromBottomIOS;
+
+const screenTransition = Platform.OS === 'ios' ? TransitionPresets.SlideFromRightIOS : TransitionPresets.ScaleFromCenterAndroid;
+
+function createScreenCollapsibleStack(
+    name: string,
+    component: any,
+    title: string,
+    useNativeDriver?: boolean,
+    options?: { [key: string]: any }) {
+    const {colors} = useTheme();
+    const screenOptions = options != null ? options : {};
+    return createCollapsibleStack(
+        <HomeStack.Screen
+            name={name}
+            component={component}
+            options={{
+                title: title,
+                headerStyle: {
+                    backgroundColor: colors.surface,
+                },
+                ...screenOptions,
+            }}
+        />,
+        {
+            collapsedColor: 'transparent',
+            useNativeDriver: useNativeDriver != null ? useNativeDriver : true, // native driver does not work with webview
+        }
+    )
 }
 
+function getWebsiteStack(name: string, component: any, title: string) {
+    return createScreenCollapsibleStack(name, component, title, false);
+}
+
+
 const ProximoStack = createStackNavigator();
 
 function ProximoStackComponent() {
-    const {colors} = useTheme();
     return (
         <ProximoStack.Navigator
             initialRouteName="index"
-            headerMode="float"
+            headerMode={"screen"}
             screenOptions={defaultScreenOptions}
         >
-            {createCollapsibleStack(
-                <ProximoStack.Screen
-                    name="index"
-                    options={({navigation}) => {
-                        const openDrawer = getDrawerButton.bind(this, navigation);
-                        return {
-                            title: 'Proximo',
-                            headerLeft: openDrawer,
-                            headerStyle: {
-                                backgroundColor: colors.surface,
-                            },
-                        };
-                    }}
-                    component={ProximoMainScreen}
-                />,
-                {
-                    collapsedColor: 'transparent',
-                    useNativeDriver: true,
-                }
-            )}
-            {createCollapsibleStack(
-                <ProximoStack.Screen
-                    name="proximo-list"
-                    options={{
-                        title: i18n.t('screens.proximoArticles'),
-                        headerStyle: {
-                            backgroundColor: colors.surface,
-                        }
-                    }}
-                    component={ProximoListScreen}
-                />,
-                {
-                    collapsedColor: 'transparent',
-                    useNativeDriver: true,
-                }
+            {createScreenCollapsibleStack("index", ProximoMainScreen, "Proximo")}
+            {createScreenCollapsibleStack(
+                "proximo-list",
+                ProximoListScreen,
+                i18n.t('screens.proximoArticles'),
+                true,
+                {...screenTransition},
             )}
             <ProximoStack.Screen
                 name="proximo-about"
                 component={ProximoAboutScreen}
                 options={{
                     title: i18n.t('screens.proximo'),
-                    ...TransitionPresets.ModalSlideFromBottomIOS,
+                    ...modalTransition,
                 }}
             />
         </ProximoStack.Navigator>
@@ -98,39 +113,19 @@ function ProximoStackComponent() {
 const ProxiwashStack = createStackNavigator();
 
 function ProxiwashStackComponent() {
-    const {colors} = useTheme();
     return (
         <ProxiwashStack.Navigator
             initialRouteName="index"
-            headerMode='float'
+            headerMode={"screen"}
             screenOptions={defaultScreenOptions}
         >
-            {createCollapsibleStack(
-                <ProxiwashStack.Screen
-                    name="index"
-                    component={ProxiwashScreen}
-                    options={({navigation}) => {
-                        const openDrawer = getDrawerButton.bind(this, navigation);
-                        return {
-                            title: i18n.t('screens.proxiwash'),
-                            headerLeft: openDrawer,
-                            headerStyle: {
-                                backgroundColor: colors.surface,
-                            },
-                        };
-                    }}
-                />,
-                {
-                    collapsedColor: 'transparent',
-                    useNativeDriver: true,
-                }
-            )}
+            {createScreenCollapsibleStack("index", ProxiwashScreen, i18n.t('screens.proxiwash'))}
             <ProxiwashStack.Screen
                 name="proxiwash-about"
                 component={ProxiwashAboutScreen}
                 options={{
                     title: i18n.t('screens.proxiwash'),
-                    ...TransitionPresets.ModalSlideFromBottomIOS,
+                    ...modalTransition,
                 }}
             />
         </ProxiwashStack.Navigator>
@@ -143,18 +138,14 @@ function PlanningStackComponent() {
     return (
         <PlanningStack.Navigator
             initialRouteName="index"
-            headerMode='float'
+            headerMode={"screen"}
             screenOptions={defaultScreenOptions}
         >
             <PlanningStack.Screen
                 name="index"
                 component={PlanningScreen}
-                options={({navigation}) => {
-                    const openDrawer = getDrawerButton.bind(this, navigation);
-                    return {
-                        title: i18n.t('screens.planning'),
-                        headerLeft: openDrawer
-                    };
+                options={{
+                    title: i18n.t('screens.planning'),
                 }}
             />
             <PlanningStack.Screen
@@ -162,7 +153,7 @@ function PlanningStackComponent() {
                 component={PlanningDisplayScreen}
                 options={{
                     title: i18n.t('screens.planningDisplayScreen'),
-                    ...TransitionPresets.ModalSlideFromBottomIOS,
+                    ...modalTransition,
                 }}
             />
         </PlanningStack.Navigator>
@@ -179,22 +170,18 @@ function HomeStackComponent(initialRoute: string | null, defaultData: { [key: st
     return (
         <HomeStack.Navigator
             initialRouteName={"index"}
-            headerMode="float"
+            headerMode={"screen"}
             screenOptions={defaultScreenOptions}
         >
             {createCollapsibleStack(
                 <HomeStack.Screen
                     name="index"
                     component={HomeScreen}
-                    options={({navigation}) => {
-                        const openDrawer = getDrawerButton.bind(this, navigation);
-                        return {
-                            title: i18n.t('screens.home'),
-                            headerLeft: openDrawer,
-                            headerStyle: {
-                                backgroundColor: colors.surface,
-                            },
-                        };
+                    options={{
+                        title: i18n.t('screens.home'),
+                        headerStyle: {
+                            backgroundColor: colors.surface,
+                        },
                     }}
                     initialParams={params}
                 />,
@@ -208,15 +195,7 @@ function HomeStackComponent(initialRoute: string | null, defaultData: { [key: st
                 component={PlanningDisplayScreen}
                 options={{
                     title: i18n.t('screens.planningDisplayScreen'),
-                    ...TransitionPresets.ModalSlideFromBottomIOS,
-                }}
-            />
-            <HomeStack.Screen
-                name="home-club-information"
-                component={ClubDisplayScreen}
-                options={{
-                    title: i18n.t('screens.clubDisplayScreen'),
-                    ...TransitionPresets.ModalSlideFromBottomIOS,
+                    ...modalTransition,
                 }}
             />
             <HomeStack.Screen
@@ -224,7 +203,7 @@ function HomeStackComponent(initialRoute: string | null, defaultData: { [key: st
                 component={FeedItemScreen}
                 options={{
                     title: i18n.t('screens.feedDisplayScreen'),
-                    ...TransitionPresets.ModalSlideFromBottomIOS,
+                    ...modalTransition,
                 }}
             />
             <HomeStack.Screen
@@ -232,7 +211,89 @@ function HomeStackComponent(initialRoute: string | null, defaultData: { [key: st
                 component={ScannerScreen}
                 options={{
                     title: i18n.t('screens.scanner'),
-                    ...TransitionPresets.ModalSlideFromBottomIOS,
+                    ...modalTransition,
+                }}
+            />
+
+
+            {createScreenCollapsibleStack("self-menu", SelfMenuScreen, i18n.t('screens.menuSelf'))}
+            {getWebsiteStack("available-rooms", AvailableRoomScreen, i18n.t('screens.availableRooms'))}
+            {getWebsiteStack("bib", BibScreen, i18n.t('screens.bib'))}
+            {getWebsiteStack("amicale-website", AmicaleWebsiteScreen, "Amicale")}
+            {getWebsiteStack("elus-etudiants", ElusEtudiantsWebsiteScreen, "Élus Étudiants")}
+            {getWebsiteStack("wiketud", WiketudWebsiteScreen, "Wiketud")}
+            {getWebsiteStack("tutorinsa", TutorInsaWebsiteScreen, "Tutor'INSA")}
+            <HomeStack.Screen
+                name="tetris"
+                component={TetrisScreen}
+                options={{
+                    title: i18n.t("game.title"),
+                }}
+            />
+            <HomeStack.Screen
+                name="login"
+                component={LoginScreen}
+                options={{
+                    title: i18n.t('screens.login'),
+                }}
+            />
+            <HomeStack.Screen
+                name="profile"
+                component={ProfileScreen}
+                options={{
+                    title: i18n.t('screens.profile'),
+                }}
+            />
+            {createScreenCollapsibleStack("club-list", ClubListScreen, i18n.t('clubs.clubList'))}
+            <HomeStack.Screen
+                name="club-information"
+                component={ClubDisplayScreen}
+                options={{
+                    title: i18n.t('screens.clubDisplayScreen'),
+                    ...modalTransition,
+                }}
+            />
+            <HomeStack.Screen
+                name="club-about"
+                component={ClubAboutScreen}
+                options={{
+                    title: i18n.t('screens.clubsAbout'),
+                    ...modalTransition,
+                }}
+            />
+            <HomeStack.Screen
+                name="vote"
+                component={VoteScreen}
+                options={{
+                    title: i18n.t('screens.vote'),
+                }}
+            />
+            <HomeStack.Screen
+                name="amicale-contact"
+                component={AmicaleContactScreen}
+                options={{
+                    title: i18n.t('screens.amicaleAbout'),
+                }}
+            />
+            <HomeStack.Screen
+                name="amicale-home"
+                component={AmicaleHomeScreen}
+                options={{
+                    title: "AMICALE HOME",
+                }}
+            />
+            <HomeStack.Screen
+                name="websites-home"
+                component={WebsitesHomeScreen}
+                options={{
+                    title: "WEBSITES HOME",
+                }}
+            />
+            <HomeStack.Screen
+                name="insa-home"
+                component={InsaHomeScreen}
+                options={{
+                    title: "INSA HOME",
                 }}
             />
         </HomeStack.Navigator>
@@ -242,50 +303,19 @@ function HomeStackComponent(initialRoute: string | null, defaultData: { [key: st
 const PlanexStack = createStackNavigator();
 
 function PlanexStackComponent() {
-    const {colors} = useTheme();
     return (
         <PlanexStack.Navigator
             initialRouteName="index"
-            headerMode="float"
+            headerMode={"screen"}
             screenOptions={defaultScreenOptions}
         >
-            {createCollapsibleStack(
-                <PlanexStack.Screen
-                    name="index"
-                    component={PlanexScreen}
-                    options={({navigation}) => {
-                        const openDrawer = getDrawerButton.bind(this, navigation);
-                        return {
-                            title: 'Planex',
-                            headerLeft: openDrawer,
-                            headerStyle: {
-                                backgroundColor: colors.surface,
-                            },
-                        };
-                    }}
-                />,
-                {
-                    collapsedColor: 'transparent',
-                    useNativeDriver: false, // native driver does not work with webview
-                }
-            )}
-            {createCollapsibleStack(
-                <PlanexStack.Screen
-                    name="group-select"
-                    component={GroupSelectionScreen}
-                    options={{
-                        title: 'GroupSelectionScreen',
-                        headerStyle: {
-                            backgroundColor: colors.surface,
-                        },
-                        ...TransitionPresets.ModalSlideFromBottomIOS,
-                    }}
-                />,
-                {
-                    collapsedColor: 'transparent',
-                    useNativeDriver: true,
-                }
-            )}
+            {getWebsiteStack("index", PlanexScreen, "Planex")}
+            {createScreenCollapsibleStack(
+                "group-select",
+                GroupSelectionScreen,
+                "GROUP SELECT",
+                true,
+                {...modalTransition})}
         </PlanexStack.Navigator>
     );
 }
diff --git a/src/screens/Amicale/AmicaleHomeScreen.js b/src/screens/Amicale/AmicaleHomeScreen.js
new file mode 100644
index 0000000..8ed88ad
--- /dev/null
+++ b/src/screens/Amicale/AmicaleHomeScreen.js
@@ -0,0 +1,85 @@
+// @flow
+
+import * as React from 'react';
+import {ScrollView, StyleSheet} from "react-native";
+import {Button, withTheme} from 'react-native-paper';
+
+type Props = {
+    navigation: Object,
+    route: Object,
+}
+
+type State = {}
+
+class AmicaleHomeScreen extends React.Component<Props, State> {
+
+    state = {};
+
+    colors: Object;
+
+    constructor(props) {
+        super(props);
+
+        this.colors = props.theme.colors;
+    }
+
+    render() {
+        const nav = this.props.navigation;
+        return (
+            <ScrollView>
+                <Button
+                    icon={"login"}
+                    onPress={() => nav.navigate("login")}
+                >
+                    LOGIN
+                </Button>
+                <Button
+                    icon={"information"}
+                    onPress={() => nav.navigate("amicale-contact")}
+                >
+                    INFO
+                </Button>
+                <Button
+                    icon={"information"}
+                    onPress={() => nav.navigate("club-list")}
+                >
+                    CLUBS
+                </Button>
+                <Button
+                    icon={"information"}
+                    onPress={() => nav.navigate("profile")}
+                >
+                    PROFILE
+                </Button>
+                <Button
+                    icon={"information"}
+                    onPress={() => nav.navigate("vote")}
+                >
+                    VOTE
+                </Button>
+            </ScrollView>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        flexDirection: 'column',
+        justifyContent: 'center',
+    },
+    card: {
+        margin: 10,
+    },
+    header: {
+        fontSize: 36,
+        marginBottom: 48
+    },
+    textInput: {},
+    btnContainer: {
+        marginTop: 5,
+        marginBottom: 10,
+    }
+});
+
+export default withTheme(AmicaleHomeScreen);
diff --git a/src/screens/Home/HomeScreen.js b/src/screens/Home/HomeScreen.js
index f1a75fc..c205526 100644
--- a/src/screens/Home/HomeScreen.js
+++ b/src/screens/Home/HomeScreen.js
@@ -11,7 +11,6 @@ import SquareDashboardItem from "../../components/Home/SmallDashboardItem";
 import PreviewEventDashboardItem from "../../components/Home/PreviewEventDashboardItem";
 import {stringToDate} from "../../utils/Planning";
 import ActionsDashBoardItem from "../../components/Home/ActionsDashboardItem";
-import ConnectionManager from "../../managers/ConnectionManager";
 import {CommonActions} from '@react-navigation/native';
 import MaterialHeaderButtons, {Item} from "../../components/Overrides/CustomHeaderButton";
 import AnimatedFAB from "../../components/Animations/AnimatedFAB";
@@ -103,14 +102,11 @@ class HomeScreen extends React.Component<Props> {
 
     colors: Object;
 
-    isLoggedIn: boolean | null;
-
     fabRef: { current: null | AnimatedFAB };
 
     constructor(props) {
         super(props);
         this.colors = props.theme.colors;
-        this.isLoggedIn = null;
         this.fabRef = React.createRef();
     }
 
@@ -132,12 +128,9 @@ class HomeScreen extends React.Component<Props> {
     }
 
     onScreenFocus = () => {
-        if (this.isLoggedIn !== ConnectionManager.getInstance().isLoggedIn()) {
-            this.isLoggedIn = ConnectionManager.getInstance().isLoggedIn();
-            this.props.navigation.setOptions({
-                headerRight: this.getHeaderButton,
-            });
-        }
+        this.props.navigation.setOptions({
+            headerRight: this.getHeaderButton,
+        });
         // handle link open when home is not focused or created
         this.handleNavigationParams();
     };
@@ -153,15 +146,11 @@ class HomeScreen extends React.Component<Props> {
     };
 
     getHeaderButton = () => {
-        const screen = this.isLoggedIn
-            ? "profile"
-            : "login";
-        const icon = this.isLoggedIn
-            ? "account"
-            : "login";
-        const onPress = () => this.props.navigation.navigate(screen);
+        const onPressSettings = () => this.props.navigation.navigate("settings");
+        const onPressAbout = () => this.props.navigation.navigate("about");
         return <MaterialHeaderButtons>
-            <Item title="main" iconName={icon} onPress={onPress}/>
+            <Item title="settings" iconName={"settings"} onPress={onPressSettings}/>
+            <Item title="information" iconName={"information"} onPress={onPressAbout}/>
         </MaterialHeaderButtons>;
     };
 
diff --git a/src/screens/Insa/InsaHomeScreen.js b/src/screens/Insa/InsaHomeScreen.js
new file mode 100644
index 0000000..18ce834
--- /dev/null
+++ b/src/screens/Insa/InsaHomeScreen.js
@@ -0,0 +1,85 @@
+// @flow
+
+import * as React from 'react';
+import {ScrollView, StyleSheet} from "react-native";
+import {Button, withTheme} from 'react-native-paper';
+
+type Props = {
+    navigation: Object,
+    route: Object,
+}
+
+type State = {}
+
+class InsaHomeScreen extends React.Component<Props, State> {
+
+    state = {};
+
+    colors: Object;
+
+    constructor(props) {
+        super(props);
+
+        this.colors = props.theme.colors;
+    }
+
+    render() {
+        const nav = this.props.navigation;
+        return (
+            <ScrollView>
+                <Button
+                    icon={"information"}
+                    onPress={() => nav.navigate("self-menu")}
+                >
+                    RU
+                </Button>
+                <Button
+                    icon={"information"}
+                    onPress={() => nav.navigate("available-rooms")}
+                >
+                    AVAILABLE ROOMS
+                </Button>
+                <Button
+                    icon={"information"}
+                    onPress={() => nav.navigate("bib")}
+                >
+                    BIB
+                </Button>
+                <Button// TODO create webview
+                    icon={"information"}
+                    onPress={() => nav.navigate("self-menu")}
+                >
+                    EMAIL
+                </Button>
+                <Button// TODO create webview
+                    icon={"information"}
+                    onPress={() => nav.navigate("self-menu")}
+                >
+                    ENT
+                </Button>
+            </ScrollView>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        flexDirection: 'column',
+        justifyContent: 'center',
+    },
+    card: {
+        margin: 10,
+    },
+    header: {
+        fontSize: 36,
+        marginBottom: 48
+    },
+    textInput: {},
+    btnContainer: {
+        marginTop: 5,
+        marginBottom: 10,
+    }
+});
+
+export default withTheme(InsaHomeScreen);
diff --git a/src/screens/Websites/WebsitesHomeScreen.js b/src/screens/Websites/WebsitesHomeScreen.js
new file mode 100644
index 0000000..afac6be
--- /dev/null
+++ b/src/screens/Websites/WebsitesHomeScreen.js
@@ -0,0 +1,79 @@
+// @flow
+
+import * as React from 'react';
+import {ScrollView, StyleSheet} from "react-native";
+import {Button, withTheme} from 'react-native-paper';
+
+type Props = {
+    navigation: Object,
+    route: Object,
+}
+
+type State = {}
+
+class WebsitesHomeScreen extends React.Component<Props, State> {
+
+    state = {};
+
+    colors: Object;
+
+    constructor(props) {
+        super(props);
+
+        this.colors = props.theme.colors;
+    }
+
+    render() {
+        const nav = this.props.navigation;
+        return (
+            <ScrollView>
+                <Button
+                    icon={"information"}
+                    onPress={() => nav.navigate("amicale-website")}
+                >
+                    AMICALE
+                </Button>
+                <Button
+                    icon={"information"}
+                    onPress={() => nav.navigate("elus-etudiants")}
+                >
+                    ELUS ETUDIANTS
+                </Button>
+                <Button
+                    icon={"information"}
+                    onPress={() => nav.navigate("tutorinsa")}
+                >
+                    TUTOR INSA
+                </Button>
+                <Button
+                    icon={"information"}
+                    onPress={() => nav.navigate("wiketud")}
+                >
+                    WIKETUD
+                </Button>
+            </ScrollView>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        flexDirection: 'column',
+        justifyContent: 'center',
+    },
+    card: {
+        margin: 10,
+    },
+    header: {
+        fontSize: 36,
+        marginBottom: 48
+    },
+    textInput: {},
+    btnContainer: {
+        marginTop: 5,
+        marginBottom: 10,
+    }
+});
+
+export default withTheme(WebsitesHomeScreen);
diff --git a/src/utils/URLHandler.js b/src/utils/URLHandler.js
index eb83e16..a6e73c2 100644
--- a/src/utils/URLHandler.js
+++ b/src/utils/URLHandler.js
@@ -7,7 +7,7 @@ export default class URLHandler {
     static CLUB_INFO_URL_PATH = "club";
     static EVENT_INFO_URL_PATH = "event";
 
-    static CLUB_INFO_ROUTE = "home-club-information";
+    static CLUB_INFO_ROUTE = "club-information";
     static EVENT_INFO_ROUTE = "home-planning-information";
 
     onInitialURLParsed: Function;