Main layout of the application

App.js

@@ -1,66 +1,34 @@
 /**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
  * @format
  * @flow strict-local
  */
 
 import React from 'react';
 import {
   StyleSheet,
-  ScrollView,
   View,
-  Text,
 } from 'react-native';
 
-import {
-  Header,
-  LearnMoreLinks,
-  Colors,
-} from 'react-native/Libraries/NewAppScreen';
-
 
 class App extends React.Component {
 
   render() {
     return (
-      <ScrollView style={styles.scrollView}>
-        <Header/>
-        <View style={styles.body}>
-          <View>
-            <Text style={styles.sectionTitle}>Learn More</Text>
-            <Text style={styles.sectionDescription}>
-              Read the docs to discover what to do next:
-            </Text>
-          </View>
-          <LearnMoreLinks />
+      <>
+        <UserAccountPanel />
+        <View style={styles.mainLayout}>
+          <NotesMainPanel/>
         </View>
-      </ScrollView>
+      </>
     );
   }
 };
 
 const styles = StyleSheet.create({
-  scrollView: {
-    backgroundColor: Colors.lighter,
-  },
-  body: {
-    backgroundColor: Colors.lighter,
+  mainLayout: {
+    flex: 1,
+    flexDirection: "row",
   },
-  sectionTitle: {
-    fontSize: 24,
-    paddingHorizontal: 24,
-    fontWeight: '600',
-    color: Colors.black,
-  },
-  sectionDescription: {
-    marginTop: 8,
-    fontSize: 18,
-    paddingHorizontal: 24,
-    fontWeight: '400',
-    color: Colors.dark,
-  }
 });
 
 export default App;

index.js

@@ -6,4 +6,8 @@ import {AppRegistry} from 'react-native';
 import App from './App';
 import {name as appName} from './app.json';
 
+import NotesMainPanel from './src/NotesMainPanel';
+import UserAccountPanel from './src/UserAccountPanel';
+import ApplicationSettingsPanel from './src/ApplicationSettingsPanel';
+
 AppRegistry.registerComponent(appName, () => App);

src/ApplicationSettingsPanel.js

@@ -0,0 +1,68 @@
+/**
+ * @format
+ * @flow strict-local
+ */
+import React from 'react';
+import {
+  AppRegistry,
+  StyleSheet,
+  Text,
+  TouchableHighlight,
+  View,
+} from 'react-native';
+
+
+class ApplicationSettingsPanel extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      shouldExpand: true
+    };
+  }
+
+  OnResizeButtonPressed = () => {
+    this.setState( (state) => ({ shouldExpand: state.shouldExpand ? false : true}));
+  };
+
+  render() {
+    return(
+      <View style={this.state.shouldExpand ? styles.panel : styles.panelShrinked}>
+        <TouchableHighlight onPress={this.OnResizeButtonPressed}>
+          <View style={styles.panelModeButton}>
+            <Text>Resize</Text>
+          </View>
+        </TouchableHighlight>
+        <View style={styles.panelContent}>
+          <Text>LeftOptionsPanel</Text>
+        </View>
+      </View>
+    );
+  }
+};
+
+
+const styles = StyleSheet.create({
+  panelModeButton: {
+    margin: 10,
+    backgroundColor: "grey",
+  },
+  panelContent: {
+    flex: 1,
+    flexDirection: "column",
+  },
+  panel: {
+    width: "20%",
+    borderWidth: 1,
+    borderColor: "black",
+  },
+  panelShrinked: {
+    width: 50,
+    borderWidth: 1,
+    borderColor: "black",
+  }
+});
+
+
+AppRegistry.registerComponent("ApplicationSettingsPanel", () => ApplicationSettingsPanel);
+
+export default ApplicationSettingsPanel;

src/NotesMainPanel.js

@@ -0,0 +1,33 @@
+/**
+ * @format
+ * @flow strict-local
+ */
+
+import React from 'react';
+import {
+  AppRegistry,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+
+
+class NotesMainPanel extends React.Component {
+
+  render() {
+    return(
+      <View>
+        <Text>NotesMainPanel</Text>
+      </View>
+    );
+  }
+};
+
+
+const styles = StyleSheet.create({
+});
+
+
+AppRegistry.registerComponent("NotesMainPanel", () => NotesMainPanel);
+
+export default NotesMainPanel;

src/UserAccountPanel.js

@@ -0,0 +1,46 @@
+/**
+ * @format
+ * @flow strict-local
+ */
+
+import React from 'react';
+import {
+  AppRegistry,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+
+
+class UserAccountPanel extends React.Component {
+
+  render() {
+    return(
+      <View style={styles.panel}>
+        <View style={styles.panelContent}>
+          <Text>UserAccountPanel</Text>
+          <Text>This panel will have all the features of User's account.</Text>
+          <Text><br/>Further implementation will yet be done!</Text>
+        </View>
+      </View>
+    );
+  }
+};
+
+
+const styles = StyleSheet.create({
+  panel: {
+    height: 75,
+    borderColor: "black",
+    borderWidth: 1,
+  },
+  panelContent: {
+    flex: 1,
+    flexDirection: "column",
+  }
+});
+
+
+AppRegistry.registerComponent("UserAccountPanel", () => UserAccountPanel);
+
+export default UserAccountPanel;

windows/ReactNativeNotes/ApplicationSettingsPage.cpp

@@ -0,0 +1,16 @@
+#include "pch.h"
+#include "ApplicationSettingsPage.h"
+#include "ApplicationSettingsPage.g.cpp"
+
+#include "App.h"
+
+
+namespace winrt::ReactNativeNotes::implementation
+{
+    ApplicationSettingsPage::ApplicationSettingsPage()
+    {
+        InitializeComponent();
+        auto app = Windows::UI::Xaml::Application::Current().as<App>();
+        ReactRootView().ReactNativeHost( app->Host() );
+    }
+}

windows/ReactNativeNotes/ApplicationSettingsPage.h

@@ -0,0 +1,19 @@
+#pragma once
+
+#include "ApplicationSettingsPage.g.h"
+
+namespace winrt::ReactNativeNotes::implementation
+{
+    class ApplicationSettingsPage : public ApplicationSettingsPageT<ApplicationSettingsPage>
+    {
+    public:
+        ApplicationSettingsPage();
+    };
+}
+
+namespace winrt::ReactNativeNotes::factory_implementation
+{
+    class ApplicationSettingsPage : public ApplicationSettingsPageT<ApplicationSettingsPage, implementation::ApplicationSettingsPage>
+    {
+    };
+}

windows/ReactNativeNotes/ApplicationSettingsPage.idl

@@ -0,0 +1,8 @@
+namespace ReactNativeNotes
+{
+    [default_interface]
+    runtimeclass ApplicationSettingsPage : Windows.UI.Xaml.Controls.Page
+    {
+        ApplicationSettingsPage();
+    }
+}

windows/ReactNativeNotes/ApplicationSettingsPage.xaml

@@ -0,0 +1,15 @@
+<Page
+    x:Class="ReactNativeNotes.ApplicationSettingsPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:ReactNativeNotes"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:react="using:Microsoft.ReactNative"
+    Background="Transparent"
+    mc:Ignorable="d">
+    <react:ReactRootView
+        x:Name="ReactRootView"
+        ComponentName="ApplicationSettingsPanel"
+        MinHeight="400"/>
+</Page>

windows/ReactNativeNotes/MainPage.cpp

@@ -15,6 +15,37 @@ namespace winrt::ReactNativeNotes::implementation
     {
         InitializeComponent();
         auto app = Application::Current().as<App>();
-        ReactRootView().ReactNativeHost(app->Host());
     }
-}
+
+    void MainPage::TopNavigationPanel_ItemInvoked( Windows::UI::Xaml::Controls::NavigationView const& sender, Windows::UI::Xaml::Controls::NavigationViewItemInvokedEventArgs const& args )
+    {
+        if( args.IsSettingsInvoked() == true )
+        {
+            Navigate( L"ApplicationSettingsPage" );
+        }
+        else if( args.InvokedItemContainer() != nullptr )
+        {
+            auto selectedPageTag = unbox_value_or<hstring>( args.InvokedItemContainer().Tag(), L"" );
+            Navigate( selectedPageTag );
+        }
+    }
+
+    void MainPage::TopNavigationPanel_BackRequested( Windows::UI::Xaml::Controls::NavigationView const& sender, Windows::UI::Xaml::Controls::NavigationViewBackRequestedEventArgs const& args )
+    {
+    }
+
+    void MainPage::Navigate( winrt::hstring pageName ) noexcept
+    {
+        auto pageToNavigateTo = Windows::UI::Xaml::Interop::TypeName
+        {
+            to_hstring( L"ReactNativeNotes." + pageName ),
+            Windows::UI::Xaml::Interop::TypeKind::Custom
+        };
+        auto navigationAnimation = Windows::UI::Xaml::Media::Animation::SlideNavigationTransitionInfo();
+        navigationAnimation.Effect( Windows::UI::Xaml::Media::Animation::SlideNavigationTransitionEffect::FromLeft );
+        ApplicationContentFrame().Navigate( pageToNavigateTo, nullptr, navigationAnimation );
+    }
+} 
+
+
+

windows/ReactNativeNotes/MainPage.h

@@ -1,18 +1,26 @@
 #pragma once
 #include "MainPage.g.h"
 #include <winrt/Microsoft.ReactNative.h>
+#include <string>
+
 
 namespace winrt::ReactNativeNotes::implementation
 {
-    struct MainPage : MainPageT<MainPage>
+    class MainPage : public MainPageT<MainPage>
     {
+    public:
         MainPage();
+        void TopNavigationPanel_ItemInvoked( Windows::UI::Xaml::Controls::NavigationView const& sender, Windows::UI::Xaml::Controls::NavigationViewItemInvokedEventArgs const& args );
+        void TopNavigationPanel_BackRequested( Windows::UI::Xaml::Controls::NavigationView const& sender, Windows::UI::Xaml::Controls::NavigationViewBackRequestedEventArgs const& args );
+
+    private:
+        void Navigate( winrt::hstring pageName ) noexcept;
     };
 }
 
 namespace winrt::ReactNativeNotes::factory_implementation
 {
-    struct MainPage : MainPageT<MainPage, implementation::MainPage>
+    class MainPage : public MainPageT<MainPage, implementation::MainPage>
     {
     };
 }

windows/ReactNativeNotes/MainPage.xaml

@@ -7,10 +7,13 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d"
-    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
-    <react:ReactRootView 
-        x:Name="ReactRootView"
-        ComponentName="ReactNativeNotes"
-        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
-        MinHeight="400"/>
+    Background="Transparent">
+    <NavigationView x:Name="TopNavigationPanel" PaneDisplayMode="Top" ItemInvoked="TopNavigationPanel_ItemInvoked" BackRequested="TopNavigationPanel_BackRequested">
+        <NavigationView.MenuItems>
+            <NavigationViewItem  Content="Account" Tag="UserAccountPage" />
+            <NavigationViewItem  Content="Settings" Tag="ApplicationSettingsPage" />
+            <NavigationViewItem  Content="Notes" Tag="NotesPage" />
+        </NavigationView.MenuItems>
+        <Frame x:Name="ApplicationContentFrame"/>
+    </NavigationView>
 </Page>