Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/andrewjbateman/ionic-angular-horiznav
:clipboard: Ionic tutorial app to switch from tabs to top nav as screen size increases
https://github.com/andrewjbateman/ionic-angular-horiznav
angular angular15 html ionic ionic-page ionic6 navigation navigation-drawer observables rxjs rxjs7 scss
Last synced: 6 days ago
JSON representation
:clipboard: Ionic tutorial app to switch from tabs to top nav as screen size increases
- Host: GitHub
- URL: https://github.com/andrewjbateman/ionic-angular-horiznav
- Owner: AndrewJBateman
- License: mit
- Created: 2020-01-29T19:04:05.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-02-03T05:13:13.000Z (almost 2 years ago)
- Last Synced: 2023-03-02T09:37:17.760Z (over 1 year ago)
- Topics: angular, angular15, html, ionic, ionic-page, ionic6, navigation, navigation-drawer, observables, rxjs, rxjs7, scss
- Language: TypeScript
- Homepage:
- Size: 1.67 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# :zap: Ionic Horizontal Navigation
* Ionic-Angular tutorial app to switch from tabs to top nav bar as screen size increases
* Tutorial code from [Simon Grimm at Devdactic](https://devdactic.com/) - see [:clap: Inspiration](#clap-inspiration) below
* **Note:** to open web links in a new window use: _ctrl+click on link_
## :page_facing_up: Table of contents
* [:zap: Ionic Horizontal Navigation](#zap-ionic-horizontal-navigation)
* [:page_facing_up: Table of contents](#page_facing_up-table-of-contents)
* [:books: General info](#books-general-info)
* [:camera: Screenshots](#camera-screenshots)
* [:signal_strength: Technologies](#signal_strength-technologies)
* [:floppy_disk: Setup](#floppy_disk-setup)
* [:computer: Code Examples](#computer-code-examples)
* [:cool: Features](#cool-features)
* [:clipboard: Status & To-do list](#clipboard-status--to-do-list)
* [:clap: Inspiration](#clap-inspiration)
* [:file_folder: License](#file_folder-license)
* [:envelope: Contact](#envelope-contact)
## :books: General info
* Uses a simple screensize service with a BehaviourSubject that is used in app.component and subscribed to in the tabs page. So when the screen size exceeds 568px then a boolean 'isDesktop' observable changes state. This is used in the tabs page to change the bottom tabs toolbar to a top nav bar using the Angular *ngIf="isDesktop'.
* Note: screen reloads when going from PC to phone size - due to an issue with the tabs routing.
## :camera: Screenshots
## :signal_strength: Technologies
* [Ionic v6](https://ionicframework.com/)
* [Angular v15](https://angular.io/)
* [Ionic/angular v6](https://www.npmjs.com/package/@ionic/angular) including [ion-nav-link](https://ionicframework.com/docs/api/nav-link)
## :floppy_disk: Setup
* `npm i` to install dependencies
* `ionic serve` to start the server on _localhost://8100_
## :computer: Code Examples
* service to change state of an observable when screen size hits a breakpoint of 568px.
```typescript
export class ScreensizeService {
private isDesktop = new BehaviorSubject(false);
constructor() { }
onResize(size: number) {
if (size < 568) {
this.isDesktop.next(false);
} else {
this.isDesktop.next(true);
}
}
isDesktopView(): Observable {
console.log('state of isDesktop boolean is:', this.isDesktop.value);
return this.isDesktop.asObservable().pipe(distinctUntilChanged());
}
}
```
## :cool: Features
* Uses the RxJS [distinctUntilChanged](https://www.learnrxjs.io/learn-rxjs/operators/filtering/distinctuntilchanged) to only emit an observable change of state when it is actually different.
## :clipboard: Status & To-do list
* Status: Working
* To-do: nothing. Could use this in other Ionic apps.
## :clap: Inspiration
* [Simon Grimm, Ionic Academy Tutorial: How to Create a Horizontal Navigation for Ionic Desktop Views](https://devdactic.com/horizontal-navigation-ionic-desktop/)
## :file_folder: License
* This project is licensed under the terms of the MIT license.
## :envelope: Contact
* Repo created by [ABateman](https://github.com/AndrewJBateman), email: [email protected]