├── .gitignore ├── App_Resources ├── Android │ ├── AndroidManifest.xml │ ├── app.gradle │ ├── drawable-hdpi │ │ ├── ic_menu.png │ │ └── icon.png │ ├── drawable-ldpi │ │ └── icon.png │ ├── drawable-mdpi │ │ ├── ic_menu.png │ │ └── icon.png │ ├── drawable-nodpi │ │ └── splashscreen.9.png │ ├── drawable-xhdpi │ │ └── ic_menu.png │ ├── drawable-xxhdpi │ │ └── ic_menu.png │ └── drawable-xxxhdpi │ │ └── ic_menu.png └── iOS │ ├── Default-568h@2x.png │ ├── Default-667h@2x.png │ ├── Default-736h@3x.png │ ├── Default-Landscape-568h@2x.png │ ├── Default-Landscape-667h@2x.png │ ├── Default-Landscape.png │ ├── Default-Landscape@2x.png │ ├── Default-Landscape@3x.png │ ├── Default-Portrait.png │ ├── Default-Portrait@2x.png │ ├── Default.png │ ├── Default@2x.png │ ├── Icon-Small-50.png │ ├── Icon-Small-50@2x.png │ ├── Icon-Small.png │ ├── Icon-Small@2x.png │ ├── Info.plist │ ├── ic_menu.png │ ├── ic_menu@2x.png │ ├── ic_menu@3x.png │ ├── icon-40.png │ ├── icon-40@2x.png │ ├── icon-60.png │ ├── icon-60@2x.png │ ├── icon-72.png │ ├── icon-72@2x.png │ ├── icon-76.png │ ├── icon-76@2x.png │ ├── icon.png │ └── icon@2x.png ├── README.md ├── app.css ├── app.js ├── package.json ├── pages ├── about │ ├── about.js │ └── about.xml ├── home │ ├── home.js │ └── home.xml └── settings │ ├── settings.js │ └── settings.xml └── shared ├── BasePage.js └── widgets └── drawer-content.xml /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /App_Resources/Android/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 12 | 13 | 16 | 17 | 18 | 19 | 20 | 21 | 27 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /App_Resources/Android/app.gradle: -------------------------------------------------------------------------------- 1 | // Add your native dependencies here: 2 | 3 | // Uncomment to add recyclerview-v7 dependency 4 | //dependencies { 5 | // compile 'com.android.support:recyclerview-v7:+' 6 | //} -------------------------------------------------------------------------------- /App_Resources/Android/drawable-hdpi/ic_menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tjvantoll/nativescript-template-drawer/71a44770d5e97e899262cd49a9c191f2a9a66ee6/App_Resources/Android/drawable-hdpi/ic_menu.png -------------------------------------------------------------------------------- /App_Resources/Android/drawable-hdpi/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tjvantoll/nativescript-template-drawer/71a44770d5e97e899262cd49a9c191f2a9a66ee6/App_Resources/Android/drawable-hdpi/icon.png -------------------------------------------------------------------------------- /App_Resources/Android/drawable-ldpi/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tjvantoll/nativescript-template-drawer/71a44770d5e97e899262cd49a9c191f2a9a66ee6/App_Resources/Android/drawable-ldpi/icon.png -------------------------------------------------------------------------------- /App_Resources/Android/drawable-mdpi/ic_menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tjvantoll/nativescript-template-drawer/71a44770d5e97e899262cd49a9c191f2a9a66ee6/App_Resources/Android/drawable-mdpi/ic_menu.png -------------------------------------------------------------------------------- /App_Resources/Android/drawable-mdpi/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tjvantoll/nativescript-template-drawer/71a44770d5e97e899262cd49a9c191f2a9a66ee6/App_Resources/Android/drawable-mdpi/icon.png -------------------------------------------------------------------------------- /App_Resources/Android/drawable-nodpi/splashscreen.9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tjvantoll/nativescript-template-drawer/71a44770d5e97e899262cd49a9c191f2a9a66ee6/App_Resources/Android/drawable-nodpi/splashscreen.9.png -------------------------------------------------------------------------------- /App_Resources/Android/drawable-xhdpi/ic_menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tjvantoll/nativescript-template-drawer/71a44770d5e97e899262cd49a9c191f2a9a66ee6/App_Resources/Android/drawable-xhdpi/ic_menu.png -------------------------------------------------------------------------------- /App_Resources/Android/drawable-xxhdpi/ic_menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tjvantoll/nativescript-template-drawer/71a44770d5e97e899262cd49a9c191f2a9a66ee6/App_Resources/Android/drawable-xxhdpi/ic_menu.png -------------------------------------------------------------------------------- /App_Resources/Android/drawable-xxxhdpi/ic_menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tjvantoll/nativescript-template-drawer/71a44770d5e97e899262cd49a9c191f2a9a66ee6/App_Resources/Android/drawable-xxxhdpi/ic_menu.png -------------------------------------------------------------------------------- /App_Resources/iOS/Default-568h@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tjvantoll/nativescript-template-drawer/71a44770d5e97e899262cd49a9c191f2a9a66ee6/App_Resources/iOS/Default-568h@2x.png -------------------------------------------------------------------------------- /App_Resources/iOS/Default-667h@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tjvantoll/nativescript-template-drawer/71a44770d5e97e899262cd49a9c191f2a9a66ee6/App_Resources/iOS/Default-667h@2x.png -------------------------------------------------------------------------------- /App_Resources/iOS/Default-736h@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tjvantoll/nativescript-template-drawer/71a44770d5e97e899262cd49a9c191f2a9a66ee6/App_Resources/iOS/Default-736h@3x.png -------------------------------------------------------------------------------- /App_Resources/iOS/Default-Landscape-568h@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tjvantoll/nativescript-template-drawer/71a44770d5e97e899262cd49a9c191f2a9a66ee6/App_Resources/iOS/Default-Landscape-568h@2x.png -------------------------------------------------------------------------------- /App_Resources/iOS/Default-Landscape-667h@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tjvantoll/nativescript-template-drawer/71a44770d5e97e899262cd49a9c191f2a9a66ee6/App_Resources/iOS/Default-Landscape-667h@2x.png -------------------------------------------------------------------------------- /App_Resources/iOS/Default-Landscape.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tjvantoll/nativescript-template-drawer/71a44770d5e97e899262cd49a9c191f2a9a66ee6/App_Resources/iOS/Default-Landscape.png -------------------------------------------------------------------------------- /App_Resources/iOS/Default-Landscape@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tjvantoll/nativescript-template-drawer/71a44770d5e97e899262cd49a9c191f2a9a66ee6/App_Resources/iOS/Default-Landscape@2x.png -------------------------------------------------------------------------------- /App_Resources/iOS/Default-Landscape@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tjvantoll/nativescript-template-drawer/71a44770d5e97e899262cd49a9c191f2a9a66ee6/App_Resources/iOS/Default-Landscape@3x.png -------------------------------------------------------------------------------- /App_Resources/iOS/Default-Portrait.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tjvantoll/nativescript-template-drawer/71a44770d5e97e899262cd49a9c191f2a9a66ee6/App_Resources/iOS/Default-Portrait.png -------------------------------------------------------------------------------- /App_Resources/iOS/Default-Portrait@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tjvantoll/nativescript-template-drawer/71a44770d5e97e899262cd49a9c191f2a9a66ee6/App_Resources/iOS/Default-Portrait@2x.png -------------------------------------------------------------------------------- /App_Resources/iOS/Default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tjvantoll/nativescript-template-drawer/71a44770d5e97e899262cd49a9c191f2a9a66ee6/App_Resources/iOS/Default.png -------------------------------------------------------------------------------- /App_Resources/iOS/Default@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tjvantoll/nativescript-template-drawer/71a44770d5e97e899262cd49a9c191f2a9a66ee6/App_Resources/iOS/Default@2x.png -------------------------------------------------------------------------------- /App_Resources/iOS/Icon-Small-50.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tjvantoll/nativescript-template-drawer/71a44770d5e97e899262cd49a9c191f2a9a66ee6/App_Resources/iOS/Icon-Small-50.png -------------------------------------------------------------------------------- /App_Resources/iOS/Icon-Small-50@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tjvantoll/nativescript-template-drawer/71a44770d5e97e899262cd49a9c191f2a9a66ee6/App_Resources/iOS/Icon-Small-50@2x.png -------------------------------------------------------------------------------- /App_Resources/iOS/Icon-Small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tjvantoll/nativescript-template-drawer/71a44770d5e97e899262cd49a9c191f2a9a66ee6/App_Resources/iOS/Icon-Small.png -------------------------------------------------------------------------------- /App_Resources/iOS/Icon-Small@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tjvantoll/nativescript-template-drawer/71a44770d5e97e899262cd49a9c191f2a9a66ee6/App_Resources/iOS/Icon-Small@2x.png -------------------------------------------------------------------------------- /App_Resources/iOS/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | ${PRODUCT_NAME} 9 | CFBundleExecutable 10 | ${EXECUTABLE_NAME} 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | ${PRODUCT_NAME} 15 | CFBundlePackageType 16 | APPL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1.0 23 | LSRequiresIPhoneOS 24 | 25 | UILaunchStoryboardName 26 | LaunchScreen 27 | UIRequiredDeviceCapabilities 28 | 29 | armv7 30 | 31 | UISupportedInterfaceOrientations 32 | 33 | UIInterfaceOrientationPortrait 34 | UIInterfaceOrientationLandscapeLeft 35 | UIInterfaceOrientationLandscapeRight 36 | 37 | UISupportedInterfaceOrientations~ipad 38 | 39 | UIInterfaceOrientationPortrait 40 | UIInterfaceOrientationPortraitUpsideDown 41 | UIInterfaceOrientationLandscapeLeft 42 | UIInterfaceOrientationLandscapeRight 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /App_Resources/iOS/ic_menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tjvantoll/nativescript-template-drawer/71a44770d5e97e899262cd49a9c191f2a9a66ee6/App_Resources/iOS/ic_menu.png -------------------------------------------------------------------------------- /App_Resources/iOS/ic_menu@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tjvantoll/nativescript-template-drawer/71a44770d5e97e899262cd49a9c191f2a9a66ee6/App_Resources/iOS/ic_menu@2x.png -------------------------------------------------------------------------------- /App_Resources/iOS/ic_menu@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tjvantoll/nativescript-template-drawer/71a44770d5e97e899262cd49a9c191f2a9a66ee6/App_Resources/iOS/ic_menu@3x.png -------------------------------------------------------------------------------- /App_Resources/iOS/icon-40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tjvantoll/nativescript-template-drawer/71a44770d5e97e899262cd49a9c191f2a9a66ee6/App_Resources/iOS/icon-40.png -------------------------------------------------------------------------------- /App_Resources/iOS/icon-40@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tjvantoll/nativescript-template-drawer/71a44770d5e97e899262cd49a9c191f2a9a66ee6/App_Resources/iOS/icon-40@2x.png -------------------------------------------------------------------------------- /App_Resources/iOS/icon-60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tjvantoll/nativescript-template-drawer/71a44770d5e97e899262cd49a9c191f2a9a66ee6/App_Resources/iOS/icon-60.png -------------------------------------------------------------------------------- /App_Resources/iOS/icon-60@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tjvantoll/nativescript-template-drawer/71a44770d5e97e899262cd49a9c191f2a9a66ee6/App_Resources/iOS/icon-60@2x.png -------------------------------------------------------------------------------- /App_Resources/iOS/icon-72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tjvantoll/nativescript-template-drawer/71a44770d5e97e899262cd49a9c191f2a9a66ee6/App_Resources/iOS/icon-72.png -------------------------------------------------------------------------------- /App_Resources/iOS/icon-72@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tjvantoll/nativescript-template-drawer/71a44770d5e97e899262cd49a9c191f2a9a66ee6/App_Resources/iOS/icon-72@2x.png -------------------------------------------------------------------------------- /App_Resources/iOS/icon-76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tjvantoll/nativescript-template-drawer/71a44770d5e97e899262cd49a9c191f2a9a66ee6/App_Resources/iOS/icon-76.png -------------------------------------------------------------------------------- /App_Resources/iOS/icon-76@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tjvantoll/nativescript-template-drawer/71a44770d5e97e899262cd49a9c191f2a9a66ee6/App_Resources/iOS/icon-76@2x.png -------------------------------------------------------------------------------- /App_Resources/iOS/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tjvantoll/nativescript-template-drawer/71a44770d5e97e899262cd49a9c191f2a9a66ee6/App_Resources/iOS/icon.png -------------------------------------------------------------------------------- /App_Resources/iOS/icon@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tjvantoll/nativescript-template-drawer/71a44770d5e97e899262cd49a9c191f2a9a66ee6/App_Resources/iOS/icon@2x.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # NativeScript Drawer Template 2 | 3 | A quick-and-dirty template for starting a new [NativeScript](https://www.nativescript.org/) JavaScript app with drawer navigation pre-scaffolded. 4 | 5 | > **NOTE**: Want to use TypeScript instead? Check out [@ignaciofuentes’ TypeScript drawer template](https://github.com/ignaciofuentes/nativescript-template-drawer-ts). 6 | 7 | ## Usage 8 | 9 | `tns create my-project-name --template nativescript-template-drawer` 10 | 11 | ## Screenshots 12 | 13 | ![](http://i.imgur.com/i5Qm4Xh.png) 14 | ![](http://i.imgur.com/sneoZhC.png) 15 | 16 | --- 17 | 18 | ![](http://i.imgur.com/ktJtT0y.png) 19 | ![](http://i.imgur.com/6Kha8WY.png) 20 | -------------------------------------------------------------------------------- /app.css: -------------------------------------------------------------------------------- 1 | action-bar { 2 | background-color: #053140; 3 | color: white; 4 | } 5 | label { 6 | margin: 20; 7 | } 8 | .drawer-content { 9 | background-color: #053140; 10 | color: white; 11 | padding-top: 20; 12 | } 13 | .drawer-content label { 14 | font-size: 20; 15 | margin: 10 0 15 25; 16 | } 17 | .selected { 18 | color: #e4ba4e; 19 | } 20 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | var application = require("application"); 2 | application.start({ moduleName: "pages/home/home" }); 3 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nativescript-template-drawer", 3 | "main": "app.js", 4 | "version": "1.3.1", 5 | "author": "TJ VanToll ", 6 | "description": "A NativeScript starter template with drawer navigation", 7 | "license": "MIT", 8 | "repository": { 9 | "type": "git", 10 | "url": "git://github.com/tjvantoll/nativescript-template-drawer.git" 11 | }, 12 | "bugs": { 13 | "url": "https://github.com/tjvantoll/nativescript-template-drawer/issues" 14 | }, 15 | "homepage": "https://github.com/tjvantoll/nativescript-template-drawer", 16 | "dependencies": { 17 | "nativescript-statusbar": "^1.0.0", 18 | "nativescript-telerik-ui": "1.4.1", 19 | "tns-core-modules": "2.3.0" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /pages/about/about.js: -------------------------------------------------------------------------------- 1 | var BasePage = require("../../shared/BasePage"); 2 | 3 | var AboutPage = function() {}; 4 | AboutPage.prototype = new BasePage(); 5 | AboutPage.prototype.constructor = AboutPage; 6 | 7 | module.exports = new AboutPage(); 8 | -------------------------------------------------------------------------------- /pages/about/about.xml: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /pages/home/home.js: -------------------------------------------------------------------------------- 1 | var BasePage = require("../../shared/BasePage"); 2 | var topmost = require("ui/frame").topmost; 3 | 4 | var HomePage = function() {}; 5 | HomePage.prototype = new BasePage(); 6 | HomePage.prototype.constructor = HomePage; 7 | 8 | // Place any code you want to run when the home page loads here. 9 | HomePage.prototype.contentLoaded = function() {} 10 | 11 | HomePage.prototype.fun = function() { 12 | var page = topmost().currentPage; 13 | var logo = page.getViewById("logo"); 14 | logo.animate({ 15 | rotate: 3600, 16 | duration: 3000 17 | }).then(function() { 18 | logo.rotate = 0; 19 | }); 20 | } 21 | 22 | module.exports = new HomePage(); 23 | -------------------------------------------------------------------------------- /pages/home/home.xml: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /pages/settings/settings.js: -------------------------------------------------------------------------------- 1 | var BasePage = require("../../shared/BasePage"); 2 | var topmost = require("ui/frame").topmost; 3 | var Observable = require("data/observable").Observable; 4 | 5 | var SettingsPage = function() { 6 | this.viewModel.set("blackBackground", false); 7 | }; 8 | SettingsPage.prototype = new BasePage(); 9 | SettingsPage.prototype.constructor = SettingsPage; 10 | 11 | module.exports = new SettingsPage(); 12 | -------------------------------------------------------------------------------- /pages/settings/settings.xml: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /shared/BasePage.js: -------------------------------------------------------------------------------- 1 | var topmost = require("ui/frame").topmost; 2 | var Observable = require("data/observable").Observable; 3 | 4 | var appViewModel = new Observable(); 5 | appViewModel.selectedPage = "home"; 6 | 7 | function BasePage() {} 8 | BasePage.prototype.viewModel = appViewModel 9 | BasePage.prototype.pageLoaded = function(args) { 10 | var page = args.object; 11 | page.bindingContext = appViewModel; 12 | } 13 | BasePage.prototype.toggleDrawer = function() { 14 | var page = topmost().currentPage; 15 | page.getViewById("drawer").toggleDrawerState(); 16 | } 17 | BasePage.prototype.navigate = function(args) { 18 | var pageName = args.view.text.toLowerCase(); 19 | appViewModel.set("selectedPage", pageName); 20 | topmost().navigate("pages/" + pageName + "/" + pageName); 21 | } 22 | 23 | module.exports = BasePage; -------------------------------------------------------------------------------- /shared/widgets/drawer-content.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 7 | --------------------------------------------------------------------------------