Uploaded files

src/App.vue

@@ -0,0 +1,55 @@
+<template>
+    <root>
+        <app-navigator></app-navigator>
+    </root>
+</template>
+
+<script>
+    import { React } from 'react';
+
+    import {
+        createDrawerNavigator,
+        createStackNavigator,
+        createAppContainer,
+    } from 'vue-native-router';
+
+    import { Root } from 'native-base';
+
+    import Lessons from "./screens/LessonsScreen";
+    import Settings from "./screens/SettingsScreen";
+
+    import SideBar from "./components/SideBar";
+    import Header from "./components/Header";
+
+    const Drawer = createDrawerNavigator(
+        {
+            Lessons: { screen: Lessons },
+            Settings: { screen: Settings },
+        },
+        {
+            initialRouteName: 'Lessons',
+            contentComponent: SideBar
+    }
+    );
+
+    const StackNavigator = createStackNavigator(
+        {
+            Drawer: { screen: Drawer },
+            Lessons: { screen: Lessons },
+            Settings: { screen: Settings },
+        },
+        {
+            initialRouteName: 'Drawer',
+            headerMode: 'none'
+        }
+    );
+
+    const AppNavigator = createAppContainer(StackNavigator);
+
+    export default {
+        components: {
+            Root,
+            AppNavigator
+        }
+    }
+</script>

src/components/Header.vue

@@ -0,0 +1,40 @@
+<template>
+    <nb-container>
+        <nb-header class="header">
+            <nb-left>
+                <nb-button
+                    transparent
+                    :onPress="() => this.props.navigation.openDrawer()"
+                >
+                    <nb-icon name="menu" />
+                </nb-button>
+            </nb-left>
+
+            <nb-body>
+                <nb-title>{{ title }}</nb-title>
+            </nb-body>
+
+            <nb-right></nb-right>
+        </nb-header>
+    </nb-container>
+</template>
+
+<script>
+    import { React } from 'react';
+
+    export default {
+        name: 'Header',
+        props: {
+            title: { type: String },
+            navigation: { type: Object }
+        },
+        data() {
+            return {
+
+            }
+        },
+        methods: {
+
+        }
+    }
+</script>

src/components/Setup.vue

@@ -0,0 +1,52 @@
+<template>
+    <view class="container">
+        <app-loading v-if="!isAppReady"> </app-loading>
+        <app v-if="isAppReady"></app>
+    </view>
+</template>
+
+<script>
+    import Vue from "vue-native-core";
+    import { VueNativeBase } from "native-base";
+    import { AppLoading } from "expo";
+    import * as Font from "expo-font";
+
+    import App from "../App.vue";
+
+    // registering all native-base components to the global scope of the Vue
+    Vue.use(VueNativeBase);
+
+    export default {
+        components: { App, AppLoading },
+        data() {
+            return {
+                isAppReady: false
+            };
+        },
+        created() {
+            this.loadFonts();
+        },
+        methods: {
+            async loadFonts() {
+                try {
+                    this.isAppReady = false;
+                    await Font.loadAsync({
+                        Roboto: require("../../node_modules/native-base/Fonts/Roboto.ttf"),
+                        Roboto_medium: require("../../node_modules/native-base/Fonts/Roboto_medium.ttf"),
+                        Ionicons: require("../../node_modules/@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/Ionicons.ttf")
+                    });
+                    this.isAppReady = true;
+                } catch (error) {
+                    console.log("some error occured", error);
+                    this.isAppReady = true;
+                }
+            }
+        }
+    };
+</script>
+
+<style>
+    .container {
+        flex: 1;
+    }
+</style>

src/components/SideBar.vue

@@ -0,0 +1,134 @@
+<template>
+    <nb-container>
+        <nb-content class="sidebar-content-wrapper" :bounces="false">
+            <image
+                :source="drawerCover"
+                class="drawer-cover"
+                :style="stylesObj.drawerCoverObj"
+            />
+
+            <nb-list>
+                <nb-list-item
+                    v-for="data in datas"
+                    :key="data.route"
+                    button
+                    noBorder
+                    :onPress="() => handleListItemClick(data)"
+                >
+                    <nb-left>
+                        <nb-icon
+                            active
+                            :name="data.icon"
+                            :style="{ color: '#777', fontSize: 26, width: 30 }"
+                        />
+
+                        <nb-text>
+                            {{ data.name }}
+                        </nb-text>
+                    </nb-left>
+
+                    <nb-right v-if="data.types" :style="{ flex: 1 }">
+                        <nb-badge
+                            class="list-item-badge-container"
+                            :style="{ backgroundColor: data.bg }"
+                        >
+                            <nb-text
+                                class="list-item-badge-text"
+                                :style="stylesObj.badgeText"
+                            >
+                                {{ `${data.types} Types` }}
+                            </nb-text>
+                        </nb-badge>
+                    </nb-right>
+                </nb-list-item>
+            </nb-list>
+        </nb-content>
+    </nb-container>
+</template>
+
+<script>
+    import { Dimensions, Platform } from "react-native";
+    import drawerCover from "../../assets/drawer-cover.png";
+
+    const deviceHeight = Dimensions.get("window").height;
+    const deviceWidth = Dimensions.get("window").width;
+
+    export default {
+        name: 'SideBar',
+        props: {
+            navigation: {
+                type: Object
+            }
+        },
+        data() {
+            return {
+                drawerCover,
+                stylesObj: {
+                    drawerCoverObj: {
+                        height: deviceHeight / 3.5
+                    },
+                    badgeText: {
+                        fontSize: Platform.OS === "android" ? 11 : 13,
+                        marginTop: Platform.OS === "android" ? -3 : 0,
+                        fontWeight: "700"
+                    }
+                },
+                datas: [
+                    {
+                        name: "Расписание",
+                        route: "Lessons",
+                        icon: "school",
+                    },
+                    {
+                        name: "Звонки",
+                        route: "Calls",
+                        icon: "notifications",
+                    },
+                    {
+                        name: "Домашка",
+                        route: "Homework",
+                        icon: "home",
+                        bg: "#477EEA",
+                        types: "100500"
+                    },
+                    {
+                        name: "Настройки",
+                        route: "Settings",
+                        icon: "settings",
+                    },
+                ]
+            };
+        },
+        methods: {
+            handleListItemClick(dataObj) {
+                this.navigation.navigate(dataObj.route);
+            }
+        }
+    };
+</script>
+
+<style>
+    .sidebar-content-wrapper {
+        flex: 1;
+        background-color: #fff;
+    }
+
+    .drawer-cover {
+        flex: 1;
+        align-self: stretch;
+        position: relative;
+        margin-bottom: 10px;
+    }
+
+    .list-item-badge-container {
+        border-radius: 3px;
+        height: 25px;
+        width: 75px;
+    }
+
+    .list-item-badge-text {
+        font-weight: 700;
+        text-align: center;
+        line-height: 30px;
+    }
+</style>

src/screens/LessonsScreen.vue

@@ -0,0 +1,20 @@
+<template>
+    <nb-container>
+        <Header title="Lessons" :navigation="this.props.navigation"/>
+
+        <nb-content>
+            <text>Lessons</text>
+        </nb-content>
+    </nb-container>
+</template>
+
+<script>
+    import Header from "../components/Header";
+
+    export default {
+        name: 'Lessons',
+        components: {
+            Header
+        }
+    }
+</script>

src/screens/SettingsScreen.vue

@@ -0,0 +1,20 @@
+<template>
+    <nb-container>
+        <Header title="Settings" :navigation="this.props.navigation"/>
+
+        <nb-content>
+            <text>Settings</text>
+        </nb-content>
+    </nb-container>
+</template>
+
+<script>
+    import Header from "../components/Header";
+
+    export default {
+        name: 'Settings',
+        components: {
+            Header
+        }
+    }
+</script>