initial commit

.gitignore

@@ -0,0 +1,9 @@
+# JetBrains project files
+.idea
+
+# NPM
+node_modules
+
+# NativeScript application
+hooks
+platforms

.vscode/launch.json

@@ -0,0 +1,72 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Launch on iOS",
+            "type": "nativescript",
+            "request": "launch",
+            "platform": "ios",
+            "appRoot": "${workspaceRoot}",
+            "sourceMaps": true,
+            "watch": true
+        },
+        {
+            "name": "Test on iOS",
+            "type": "nativescript",
+            "request": "launch",
+            "platform": "ios",
+            "appRoot": "${workspaceRoot}",
+            "sourceMaps": true,
+            "watch": false,
+            "stopOnEntry": true,
+            "launchTests": true,
+            "tnsArgs": [
+                "--justlaunch"
+            ]
+        },
+        {
+            "name": "Attach on iOS",
+            "type": "nativescript",
+            "request": "attach",
+            "platform": "ios",
+            "appRoot": "${workspaceRoot}",
+            "sourceMaps": true,
+            "watch": false
+        },
+        {
+            "name": "Launch on Android",
+            "type": "nativescript",
+            "request": "launch",
+            "platform": "android",
+            "appRoot": "${workspaceRoot}",
+            "sourceMaps": true,
+            "watch": true
+        },
+        {
+            "name": "Test on Android",
+            "type": "nativescript",
+            "request": "launch",
+            "platform": "android",
+            "appRoot": "${workspaceRoot}",
+            "sourceMaps": true,
+            "watch": false,
+            "stopOnEntry": true,
+            "launchTests": true,
+            "tnsArgs": [
+                "--justlaunch"
+            ]
+        },
+        {
+            "name": "Attach on Android",
+            "type": "nativescript",
+            "request": "attach",
+            "platform": "android",
+            "appRoot": "${workspaceRoot}",
+            "sourceMaps": true,
+            "watch": false
+        }
+    ]
+}

README.md

@@ -0,0 +1,23 @@
+# NativeScript-Vue Application
+
+> A native application built with NativeScript-Vue
+
+## Usage
+
+``` bash
+# Install dependencies
+npm install
+
+# Preview on device
+tns preview
+
+# Build, watch for changes and run the application
+tns run
+
+# Build, watch for changes and debug the application
+tns debug <platform>
+
+# Build for production
+tns build <platform> --env.production
+
+```

app/App_Resources/Android/app.gradle

@@ -0,0 +1,20 @@
+// Add your native dependencies here:
+
+// Uncomment to add recyclerview-v7 dependency
+//dependencies {
+//	implementation 'com.android.support:recyclerview-v7:+'
+//}
+
+// If you want to add something to be applied before applying plugins' include.gradle files
+// e.g. project.ext.googlePlayServicesVersion = "15.0.1"
+// create a file named before-plugins.gradle in the current directory and place it there
+
+android {
+  defaultConfig {
+    minSdkVersion 17
+    generatedDensities = []
+  }
+  aaptOptions {
+    additionalParameters "--no-version-vectors"
+  }
+}

app/App_Resources/Android/src/main/AndroidManifest.xml

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+	package="__PACKAGE__"
+	android:versionCode="10000"
+	android:versionName="1.0">
+
+	<supports-screens
+		android:smallScreens="true"
+		android:normalScreens="true"
+		android:largeScreens="true"
+		android:xlargeScreens="true"/>
+
+	<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
+	<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
+	<uses-permission android:name="android.permission.INTERNET"/>
+
+	<application
+		android:usesCleartextTraffic="true"
+		android:name="com.tns.NativeScriptApplication"
+		android:allowBackup="true"
+		android:icon="@drawable/icon"
+		android:label="@string/app_name"
+		android:theme="@style/AppTheme">
+
+		<activity
+			android:name="com.tns.NativeScriptActivity"
+			android:label="@string/title_activity_kimera"
+			android:configChanges="keyboard|keyboardHidden|orientation|screenSize|smallestScreenSize|screenLayout|locale|uiMode"
+			android:theme="@style/LaunchScreenTheme">
+
+			<meta-data android:name="SET_THEME_ON_LAUNCH" android:resource="@style/AppTheme" />
+
+			<intent-filter>
+				<action android:name="android.intent.action.MAIN" />
+				<category android:name="android.intent.category.LAUNCHER" />
+			</intent-filter>
+		</activity>
+		<activity android:name="com.tns.ErrorReportActivity"/>
+	</application>
+</manifest>

app/App_Resources/Android/src/main/res/drawable-hdpi/logo.png

@@ -0,0 +1,64 @@
+f(found)
+{return badPos(Pos(found.line,found.ch-dist),bad)}
+else
+{dist+=after.textContent.length;}}
+for(var before=topNode.previousSibling,dist$1=offset;before;before=before.previousSibling){found=find(before,before.firstChild,-1);if(found)
+{return badPos(Pos(found.line,found.ch+dist$1),bad)}
+else
+{dist$1+=before.textContent.length;}}}
+var TextareaInput=function(cm){this.cm=cm;this.prevInput="";this.pollingFast=false;this.polling=new Delayed();this.hasSelection=false;this.composing=null;};TextareaInput.prototype.init=function(display){var this$1=this;var input=this,cm=this.cm;var div=this.wrapper=hiddenTextarea();var te=this.textarea=div.firstChild;display.wrapper.insertBefore(div,display.wrapper.firstChild);if(ios){te.style.width="0px";}
+on(te,"input",function(){if(ie&&ie_version>=9&&this$1.hasSelection){this$1.hasSelection=null;}
+input.poll();});on(te,"paste",function(e){if(signalDOMEvent(cm,e)||handlePaste(e,cm)){return}
+cm.state.pasteIncoming=true;input.fastPoll();});function prepareCopyCut(e){if(signalDOMEvent(cm,e)){return}
+if(cm.somethingSelected()){setLastCopied({lineWise:false,text:cm.getSelections()});}else if(!cm.options.lineWiseCopyCut){return}else{var ranges=copyableRanges(cm);setLastCopied({lineWise:true,text:ranges.text});if(e.type=="cut"){cm.setSelections(ranges.ranges,null,sel_dontScroll);}else{input.prevInput="";te.value=ranges.text.join("\n");selectInput(te);}}
+if(e.type=="cut"){cm.state.cutIncoming=true;}}
+on(te,"cut",prepareCopyCut);on(te,"copy",prepareCopyCut);on(display.scroller,"paste",function(e){if(eventInWidget(display,e)||signalDOMEvent(cm,e)){return}
+cm.state.pasteIncoming=true;input.focus();});on(display.lineSpace,"selectstart",function(e){if(!eventInWidget(display,e)){e_preventDefault(e);}});on(te,"compositionstart",function(){var start=cm.getCursor("from");if(input.composing){input.composing.range.clear();}
+input.composing={start:start,range:cm.markText(start,cm.getCursor("to"),{className:"CodeMirror-composing"})};});on(te,"compositionend",function(){if(input.composing){input.poll();input.composing.range.clear();input.composing=null;}});};TextareaInput.prototype.prepareSelection=function(){var cm=this.cm,display=cm.display,doc=cm.doc;var result=prepareSelection(cm);if(cm.options.moveInputWithCursor){var headPos=cursorCoords(cm,doc.sel.primary().head,"div");var wrapOff=display.wrapper.getBoundingClientRect(),lineOff=display.lineDiv.getBoundingClientRect();result.teTop=Math.max(0,Math.min(display.wrapper.clientHeight-10,headPos.top+lineOff.top-wrapOff.top));result.teLeft=Math.max(0,Math.min(display.wrapper.clientWidth-10,headPos.left+lineOff.left-wrapOff.left));}
+return result};TextareaInput.prototype.showSelection=function(drawn){var cm=this.cm,display=cm.display;removeChildrenAndAdd(display.cursorDiv,drawn.cursors);removeChildrenAndAdd(display.selectionDiv,drawn.selection);if(drawn.teTop!=null){this.wrapper.style.top=drawn.teTop+"px";this.wrapper.style.left=drawn.teLeft+"px";}};TextareaInput.prototype.reset=function(typing){if(this.contextMenuPending||this.composing){return}
+var cm=this.cm;if(cm.somethingSelected()){this.prevInput="";var content=cm.getSelection();this.textarea.value=content;if(cm.state.focused){selectInput(this.textarea);}
+if(ie&&ie_version>=9){this.hasSelection=content;}}else if(!typing){this.prevInput=this.textarea.value="";if(ie&&ie_version>=9){this.hasSelection=null;}}};TextareaInput.prototype.getField=function(){return this.textarea};TextareaInput.prototype.supportsTouch=function(){return false};TextareaInput.prototype.focus=function(){if(this.cm.options.readOnly!="nocursor"&&(!mobile||activeElt()!=this.textarea)){try{this.textarea.focus();}
+catch(e){}}};TextareaInput.prototype.blur=function(){this.textarea.blur();};TextareaInput.prototype.resetPosition=function(){this.wrapper.style.top=this.wrapper.style.left=0;};TextareaInput.prototype.receivedFocus=function(){this.slowPoll();};TextareaInput.prototype.slowPoll=function(){var this$1=this;if(this.pollingFast){return}
+this.polling.set(this.cm.options.pollInterval,function(){this$1.poll();if(this$1.cm.state.focused){this$1.slowPoll();}});};TextareaInput.prototype.fastPoll=function(){var missed=false,input=this;input.pollingFast=true;function p(){var changed=input.poll();if(!changed&&!missed){missed=true;input.polling.set(60,p);}
+else{input.pollingFast=false;input.slowPoll();}}
+input.polling.set(20,p);};TextareaInput.prototype.poll=function(){var this$1=this;var cm=this.cm,input=this.textarea,prevInput=this.prevInput;if(this.contextMenuPending||!cm.state.focused||(hasSelection(input)&&!prevInput&&!this.composing)||cm.isReadOnly()||cm.options.disableInput||cm.state.keySeq)
+{return false}
+var text=input.value;if(text==prevInput&&!cm.somethingSelected()){return false}
+if(ie&&ie_version>=9&&this.hasSelection===text||mac&&/[\uf700-\uf7ff]/.test(text)){cm.display.input.reset();return false}
+if(cm.doc.sel==cm.display.selForContextMenu){var first=text.charCodeAt(0);if(first==0x200b&&!prevInput){prevInput="\u200b";}
+if(first==0x21da){this.reset();return this.cm.execCommand("undo")}}
+var same=0,l=Math.min(prevInput.length,text.length);while(same<l&&prevInput.charCodeAt(same)==text.charCodeAt(same)){++same;}
+runInOp(cm,function(){applyTextInput(cm,text.slice(same),prevInput.length-same,null,this$1.composing?"*compose":null);if(text.length>1000||text.indexOf("\n")>-1){input.value=this$1.prevInput="";}
+else{this$1.prevInput=text;}
+if(this$1.composing){this$1.composing.range.clear();this$1.composing.range=cm.markText(this$1.composing.start,cm.getCursor("to"),{className:"CodeMirror-composing"});}});return true};TextareaInput.prototype.ensurePolled=function(){if(this.pollingFast&&this.poll()){this.pollingFast=false;}};TextareaInput.prototype.onKeyPress=function(){if(ie&&ie_version>=9){this.hasSelection=null;}
+this.fastPoll();};TextareaInput.prototype.onContextMenu=function(e){var input=this,cm=input.cm,display=cm.display,te=input.textarea;var pos=posFromMouse(cm,e),scrollPos=display.scroller.scrollTop;if(!pos||presto){return}
+var reset=cm.options.resetSelectionOnContextMenu;if(reset&&cm.doc.sel.contains(pos)==-1)
+{operation(cm,setSelection)(cm.doc,simpleSelection(pos),sel_dontScroll);}
+var oldCSS=te.style.cssText,oldWrapperCSS=input.wrapper.style.cssText;input.wrapper.style.cssText="position: absolute";var wrapperBox=input.wrapper.getBoundingClientRect();te.style.cssText="position: absolute; width: 30px; height: 30px;\n      top: "+(e.clientY-wrapperBox.top-5)+"px; left: "+(e.clientX-wrapperBox.left-5)+"px;\n      z-index: 1000; background: "+(ie?"rgba(255, 255, 255, .05)":"transparent")+";\n      outline: none; border-width: 0; outline: none; overflow: hidden; opacity: .05; filter: alpha(opacity=5);";var oldScrollY;if(webkit){oldScrollY=window.scrollY;}
+display.input.focus();if(webkit){window.scrollTo(null,oldScrollY);}
+display.input.reset();if(!cm.somethingSelected()){te.value=input.prevInput=" ";}
+input.contextMenuPending=true;display.selForContextMenu=cm.doc.sel;clearTimeout(display.detectingSelectAll);function prepareSelectAllHack(){if(te.selectionStart!=null){var selected=cm.somethingSelected();var extval="\u200b"+(selected?te.value:"");te.value="\u21da";te.value=extval;input.prevInput=selected?"":"\u200b";te.selectionStart=1;te.selectionEnd=extval.length;display.selForContextMenu=cm.doc.sel;}}
+function rehide(){input.contextMenuPending=false;input.wrapper.style.cssText=oldWrapperCSS;te.style.cssText=oldCSS;if(ie&&ie_version<9){display.scrollbars.setScrollTop(display.scroller.scrollTop=scrollPos);}
+if(te.selectionStart!=null){if(!ie||(ie&&ie_version<9)){prepareSelectAllHack();}
+var i=0,poll=function(){if(display.selForContextMenu==cm.doc.sel&&te.selectionStart==0&&te.selectionEnd>0&&input.prevInput=="\u200b"){operation(cm,selectAll)(cm);}else if(i++<10){display.detectingSelectAll=setTimeout(poll,500);}else{display.selForContextMenu=null;display.input.reset();}};display.detectingSelectAll=setTimeout(poll,200);}}
+if(ie&&ie_version>=9){prepareSelectAllHack();}
+if(captureRightClick){e_stop(e);var mouseup=function(){off(window,"mouseup",mouseup);setTimeout(rehide,20);};on(window,"mouseup",mouseup);}else{setTimeout(rehide,50);}};TextareaInput.prototype.readOnlyChanged=function(val){if(!val){this.reset();}
+this.textarea.disabled=val=="nocursor";};TextareaInput.prototype.setUneditable=function(){};TextareaInput.prototype.needsContentAttribute=false;function fromTextArea(textarea,options){options=options?copyObj(options):{};options.value=textarea.value;if(!options.tabindex&&textarea.tabIndex)
+{options.tabindex=textarea.tabIndex;}
+if(!options.placeholder&&textarea.placeholder)
+{options.placeholder=textarea.placeholder;}
+if(options.autofocus==null){var hasFocus=activeElt();options.autofocus=hasFocus==textarea||textarea.getAttribute("autofocus")!=null&&hasFocus==document.body;}
+function save(){textarea.value=cm.getValue();}
+var realSubmit;if(textarea.form){on(textarea.form,"submit",save);if(!options.leaveSubmitMethodAlone){var form=textarea.form;realSubmit=form.submit;try{var wrappedSubmit=form.submit=function(){save();form.submit=realSubmit;form.submit();form.submit=wrappedSubmit;};}catch(e){}}}
+options.finishInit=function(cm){cm.save=save;cm.getTextArea=function(){return textarea;};cm.toTextArea=function(){cm.toTextArea=isNaN;save();textarea.parentNode.removeChild(cm.getWrapperElement());textarea.style.display="";if(textarea.form){off(textarea.form,"submit",save);if(typeof textarea.form.submit=="function")
+{textarea.form.submit=realSubmit;}}};};textarea.style.display="none";var cm=CodeMirror$1(function(node){return textarea.parentNode.insertBefore(node,textarea.nextSibling);},options);return cm}
+function addLegacyProps(CodeMirror){CodeMirror.off=off;CodeMirror.on=on;CodeMirror.wheelEventPixels=wheelEventPixels;CodeMirror.Doc=Doc;CodeMirror.splitLines=splitLinesAuto;CodeMirror.countColumn=countColumn;CodeMirror.findColumn=findColumn;CodeMirror.isWordChar=isWordCharBasic;CodeMirror.Pass=Pass;CodeMirror.signal=signal;CodeMirror.Line=Line;CodeMirror.changeEnd=changeEnd;CodeMirror.scrollbarModel=scrollbarModel;CodeMirror.Pos=Pos;CodeMirror.cmpPos=cmp;CodeMirror.modes=modes;CodeMirror.mimeModes=mimeModes;CodeMirror.resolveMode=resolveMode;CodeMirror.getMode=getMode;CodeMirror.modeExtensions=modeExtensions;CodeMirror.extendMode=extendMode;CodeMirror.copyState=copyState;CodeMirror.startState=startState;CodeMirror.innerMode=innerMode;CodeMirror.commands=commands;CodeMirror.keyMap=keyMap;CodeMirror.keyName=keyName;CodeMirror.isModifierKey=isModifierKey;CodeMirror.lookupKey=lookupKey;CodeMirror.normalizeKeyMap=normalizeKeyMap;CodeMirror.StringStream=StringStream;CodeMirror.SharedTextMarker=SharedTextMarker;CodeMirror.TextMarker=TextMarker;CodeMirror.LineWidget=LineWidget;CodeMirror.e_preventDefault=e_preventDefault;CodeMirror.e_stopPropagation=e_stopPropagation;CodeMirror.e_stop=e_stop;CodeMirror.addClass=addClass;CodeMirror.contains=contains;CodeMirror.rmClass=rmClass;CodeMirror.keyNames=keyNames;}
+defineOptions(CodeMirror$1);addEditorMethods(CodeMirror$1);var dontDelegate="iter insert remove copy getEditor constructor".split(" ");for(var prop in Doc.prototype){if(Doc.prototype.hasOwnProperty(prop)&&indexOf(dontDelegate,prop)<0)
+{CodeMirror$1.prototype[prop]=(function(method){return function(){return method.apply(this.doc,arguments)}})(Doc.prototype[prop]);}}
+eventMixin(Doc);CodeMirror$1.inputStyles={"textarea":TextareaInput,"contenteditable":ContentEditableInput};CodeMirror$1.defineMode=function(name){if(!CodeMirror$1.defaults.mode&&name!="null"){CodeMirror$1.defaults.mode=name;}
+defineMode.apply(this,arguments);};CodeMirror$1.defineMIME=defineMIME;CodeMirror$1.defineMode("null",function(){return({token:function(stream){return stream.skipToEnd();}});});CodeMirror$1.defineMIME("text/plain","null");CodeMirror$1.defineExtension=function(name,func){CodeMirror$1.prototype[name]=func;};CodeMirror$1.defineDocExtension=function(name,func){Doc.prototype[name]=func;};CodeMirror$1.fromTextArea=fromTextArea;addLegacyProps(CodeMirror$1);CodeMirror$1.version="5.31.1";return CodeMirror$1;})));;(function(mod){if(typeof exports=="object"&&typeof module=="object")
+mod(require("../../lib/codemirror"));else if(typeof define=="function"&&define.amd)
+define(["../../lib/codemirror"],mod);else
+mod(CodeMirror);})(function(CodeMirror){"use strict";CodeMirror.multiplexingMode=function(outer){var others=Array.prototype.slice.call(arguments,1);function indexOf(string,pattern,from,returnEnd){if(typeof pattern=="string"){var found=string.indexOf(pattern,from);return returnEnd&&found>-1?found+pattern.length:found;}
+var m=pattern.exec(from?string.slice(from):string);return m?m.index+from+(returnEnd?m[0].length:0):-1;}
+return{startState:function(){return{outer:CodeMirror.startState(outer),innerActive:null,inner:null};},copyState:function(state){return{outer:CodeMirror.copyState(outer,state.outer),innerActive:state.innerActive,inner:state.innerActive&&CodeMirror.copyState(state.innerActive.mode,state.inner)};},token:functio

app/App_Resources/Android/src/main/res/drawable-nodpi/splash_screen.xml

@@ -0,0 +1,10 @@
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:gravity="fill">
+    <item>
+    <shape android:shape="rectangle">
+      <solid android:color="@android:color/white" />
+    </shape>
+    </item>
+    <item>
+        <bitmap android:gravity="center" android:src="@drawable/logo" />
+    </item>
+</layer-list>

app/App_Resources/Android/src/main/res/values-v21/colors.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+	<color name="ns_accent">#3d5afe</color>
+</resources>

app/App_Resources/Android/src/main/res/values-v21/strings.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <string name="app_name">EnRecipes</string>
+    <string name="title_activity_kimera">EnRecipes</string>
+</resources>

app/App_Resources/Android/src/main/res/values-v21/styles.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <!-- Application theme -->
+    <style name="AppTheme" parent="AppThemeBase">
+        <item name="android:datePickerStyle">@style/SpinnerDatePicker</item>
+        <item name="android:timePickerStyle">@style/SpinnerTimePicker</item>
+    </style>
+
+    <!-- Default style for DatePicker - in spinner mode -->
+    <style name="SpinnerDatePicker" parent="android:Widget.Material.Light.DatePicker">
+        <item name="android:datePickerMode">spinner</item>
+    </style>
+
+    <!-- Default style for TimePicker - in spinner mode -->
+    <style name="SpinnerTimePicker" parent="android:Widget.Material.Light.TimePicker">
+        <item name="android:timePickerMode">spinner</item>
+    </style>
+
+    <style name="NativeScriptToolbarStyle" parent="NativeScriptToolbarStyleBase">
+        <item name="android:elevation">4dp</item>
+    </style>
+</resources>

app/App_Resources/Android/src/main/res/values/colors.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="ns_primary">#F5F5F5</color>
+	<color name="ns_primaryDark">#757575</color>
+	<color name="ns_accent">#33B5E5</color>
+    <color name="ns_blue">#272734</color>
+</resources>

app/App_Resources/Android/src/main/res/values/strings.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <string name="app_name">NativeScript-Vue Application</string>
+    <string name="title_activity_kimera">NativeScript-Vue Application</string>
+</resources>

app/App_Resources/Android/src/main/res/values/styles.xml

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <!-- theme to use FOR launch screen-->
+    <style name="LaunchScreenThemeBase" parent="Theme.AppCompat.Light.NoActionBar">
+        <item name="toolbarStyle">@style/NativeScriptToolbarStyle</item>
+
+        <item name="colorPrimary">@color/ns_primary</item>
+        <item name="colorPrimaryDark">@color/ns_primaryDark</item>
+        <item name="colorAccent">@color/ns_accent</item>
+
+        <item name="android:windowBackground">@drawable/splash_screen</item>
+        
+        <item name="android:windowActionBarOverlay">true</item>  
+        <item name="android:windowTranslucentStatus">true</item>
+    </style>
+
+    <style name="LaunchScreenTheme" parent="LaunchScreenThemeBase">
+    </style>
+
+    <!-- theme to use AFTER launch screen is loaded-->
+    <style name="AppThemeBase" parent="Theme.AppCompat.Light.NoActionBar">
+        <item name="toolbarStyle">@style/NativeScriptToolbarStyle</item>
+
+        <item name="colorPrimary">@color/ns_primary</item>
+        <item name="colorPrimaryDark">@color/ns_primaryDark</item>
+        <item name="colorAccent">@color/ns_accent</item>
+    </style>
+
+    <style name="AppTheme" parent="AppThemeBase">
+    </style>
+
+    <!-- theme for action-bar -->
+    <style name="NativeScriptToolbarStyleBase" parent="Widget.AppCompat.Toolbar">
+        <item name="android:background">@color/ns_primary</item>
+        <item name="theme">@style/ThemeOverlay.AppCompat.ActionBar</item>
+        <item name="popupTheme">@style/ThemeOverlay.AppCompat</item>
+    </style>
+
+    <style name="NativeScriptToolbarStyle" parent="NativeScriptToolbarStyleBase">
+    </style>
+</resources>

app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/Contents.json

@@ -0,0 +1,122 @@
+{
+  "images" : [
+    {
+      "size" : "20x20",
+      "idiom" : "iphone",
+      "filename" : "icon-20@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "size" : "20x20",
+      "idiom" : "iphone",
+      "filename" : "icon-20@3x.png",
+      "scale" : "3x"
+    },
+    {
+      "size" : "29x29",
+      "idiom" : "iphone",
+      "filename" : "icon-29.png",
+      "scale" : "1x"
+    },
+    {
+      "size" : "29x29",
+      "idiom" : "iphone",
+      "filename" : "icon-29@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "size" : "29x29",
+      "idiom" : "iphone",
+      "filename" : "icon-29@3x.png",
+      "scale" : "3x"
+    },
+    {
+      "size" : "40x40",
+      "idiom" : "iphone",
+      "filename" : "icon-40@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "size" : "40x40",
+      "idiom" : "iphone",
+      "filename" : "icon-40@3x.png",
+      "scale" : "3x"
+    },
+    {
+      "size" : "60x60",
+      "idiom" : "iphone",
+      "filename" : "icon-60@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "size" : "60x60",
+      "idiom" : "iphone",
+      "filename" : "icon-60@3x.png",
+      "scale" : "3x"
+    },
+    {
+      "size" : "20x20",
+      "idiom" : "ipad",
+      "filename" : "icon-20.png",
+      "scale" : "1x"
+    },
+    {
+      "size" : "20x20",
+      "idiom" : "ipad",
+      "filename" : "icon-20@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "size" : "29x29",
+      "idiom" : "ipad",
+      "filename" : "icon-29.png",
+      "scale" : "1x"
+    },
+    {
+      "size" : "29x29",
+      "idiom" : "ipad",
+      "filename" : "icon-29@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "size" : "40x40",
+      "idiom" : "ipad",
+      "filename" : "icon-40.png",
+      "scale" : "1x"
+    },
+    {
+      "size" : "40x40",
+      "idiom" : "ipad",
+      "filename" : "icon-40@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "size" : "76x76",
+      "idiom" : "ipad",
+      "filename" : "icon-76.png",
+      "scale" : "1x"
+    },
+    {
+      "size" : "76x76",
+      "idiom" : "ipad",
+      "filename" : "icon-76@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "size" : "83.5x83.5",
+      "idiom" : "ipad",
+      "filename" : "icon-83.5@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "size" : "1024x1024",
+      "idiom" : "ios-marketing",
+      "filename" : "icon-1024.png",
+      "scale" : "1x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

app/App_Resources/iOS/Assets.xcassets/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Contents.json

@@ -0,0 +1,212 @@
+{
+  "images" : [
+    {
+      "extent" : "full-screen",
+      "idiom" : "iphone",
+      "subtype" : "2688h",
+      "filename" : "Default-Portrait-XS-Max.png",
+      "minimum-system-version" : "12.0",
+      "orientation" : "portrait",
+      "scale" : "3x"
+    },
+    {
+      "extent" : "full-screen",
+      "idiom" : "iphone",
+      "subtype" : "2688h",
+      "filename" : "Default-Landscape-XS-Max.png",
+      "minimum-system-version" : "12.0",
+      "orientation" : "landscape",
+      "scale" : "3x"
+    },
+    {
+      "extent" : "full-screen",
+      "idiom" : "iphone",
+      "subtype" : "1792h",
+      "filename" : "Default-Portrait-XR.png",
+      "minimum-system-version" : "12.0",
+      "orientation" : "portrait",
+      "scale" : "2x"
+    },
+    {
+      "extent" : "full-screen",
+      "idiom" : "iphone",
+      "subtype" : "1792h",
+      "filename" : "Default-Landscape-XR.png",
+      "minimum-system-version" : "12.0",
+      "orientation" : "landscape",
+      "scale" : "2x"
+    },
+    {
+      "extent" : "full-screen",
+      "idiom" : "iphone",
+      "subtype" : "2436h",
+      "filename" : "Default-1125h.png",
+      "minimum-system-version" : "11.0",
+      "orientation" : "portrait",
+      "scale" : "3x"
+    },
+    {
+      "extent" : "full-screen",
+      "idiom" : "iphone",
+      "subtype" : "2436h",
+      "filename" : "Default-Landscape-X.png",
+      "minimum-system-version" : "11.0",
+      "orientation" : "landscape",
+      "scale" : "3x"
+    },
+    {
+      "extent" : "full-screen",
+      "idiom" : "iphone",
+      "subtype" : "736h",
+      "filename" : "Default-736h@3x.png",
+      "minimum-system-version" : "8.0",
+      "orientation" : "portrait",
+      "scale" : "3x"
+    },
+    {
+      "extent" : "full-screen",
+      "idiom" : "iphone",
+      "subtype" : "736h",
+      "filename" : "Default-Landscape@3x.png",
+      "minimum-system-version" : "8.0",
+      "orientation" : "landscape",
+      "scale" : "3x"
+    },
+    {
+      "extent" : "full-screen",
+      "idiom" : "iphone",
+      "subtype" : "667h",
+      "filename" : "Default-667h@2x.png",
+      "minimum-system-version" : "8.0",
+      "orientation" : "portrait",
+      "scale" : "2x"
+    },
+    {
+      "orientation" : "portrait",
+      "idiom" : "iphone",
+      "filename" : "Default@2x.png",
+      "extent" : "full-screen",
+      "minimum-system-version" : "7.0",
+      "scale" : "2x"
+    },
+    {
+      "extent" : "full-screen",
+      "idiom" : "iphone",
+      "subtype" : "retina4",
+      "filename" : "Default-568h@2x.png",
+      "minimum-system-version" : "7.0",
+      "orientation" : "portrait",
+      "scale" : "2x"
+    },
+    {
+      "orientation" : "portrait",
+      "idiom" : "ipad",
+      "filename" : "Default-Portrait.png",
+      "extent" : "full-screen",
+      "minimum-system-version" : "7.0",
+      "scale" : "1x"
+    },
+    {
+      "orientation" : "landscape",
+      "idiom" : "ipad",
+      "filename" : "Default-Landscape.png",
+      "extent" : "full-screen",
+      "minimum-system-version" : "7.0",
+      "scale" : "1x"
+    },
+    {
+      "orientation" : "portrait",
+      "idiom" : "ipad",
+      "filename" : "Default-Portrait@2x.png",
+      "extent" : "full-screen",
+      "minimum-system-version" : "7.0",
+      "scale" : "2x"
+    },
+    {
+      "orientation" : "landscape",
+      "idiom" : "ipad",
+      "filename" : "Default-Landscape@2x.png",
+      "extent" : "full-screen",
+      "minimum-system-version" : "7.0",
+      "scale" : "2x"
+    },
+    {
+      "orientation" : "portrait",
+      "idiom" : "iphone",
+      "filename" : "Default.png",
+      "extent" : "full-screen",
+      "scale" : "1x"
+    },
+    {
+      "orientation" : "portrait",
+      "idiom" : "iphone",
+      "filename" : "Default@2x.png",
+      "extent" : "full-screen",
+      "scale" : "2x"
+    },
+    {
+      "orientation" : "portrait",
+      "idiom" : "iphone",
+      "filename" : "Default-568h@2x.png",
+      "extent" : "full-screen",
+      "subtype" : "retina4",
+      "scale" : "2x"
+    },
+    {
+      "orientation" : "portrait",
+      "idiom" : "ipad",
+      "extent" : "to-status-bar",
+      "scale" : "1x"
+    },
+    {
+      "orientation" : "portrait",
+      "idiom" : "ipad",
+      "filename" : "Default-Portrait.png",
+      "extent" : "full-screen",
+      "scale" : "1x"
+    },
+    {
+      "orientation" : "landscape",
+      "idiom" : "ipad",
+      "extent" : "to-status-bar",
+      "scale" : "1x"
+    },
+    {
+      "orientation" : "landscape",
+      "idiom" : "ipad",
+      "filename" : "Default-Landscape.png",
+      "extent" : "full-screen",
+      "scale" : "1x"
+    },
+    {
+      "orientation" : "portrait",
+      "idiom" : "ipad",
+      "extent" : "to-status-bar",
+      "scale" : "2x"
+    },
+    {
+      "orientation" : "portrait",
+      "idiom" : "ipad",
+      "filename" : "Default-Portrait@2x.png",
+      "extent" : "full-screen",
+      "scale" : "2x"
+    },
+    {
+      "orientation" : "landscape",
+      "idiom" : "ipad",
+      "extent" : "to-status-bar",
+      "scale" : "2x"
+    },
+    {
+      "orientation" : "landscape",
+      "idiom" : "ipad",
+      "filename" : "Default-Landscape@2x.png",
+      "extent" : "full-screen",
+      "scale" : "2x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

app/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "LaunchScreen-AspectFill.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "LaunchScreen-AspectFill@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "LaunchScreen-AspectFill@3x.png",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

app/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "LaunchScreen-Center.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "LaunchScreen-Center@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "LaunchScreen-Center@3x.png",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

app/App_Resources/iOS/Info.plist

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>CFBundleDevelopmentRegion</key>
+	<string>en</string>
+	<key>CFBundleDisplayName</key>
+	<string>${PRODUCT_NAME}</string>
+	<key>CFBundleExecutable</key>
+	<string>${EXECUTABLE_NAME}</string>
+	<key>CFBundleInfoDictionaryVersion</key>
+	<string>6.0</string>
+	<key>CFBundleName</key>
+	<string>${PRODUCT_NAME}</string>
+	<key>CFBundlePackageType</key>
+	<string>APPL</string>
+	<key>CFBundleShortVersionString</key>
+	<string>1.0</string>
+	<key>CFBundleSignature</key>
+	<string>????</string>
+	<key>CFBundleVersion</key>
+	<string>1.0</string>
+	<key>LSRequiresIPhoneOS</key>
+	<true/>
+	<key>UILaunchStoryboardName</key>
+	<string>LaunchScreen</string>
+	<key>UIRequiresFullScreen</key>
+	<true/>
+	<key>UIRequiredDeviceCapabilities</key>
+	<array>
+		<string>armv7</string>
+	</array>
+	<key>UISupportedInterfaceOrientations</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>UISupportedInterfaceOrientations~ipad</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationPortraitUpsideDown</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>UIStatusBarStyle</key>
+	<string>UIStatusBarStyleLightContent</string>
+	<key>UIViewControllerBasedStatusBarAppearance</key>
+	<false/>
+</dict>
+</plist>

app/App_Resources/iOS/LaunchScreen.storyboard

@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="13771" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
+    <device id="retina5_9" orientation="portrait">
+        <adaptation id="fullscreen"/>
+    </device>
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="13772"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <scenes>
+        <!--View Controller-->
+        <scene sceneID="EHf-IW-A2E">
+            <objects>
+                <viewController id="01J-lp-oVM" sceneMemberID="viewController">
+                    <layoutGuides>
+                        <viewControllerLayoutGuide type="top" id="Llm-lL-Icb"/>
+                        <viewControllerLayoutGuide type="bottom" id="xb3-aO-Qok"/>
+                    </layoutGuides>
+                    <view key="view" contentMode="scaleToFill" id="Ze5-6b-2t3">
+                        <rect key="frame" x="0.0" y="0.0" width="375" height="812"/>
+                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+                        <subviews>
+                            <imageView userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="LaunchScreen.AspectFill" translatesAutoresizingMaskIntoConstraints="NO" id="wtH-rr-YfP">
+                                <rect key="frame" x="0.0" y="0.0" width="375" height="812"/>
+                            </imageView>
+                            <imageView userInteractionEnabled="NO" contentMode="center" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="LaunchScreen.Center" translatesAutoresizingMaskIntoConstraints="NO" id="s1z-aa-wYv">
+                                <rect key="frame" x="0.0" y="150" width="375" height="512"/>
+                            </imageView>
+                        </subviews>
+                        <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                        <constraints>
+                            <constraint firstAttribute="trailing" secondItem="s1z-aa-wYv" secondAttribute="trailing" id="4Rf-kf-vql"/>
+                            <constraint firstAttribute="bottom" secondItem="wtH-rr-YfP" secondAttribute="bottom" id="5CS-At-4ka"/>
+                            <constraint firstItem="wtH-rr-YfP" firstAttribute="top" secondItem="Ze5-6b-2t3" secondAttribute="top" id="Awn-b8-xf1"/>
+                            <constraint firstItem="s1z-aa-wYv" firstAttribute="leading" secondItem="Ze5-6b-2t3" secondAttribute="leading" id="BpJ-vb-eKA"/>
+                            <constraint firstItem="s1z-aa-wYv" firstAttribute="trailing" secondItem="wtH-rr-YfP" secondAttribute="trailing" id="QIM-7J-OZz"/>
+                            <constraint firstAttribute="trailing" secondItem="wtH-rr-YfP" secondAttribute="trailing" id="RXg-rW-UK8"/>
+                            <constraint firstItem="s1z-aa-wYv" firstAttribute="centerY" secondItem="Ze5-6b-2t3" secondAttribute="centerY" id="Rcp-LG-48z"/>
+                            <constraint firstItem="wtH-rr-YfP" firstAttribute="leading" secondItem="Ze5-6b-2t3" secondAttribute="leading" id="cch-8E-tYu"/>
+                        </constraints>
+                    </view>
+                </viewController>
+                <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
+            </objects>
+            <point key="canvasLocation" x="509.60000000000002" y="237.93103448275863"/>
+        </scene>
+    </scenes>
+    <resources>
+        <image name="LaunchScreen.AspectFill" width="768" height="1024"/>
+        <image name="LaunchScreen.Center" width="384" height="512"/>
+    </resources>
+</document>

app/App_Resources/iOS/build.xcconfig

@@ -0,0 +1,7 @@
+// You can add custom settings here
+// for example you can uncomment the following line to force distribution code signing
+// CODE_SIGN_IDENTITY = iPhone Distribution 
+// To build for device with Xcode 8 you need to specify your development team. More info: https://developer.apple.com/library/prerelease/content/releasenotes/DeveloperTools/RN-Xcode/Introduction.html
+// DEVELOPMENT_TEAM = YOUR_TEAM_ID;
+ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
+ASSETCATALOG_COMPILER_LAUNCHIMAGE_NAME = LaunchImage;

app/app.scss

@@ -0,0 +1,22 @@
+// NativeScript core theme
+// @see https://docs.nativescript.org/ui/theme
+@import '~@nativescript/theme/core';
+
+// Override variables here
+
+// Global SCSS styling
+// @see https://docs.nativescript.org/ui/styling
+
+Page {
+	font-family: 'Orkney-Regular';
+}
+.orkm {
+	font-family: 'Orkney-Medium';
+}
+.orkb {
+	font-family: 'Orkney-Bold';
+}
+.bx {
+	font-family: 'boxicons';
+	font-size: 24;
+}

app/components/About.vue

@@ -0,0 +1,111 @@
+<template>
+  <StackLayout class="main-container">
+    <StackLayout orientation="horizontal" class="app-icon-container">
+      <Image src="res://icon" class="app-icon" stretch="fill" />
+      <Label
+        text="EnRecipes"
+        verticalAlignment="center"
+        class="app-name orkb"
+      />
+    </StackLayout>
+    <StackLayout orientation="horizontal" class="icon-option">
+      <Label verticalAlignment="center" class="bx" :text="icon.info" />
+      <StackLayout>
+        <Label text="Version" class="option-title" />
+        <Label text="1.0.0" class="option-info" textWrap="true" />
+      </StackLayout>
+    </StackLayout>
+    <StackLayout
+      orientation="horizontal"
+      class="icon-option"
+      @tap="openURL($event, 'https://github.com/vishnuraghavb/enrecipes')"
+    >
+      <Label class="bx" :text="icon.link" />
+      <Label text="View project on GitHub" class="option-title" />
+    </StackLayout>
+    <StackLayout orientation="horizontal" class="icon-option">
+      <Label class="bx" :text="icon.file" />
+      <Label text="Licenses" class="option-title" />
+    </StackLayout>
+
+    <StackLayout class="hr m-10"></StackLayout>
+
+    <Label text="Author" class="group-header" />
+    <StackLayout
+      orientation="horizontal"
+      class="icon-option"
+      @tap="openURL($event, 'https://www.vishnuraghav.com')"
+    >
+      <Label class="bx" :text="icon.user" />
+      <Label text="Vishnu Raghav" class="option-title" />
+    </StackLayout>
+    <StackLayout
+      orientation="horizontal"
+      class="icon-option"
+      @tap="openURL($event, 'https://github.com/vishnuraghavb')"
+    >
+      <Label class="bx" :text="icon.link" />
+      <Label text="Follow on GitHub" class="option-title" />
+    </StackLayout>
+    <StackLayout
+      orientation="horizontal"
+      class="icon-option"
+      @tap="openURL($event, 'https://mastodon.social/@vishnuraghavb')"
+    >
+      <Label class="bx" :text="icon.link" />
+      <Label text="Follow on Mastodon" class="option-title" />
+    </StackLayout>
+  </StackLayout>
+</template>
+
+<script>
+import * as utils from "tns-core-modules/utils/utils"
+export default {
+  props: ["highlight"],
+  data() {
+    return {
+      icon: {
+        info: "\ueda7",
+        link: "\ueb09",
+        file: "\ued60",
+        user: "\uee8e",
+      },
+    }
+  },
+  methods: {
+    openURL(args, url) {
+      this.highlight(args)
+      utils.openUrl(url)
+    },
+  },
+}
+</script>
+<style lang="scss">
+.app-icon-container {
+  .app-icon {
+    width: 56;
+    height: 56;
+    margin: 0 6 0 0;
+    padding: 0;
+  }
+  .app-name {
+    font-size: 24;
+  }
+}
+.icon-option {
+  padding: 16;
+  border-radius: 4;
+  background: white;
+  .bx {
+    color: #546e7a;
+    margin: 0 24 0 0;
+  }
+  .option-title {
+    color: #333333;
+    font-size: 16;
+  }
+  .option-info {
+    color: #546e7a;
+  }
+}
+</style>

app/components/App.vue

@@ -0,0 +1,468 @@
+<template>
+  <Page actionBarHidden="true">
+    <RadSideDrawer
+      ref="drawer"
+      allowEdgeSwipe="true"
+      drawerContentSize="300"
+      showOverNavigation="true"
+      gesturesEnabled="true"
+      drawerTransition="RevealTransition"
+    >
+      <GridLayout
+        rows="auto, auto, *, auto, auto"
+        columns="*"
+        ~drawerContent
+        backgroundColor="#ffffff"
+        padding="8"
+      >
+        <StackLayout row="0">
+          <StackLayout
+            @tap="navigateTo('EnRecipes', true, false)"
+            orientation="horizontal"
+            class="drawer-item orkm"
+            :class="{
+              'selected-drawer-item':
+                currentComponent == 'EnRecipes' &&
+                !filterFavorites &&
+                !selectedCategory,
+            }"
+          >
+            <Label class="bx" :text="icon.home" margin="0 24 0 0" />
+            <Label text="Home" />
+          </StackLayout>
+          <StackLayout
+            @tap="navigateTo('Favorites', true, false)"
+            orientation="horizontal"
+            class="drawer-item orkm"
+            :class="{ 'selected-drawer-item': filterFavorites }"
+          >
+            <Label class="bx" :text="icon.heart" margin="0 24 0 0" />
+            <Label text="Favorites" />
+          </StackLayout>
+        </StackLayout>
+        <StackLayout
+          orientation="horizontal"
+          row="1"
+          class="drawer-group-header orkr"
+        >
+          <Label text="Categories" />
+        </StackLayout>
+        <ScrollView row="2">
+          <StackLayout>
+            <StackLayout
+              @tap="navigateTo(item, false, true)"
+              v-for="(item, index) in categories"
+              :key="index"
+              orientation="horizontal"
+              class="drawer-item orkm"
+              :class="{ 'selected-drawer-item': selectedCategory == item }"
+            >
+              <Label class="bx" :text="icon.label" margin="0 24 0 0" />
+              <Label :text="item" />
+            </StackLayout>
+          </StackLayout>
+        </ScrollView>
+
+        <StackLayout row="3" class="hr m-10"></StackLayout>
+        <StackLayout row="4">
+          <StackLayout
+            @tap="navigateTo(item.title, false, false)"
+            v-for="(item, index) in bottommenu"
+            :key="index"
+            orientation="horizontal"
+            class="drawer-item orkm"
+            :class="{ 'selected-drawer-item': currentComponent == item.title }"
+          >
+            <Label class="bx" :text="item.icon" margin="0 24 0 0" />
+            <Label :text="item.title" />
+          </StackLayout>
+        </StackLayout>
+      </GridLayout>
+
+      <GridLayout ~mainContent rows="*" columns="*">
+        <Frame ref="page">
+          <Page>
+            <ActionBar margin="0" flat="true" row="0" col="0">
+              <GridLayout v-if="showSearch" rows="auto" columns="auto, *">
+                <Label
+                  color="#000000"
+                  class="bx"
+                  padding="16 16 16 8"
+                  margin="0"
+                  :text="icon.back"
+                  automationText="Back"
+                  col="0"
+                  @tap="closeSearch"
+                />
+                <SearchBar
+                  @loaded="searchBarLoaded()"
+                  id="searchField"
+                  col="1"
+                  hint="Search"
+                  textFieldHintColor="#555555"
+                  v-model="searchQuery"
+                />
+              </GridLayout>
+              <GridLayout
+                v-else
+                rows="auto"
+                columns="auto, *, auto, auto"
+                margin="0"
+                padding="0"
+              >
+                <Label
+                  color="#000000"
+                  class="bx"
+                  padding="16 16 16 8"
+                  margin="0"
+                  :text="icon.menu"
+                  automationText="Menu"
+                  @tap="$refs.drawer.nativeView.showDrawer()"
+                  col="0"
+                />
+                <Label
+                  color="#000000"
+                  class="title orkm"
+                  :text="title"
+                  col="1"
+                />
+                <Label
+                  v-if="!filterFavorites && currentComponent == 'EnRecipes'"
+                  color="#000000"
+                  class="bx"
+                  :text="icon.search"
+                  col="2"
+                  @tap="showSearch = true"
+                />
+                <Label
+                  v-if="currentComponent == 'EnRecipes'"
+                  color="#000000"
+                  class="bx"
+                  :text="icon.sort"
+                  @tap="sortTapped"
+                  col="3"
+                />
+              </GridLayout>
+            </ActionBar>
+            <GridLayout rows="*" columns="*">
+              <component
+                row="0"
+                col="0"
+                v-for="(component, index) in componentsArray"
+                v-show="component === currentComponent"
+                :key="index"
+                :is="component"
+                :recipes="recipes"
+                :selectedCategory="selectedCategory"
+                :searchQuery="searchQuery"
+                :filterFavorites="filterFavorites"
+              />
+            </GridLayout>
+          </Page>
+        </Frame>
+      </GridLayout>
+    </RadSideDrawer>
+  </Page>
+</template>
+
+<script>
+import * as utils from "tns-core-modules/utils/utils"
+import { isAndroid } from "tns-core-modules/platform"
+import * as application from "tns-core-modules/application"
+import { Label } from "tns-core-modules/ui/label"
+
+import { Menu } from "nativescript-menu"
+import { Popup } from "nativescript-popup"
+
+import EnRecipes from "./EnRecipes"
+import Settings from "./Settings"
+import About from "./About"
+
+let page
+export default {
+  components: {
+    EnRecipes,
+    Settings,
+    About,
+  },
+  data() {
+    return {
+      title: "EnRecipes",
+      currentComponent: "EnRecipes",
+      componentsArray: ["EnRecipes", "Settings", "About"],
+      selectedCategory: null,
+      filterFavorites: false,
+      searchQuery: "",
+      showSearch: false,
+      icon: {
+        menu: "\ueb2a",
+        home: "\ued99",
+        heart: "\ued94",
+        search: "\uebbc",
+        sort: "\ueb2b",
+        cog: "\ued05",
+        info: "\ueda7",
+        label: "\uedaf",
+        plus: "\ueb89",
+        close: "\uec4e",
+        back: "\ue988",
+      },
+      topmenu: [
+        {
+          title: "EnRecipes",
+          icon: "\ued99",
+        },
+        {
+          title: "Favorites",
+          icon: "\ued94",
+        },
+      ],
+      bottommenu: [
+        {
+          title: "Settings",
+          icon: "\ued05",
+        },
+        {
+          title: "About",
+          icon: "\ueda7",
+        },
+      ],
+      recipes: [
+        {
+          id: 1,
+          img: "",
+          category: "Salads",
+          title: "Mediterranean Salad",
+          time: "30m",
+          isFavorite: true,
+        },
+        {
+          id: 2,
+          img: "",
+          category: "Sauces",
+          title: "Fresh Tomato Sauce",
+          time: "45m",
+          isFavorite: false,
+        },
+        {
+          id: 3,
+          img: "",
+          category: "Lunch",
+          title: "Creamy Mushroom Herb Pasta Creamy Mushroom Herb Pasta",
+          time: "30m",
+          isFavorite: false,
+        },
+        {
+          id: 4,
+          img: "",
+          category: "Lunch",
+          title: "Grilled Cheese Sandwich",
+          time: "20m",
+          isFavorite: false,
+        },
+        {
+          id: 5,
+          img: "",
+          category: "Lunch",
+          title: "Creamy Mushroom Herb Pasta Creamy Mushroom Herb Pasta",
+          time: "30m",
+          isFavorite: false,
+        },
+        {
+          id: 6,
+          img: "",
+          category: "Lunch",
+          title: "Grilled Cheese Sandwich",
+          time: "20m",
+          isFavorite: false,
+        },
+      ],
+    }
+  },
+  computed: {
+    categories() {
+      let arr = this.recipes.map((e) => {
+        return e.category
+      })
+      return [...new Set(arr)]
+    },
+  },
+  methods: {
+    setSelectedCategory(e) {
+      this.selectedCategory = e.item
+      console.log(e)
+      this.closeDrawer()
+    },
+    // SearchBar
+    closeSearch() {
+      this.searchQuery = ""
+      this.showSearch = false
+      utils.ad.dismissSoftInput()
+    },
+    searchBarLoaded() {
+      application.android.on(
+        application.AndroidApplication.activityBackPressedEvent,
+        this.backEvent
+      )
+    },
+    removeBackEvent() {
+      application.android.off(
+        application.AndroidApplication.activityBackPressedEvent,
+        this.backEvent
+      )
+    },
+
+    // Sort
+    sortTapped(args) {
+      let anchor = args.object
+      const popup = new Popup({
+        backgroundColor: "white" | "#fff",
+        height: 100,
+        width: 100,
+        unit: "dp" | "px" | "%",
+        elevation: 10, // android only
+        borderRadius: 25, // android only
+      })
+      const View = new Label()
+      View.text = "Test"
+
+      popup.showPopup(anchor, View)
+    },
+
+    // Navigation
+    backEvent(args) {
+      if (this.showSearch) {
+        args.cancel = true
+        this.closeSearch()
+        this.removeBackEvent()
+      } else if (
+        this.currentComponent !== "EnRecipes" ||
+        this.filterFavorites
+      ) {
+        args.cancel = true
+        console.log("backEvent")
+        this.currentComponent = "EnRecipes"
+        this.filterFavorites = false
+        this.title = "EnRecipes"
+        this.removeBackEvent()
+      }
+    },
+    navigateBackToHome() {
+      application.android.on(
+        application.AndroidApplication.activityBackPressedEvent,
+        this.backEvent
+      )
+      console.log("navigateBackToHome")
+    },
+    navigateTo(to, filter, filterCategory) {
+      this.navigateBackToHome()
+      this.filterFavorites = false
+      this.selectedCategory = null
+      this.title = to
+      if (filter) {
+        this.currentComponent = "EnRecipes"
+        if (to === "Favorites") {
+          this.filterFavorites = true
+        }
+      } else if (filterCategory) {
+        this.currentComponent = "EnRecipes"
+        this.selectedCategory = to
+      } else {
+        this.currentComponent = to
+      }
+      this.closeDrawer()
+    },
+    closeDrawer() {
+      this.$refs.drawer.nativeView.toggleDrawerState()
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+ActionBar {
+  background: white;
+  color: #000000;
+  height: 64;
+  .bx {
+    background: white;
+    padding: 16;
+  }
+}
+SearchBar {
+  background: #fff;
+  color: #333333;
+  font-size: 16;
+  margin-top: 4;
+}
+.hr {
+  border-color: #eeeeee;
+}
+.title {
+  text-align: left;
+  padding-left: 8;
+  font-size: 20;
+}
+
+.message {
+  vertical-align: center;
+  text-align: center;
+  font-size: 20;
+  color: #333333;
+}
+
+.drawer-item {
+  border-radius: 4;
+  padding: 12 16;
+  color: #546e7a;
+  font-size: 16;
+}
+.drawer-group-header {
+  padding: 12;
+  color: #546e7a;
+  font-size: 12;
+}
+.selected-drawer-item {
+  background: #fbe9e7;
+  color: #ff7043;
+}
+.recipe-list-item {
+  background: white;
+  margin: 16 16 0;
+  border-radius: 4;
+  &:last-of-type {
+    margin-bottom: 16;
+  }
+  .recipeCategory {
+    font-size: 14;
+    padding: 0;
+    color: #ff7043;
+  }
+  .recipeTitle {
+    font-size: 16;
+    line-height: 4;
+    // height: 48;
+    // width: 128;
+  }
+  .recipeTime {
+    font-size: 12;
+    color: #546e7a;
+  }
+}
+#categoriesMenu {
+  max-height: 336;
+}
+#btnFabContainer {
+  width: 100%;
+  height: 100%;
+}
+#btnFab {
+  width: 56;
+  height: 56;
+  padding: 16;
+  background-color: #ff7043;
+  color: #000;
+  border-radius: 28;
+  text-align: center;
+}
+</style>

app/components/EnRecipes.vue

@@ -0,0 +1,83 @@
+<template>
+  <AbsoluteLayout>
+    <ScrollView scrollBarIndicatorVisible="false" width="100%" height="100%">
+      <StackLayout>
+        <GridLayout
+          v-for="recipe in filteredRecipes"
+          :key="recipe.id"
+          rows="128"
+          columns="128, *"
+          class="recipe-list-item"
+          androidElevation="2"
+        >
+          <Image src="res://icon" stretch="fill" col="0" />
+          <StackLayout
+            col="1"
+            horizontalAlignment="left"
+            verticalAlignment="top"
+            margin="16"
+          >
+            <Label :text="recipe.category" class="orkm recipeCategory" />
+            <Label :text="recipe.title" class="orkb recipeTitle" />
+            <Label :text="recipe.time" class="orkr recipeTime" />
+          </StackLayout>
+        </GridLayout>
+        <StackLayout height="128"></StackLayout>
+      </StackLayout>
+    </ScrollView>
+    <GridLayout id="btnFabContainer" rows="*,88" columns="*,88">
+      <Label
+        row="1"
+        col="1"
+        id="btnFab"
+        class="bx"
+        :text="icon.plus"
+        androidElevation="8"
+        @tap="FabTapped"
+      />
+    </GridLayout>
+  </AbsoluteLayout>
+</template>
+
+<script>
+export default {
+  props: ["searchQuery", "filterFavorites", "recipes", "selectedCategory"],
+
+  data() {
+    return {
+      icon: {
+        plus: "\ueb89",
+      },
+    }
+  },
+  computed: {
+    recipesByCategory() {
+      return this.recipes.reduce((acc, e) => {
+        acc[e.category] = [...(acc[e.category] || []), e]
+        return acc
+      }, {})
+    },
+    filteredRecipes() {
+      if (this.selectedCategory)
+        return this.recipesByCategory[this.selectedCategory]
+      else {
+        return this.recipes.filter((e) => {
+          if (this.filterFavorites) {
+            if (e.isFavorite) return e
+          } else {
+            if (e.title.toLowerCase().includes(this.searchQuery)) return e
+          }
+        })
+      }
+    },
+  },
+  methods: {
+    FabTapped() {
+      alert("fab tapped")
+    },
+  },
+  mounted() {
+    // console.log(this.recipesByCategory)
+  },
+}
+</script>

app/components/Favorites.vue

@@ -0,0 +1,12 @@
+<template>
+  <AbsoluteLayout>
+    <Label text="Favorites" textWrap="true" />
+  </AbsoluteLayout>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+</style>

app/components/Settings.vue

@@ -0,0 +1,153 @@
+<template>
+  <StackLayout class="main-container">
+    <Label text="Interface" class="group-header" />
+
+    <StackLayout orientation="horizontal" class="option" @tap="selectThemes">
+      <Label verticalAlignment="center" class="bx" :text="icon.theme" />
+      <StackLayout>
+        <Label text="Theme" class="option-title" />
+        <Label :text="themeName" class="option-info" textWrap="true" />
+      </StackLayout>
+    </StackLayout>
+
+    <StackLayout class="hr m-10"></StackLayout>
+
+    <Label text="Backup/Restore" class="group-header" />
+    <StackLayout orientation="horizontal" class="option" @tap="selectBackupDir">
+      <Label verticalAlignment="center" class="bx" :text="icon.folder" />
+      <StackLayout>
+        <Label text="EnRecipes Backup Directory" class="option-title" />
+        <Label text="/storage/emulated/0/EnRecipes" class="option-info" />
+      </StackLayout>
+    </StackLayout>
+    <StackLayout orientation="horizontal" class="option" @tap="backupData">
+      <Label class="bx" :text="icon.backup" />
+      <Label text="Backup Data" class="option-title" />
+    </StackLayout>
+    <StackLayout orientation="horizontal" class="option" @tap="restoreData">
+      <Label class="bx" :text="icon.restore" />
+      <Label text="Restore Data" class="option-title" />
+    </StackLayout>
+  </StackLayout>
+</template>
+
+<script>
+import { Menu } from "nativescript-menu"
+import * as permissions from "nativescript-permissions"
+export default {
+  data() {
+    return {
+      icon: {
+        theme: "\ued09",
+        folder: "\ued7c",
+        backup: "\uee48",
+        restore: "\ueadc",
+      },
+      options: {
+        interface: [
+          {
+            title: "Theme",
+            subTitle: "Light",
+            icon: "\ued09",
+          },
+        ],
+        backupRestore: [
+          {
+            title: "EnRecipes Backup Directory",
+            subTitle: "/storage/emulated/0/EnRecipes",
+            icon: "\ued7c",
+          },
+          {
+            title: "Backup Data",
+            subTitle: null,
+            icon: "\uee48",
+          },
+          {
+            title: "Restore Data",
+            subTitle: null,
+            icon: "\ueadc",
+          },
+        ],
+      },
+      themeName: "Light",
+      themesArray: ["Light", "Dark", "Black"],
+    }
+  },
+  methods: {
+    selectThemes(args) {
+      let btn = args.object
+      Menu.popup({
+        view: btn,
+        actions: this.themesArray,
+      })
+        .then((action) => {
+          if (this.themesArray.includes(action.title)) {
+            this.options.interface[0].subTitle = this.themeName = action.title
+          }
+          //   alert(action.id + " - " + action.title)
+        })
+        .catch(console.log)
+    },
+    selectBackupDir(args) {
+      let btn = args.object
+      permissions
+        .requestPermission(android.Manifest.permission.WRITE_EXTERNAL_STORAGE)
+        .then(() => {
+          alert("select backup directory")
+        })
+        .catch(() => {
+          console.log("Uh oh, no permissions - plan B time!")
+        })
+    },
+    backupData(args) {
+      let btn = args.object
+      permissions
+        .requestPermission(android.Manifest.permission.WRITE_EXTERNAL_STORAGE)
+        .then(() => {
+          alert("Backup successful!")
+        })
+        .catch(() => {
+          console.log("Uh oh, no permissions - plan B time!")
+        })
+    },
+    restoreData(args) {
+      let btn = args.object
+      permissions
+        .requestPermission(android.Manifest.permission.WRITE_EXTERNAL_STORAGE)
+        .then(() => {
+          alert("Restore successful!")
+        })
+        .catch(() => {
+          console.log("Uh oh, no permissions - plan B time!")
+        })
+    },
+  },
+}
+</script>
+<style lang="scss">
+.group-header {
+  padding: 12;
+  color: #ff7043;
+}
+.main-container {
+  padding: 16 8 0;
+  .option {
+    padding: 16;
+    border-radius: 4;
+    background: transparent;
+    font-size: 16;
+    .bx {
+      margin: 0 24 0 0;
+      color: #546e7a;
+    }
+    .option-title {
+      color: #333333;
+      background: transparent;
+    }
+    .option-info {
+      font-size: 12;
+      color: #546e7a;
+    }
+  }
+}
+</style>

app/main.js

@@ -0,0 +1,43 @@
+import Vue from "nativescript-vue"
+import App from "./components/App"
+
+Vue.registerElement(
+  "CheckBox",
+  () => require("@nstudio/nativescript-checkbox").CheckBox,
+  {
+    model: {
+      prop: "checked",
+      event: "checkedChange",
+    },
+  }
+)
+// import VueDevtools from 'nativescript-vue-devtools'
+
+// import { TNSFontIcon, fonticon } from 'nativescript-fonticon'
+
+// TNSFontIcon.debug = true
+// TNSFontIcon.paths = {
+// 	// bx: './assets/boxicons.css',
+// 	fa: './assets/fontawesome.css',
+// }
+// TNSFontIcon.loadCss()
+
+// Vue.filter('fonticon', fonticon)
+
+if (TNS_ENV !== "production") {
+  // Vue.use(VueDevtools)
+}
+import store from "./store"
+
+// Prints Vue logs when --env.production is *NOT* set while building
+Vue.config.silent = TNS_ENV === "production"
+
+Vue.registerElement(
+  "RadSideDrawer",
+  () => require("nativescript-ui-sidedrawer").RadSideDrawer
+)
+
+new Vue({
+  store,
+  render: (h) => h("frame", [h(App)]),
+}).$start()

app/package.json

@@ -0,0 +1,9 @@
+{
+  "android": {
+    "v8Flags": "--expose_gc",
+    "markingMode": "none"
+  },
+  "main": "main",
+  "name": "ns",
+  "version": "1.0.0"
+}

app/store.js

@@ -0,0 +1,16 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  state: {
+
+  },
+  mutations: {
+
+  },
+  actions: {
+
+  }
+});

babel.config.js

@@ -0,0 +1,7 @@
+module.exports = function (api) {
+  api.cache(true)
+
+  return {
+    presets: [['@babel/env', { targets: { esmodules: true } }]],
+  }
+}

package.json

@@ -0,0 +1,41 @@
+{
+  "name": "ns",
+  "version": "1.0.0",
+  "description": "A native application built with NativeScript-Vue",
+  "author": "Vishnu Raghav B <design@vishnuraghav.com>",
+  "license": "GPL",
+  "nativescript": {
+    "id": "com.vishnuraghav.enrecipes",
+    "templateVersion": "v2",
+    "tns-android": {
+      "version": "6.5.0"
+    },
+    "tns-ios": {
+      "version": "6.5.0"
+    }
+  },
+  "dependencies": {
+    "@nativescript/theme": "^2.2.1",
+    "@nstudio/nativescript-checkbox": "^1.0.0",
+    "nativescript-fonticon": "^2.0.2",
+    "nativescript-material-icons": "^1.0.3",
+    "nativescript-menu": "^1.1.6",
+    "nativescript-permissions": "^1.3.9",
+    "nativescript-popup": "^1.5.0",
+    "nativescript-ui-sidedrawer": "^8.0.1",
+    "nativescript-vue": "^2.6.1",
+    "tns-core-modules": "^6.5.1",
+    "vuex": "^3.3.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@types/node": "^14.0.27",
+    "babel-loader": "^8.1.0",
+    "nativescript-dev-webpack": "^1.5.1",
+    "nativescript-vue-template-compiler": "^2.6.0",
+    "nativescript-worker-loader": "~0.11.0",
+    "node-sass": "^4.13.1",
+    "vue-loader": "^15.9.1"
+  }
+}

tsconfig.json

@@ -0,0 +1,39 @@
+{
+  "compilerOptions": {
+    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
+    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+    "lib": [
+      "dom", "es2015"
+    ],                             /* Specify library files to be included in the compilation. */
+    "sourceMap": true,                     /* Generates corresponding '.map' file. */
+    "noEmitHelpers": true,
+    "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
+    "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+    "baseUrl": ".",                       /* Base directory to resolve non-absolute module names. */
+    "paths": {
+      "@/*": [
+        "app/*"
+      ]
+     },                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    "typeRoots": [
+      "types"
+    ],                       /* List of folders to include type definitions from. */
+    "types": [
+      "node"
+    ],                           /* Type declaration files to be included in compilation. */
+    "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+    "esModuleInterop": true,                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+    "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
+    "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+
+    "skipLibCheck": true
+  },
+  "include": [
+    "app",
+    "types"
+  ],
+  "exclude": [
+    "node_modules",
+    "platforms"
+  ]
+}

types/env.d.ts

@@ -0,0 +1 @@
+declare var TNS_ENV: string;