angularjs-responsive-navbar
![npm version](https://badge.fury.io/js/angularjs-responsive-navbar.svg)
![angular JS responsive navbar screen shot](https://github.com/torch2424/angularjs-responsive-navbar/raw/HEAD/./docs/angularjsRespNav.gif)
Github Pages Demo.
NPM Module Link.
A responsive navbar for Angular 1.x. Requires Angular ui-router, and uses flexbox. Should be compatible with IE 10+, and all major browsers. Currently, the project has no tests. Though, the Github Pages Demo can be used for manual testing of the latest master.
Usage
Install to the project:
npm install --save angularjs-responsive-navbar
Add the following to the project:
index.html
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js" type="text/javascript">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js" type="text/javascript">
</script>
<script src="node_modules/angularjs-responsive-navbar/bin/angularJSNavbar.js" type="text/javascript">
</script>
<script src="./index.js" type="text/javascript">
</script>
<link rel="stylesheet" href="node_modules/angularjs-responsive-navbar/bin/angularJSNavbar.css" type="text/css">
<link rel="stylesheet" href="./index.css" type="text/css">
</head>
<body>
<angular-js-navbar></angular-js-navbar>
</body>
index.js (Or whever your angular app is bootstrapped)
const app = angular.module(, ['angularJSNavbar', 'ui.router' ]);
app.config($stateProvider => {
const homeState = {
name: 'home',
url: '/',
templateUrl: './README.html'
}
const testState = {
name: 'test',
url: '/test',
template: '<h3>I am the test route!</h3>'
}
$stateProvider.state(homeState);
$stateProvider.state(testState);
});
app.run((navbarRouteService) => {
navbarRouteService.setTitle('angular-js-navbar', {
title: 'Home',
state: 'home',
url: '/'
});
navbarRouteService.setRoutes([{
title: 'Home',
state: 'home',
url: '/'
},
{
title: 'Test',
state: 'test',
url: '/test'
}]);
});
Please see the docs/ folder to see how the project is utilized in a simple static project.
Services API
navbarRouteService:
Objects:
{route}
objects are defined as:
{
"title": "The string to be displayed on the navbar",
"state": "the ui-router state to link to",
"url": "the url to navigate to"
}
Methods:
setTitle('string', {route})
- Sets the displayed title on the navbar. Optional second argument will make the title link to the passed route object.
setRoutes([{route}])
- Sets the routes that are displayed in the navbar. Accepts an array of route objects.
getRoutes()
- Returns the currently set routes in the navbar
enableAlwaysMobile()
- Sets the navbar to always show the mobile layout
enableAlwaysDesktop
- Sets the navbar to always show the desktop layout
Contributing
Clone the project:
git clone https://github.com/torch2424/angularjs-responsive-navbar.git
Install devDependencies:
npm install
Host the project at localhost:8080, livereload, and watch for changes:
npm run start
Build the project with:
npm run build
LICENSE
MIT