Skip to content
This repository was archived by the owner on Oct 7, 2024. It is now read-only.

Commit 0385031

Browse files
paulmojicatechpaulmojicatech
committed
add standalone for sidemenu
1 parent d23a98b commit 0385031

File tree

6 files changed

+333
-0
lines changed

6 files changed

+333
-0
lines changed

‎packages/ionic-angular/src/generators/application/files/sidemenu-standalone/src/app/app.component.spec.ts.template‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2+
import { TestBed } from '@angular/core/testing';
3+
4+
import { RouterTestingModule } from '@angular/router/testing';
5+
6+
import { AppComponent } from './app.component';
7+
8+
describe('AppComponent', () => {
9+
10+
11+
beforeEach(async () => {
12+
13+
await TestBed.configureTestingModule({
14+
declarations: [AppComponent],
15+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
16+
imports: [RouterTestingModule.withRoutes([])],
17+
}).compileComponents();
18+
});
19+
20+
it('should create the app', async () => {
21+
const fixture = TestBed.createComponent(AppComponent);
22+
const app = fixture.componentInstance;
23+
expect(app).toBeTruthy();
24+
});
25+
26+
it('should have menu labels', async () => {
27+
const fixture = TestBed.createComponent(AppComponent);
28+
fixture.detectChanges();
29+
const app = fixture.nativeElement;
30+
const menuItems = app.querySelectorAll('ion-label');
31+
expect(menuItems.length).toEqual(12);
32+
expect(menuItems[0].textContent).toContain('Inbox');
33+
expect(menuItems[1].textContent).toContain('Outbox');
34+
});
35+
36+
it('should have urls', async () => {
37+
const fixture = TestBed.createComponent(AppComponent);
38+
fixture.detectChanges();
39+
const app = fixture.nativeElement;
40+
const menuItems = app.querySelectorAll('ion-item');
41+
expect(menuItems.length).toEqual(12);
42+
expect(menuItems[0].getAttribute('ng-reflect-router-link')).toEqual('/folder/inbox');
43+
expect(menuItems[1].getAttribute('ng-reflect-router-link')).toEqual('/folder/outbox');
44+
});
45+
46+
});

‎packages/ionic-angular/src/generators/application/files/sidemenu-standalone/src/app/app.component.ts.template‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
import { Component } from '@angular/core';
2+
import {CommonModule} from '@angular/common';
3+
import {RouterModule} from '@angular/router';
4+
import {IonicModule} from '@ionic/angular';
5+
6+
@Component({
7+
selector: '<%= prefix %>-root',
8+
standalone: true,
9+
imports: [CommonModule, IonicModule, RouterModule],
10+
template: `
11+
<ion-app>
12+
<ion-split-pane contentId="main-content">
13+
<ion-menu contentId="main-content" type="overlay">
14+
<ion-content>
15+
<ion-list id="inbox-list">
16+
<ion-list-header>Inbox</ion-list-header>
17+
<ion-note>hi&#64;ionicframework.com</ion-note>
18+
19+
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
20+
<ion-item routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" routerLinkActive="selected">
21+
<ion-icon aria-hidden="true" slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
22+
<ion-label>{{ p.title }}</ion-label>
23+
</ion-item>
24+
</ion-menu-toggle>
25+
</ion-list>
26+
27+
<ion-list id="labels-list">
28+
<ion-list-header>Labels</ion-list-header>
29+
30+
<ion-item *ngFor="let label of labels" lines="none">
31+
<ion-icon aria-hidden="true" slot="start" ios="bookmark-outline" md="bookmark-sharp"></ion-icon>
32+
<ion-label>{{ label }}</ion-label>
33+
</ion-item>
34+
</ion-list>
35+
</ion-content>
36+
</ion-menu>
37+
<ion-router-outlet id="main-content"></ion-router-outlet>
38+
</ion-split-pane>
39+
</ion-app>
40+
`,
41+
styles: `
42+
ion-menu ion-content {
43+
--background: var(--ion-item-background, var(--ion-background-color, #fff));
44+
}
45+
46+
ion-menu.md ion-content {
47+
--padding-start: 8px;
48+
--padding-end: 8px;
49+
--padding-top: 20px;
50+
--padding-bottom: 20px;
51+
}
52+
53+
ion-menu.md ion-list {
54+
padding: 20px 0;
55+
}
56+
57+
ion-menu.md ion-note {
58+
margin-bottom: 30px;
59+
}
60+
61+
ion-menu.md ion-list-header,
62+
ion-menu.md ion-note {
63+
padding-left: 10px;
64+
}
65+
66+
ion-menu.md ion-list#inbox-list {
67+
border-bottom: 1px solid var(--ion-color-step-150, #d7d8da);
68+
}
69+
70+
ion-menu.md ion-list#inbox-list ion-list-header {
71+
font-size: 22px;
72+
font-weight: 600;
73+
74+
min-height: 20px;
75+
}
76+
77+
ion-menu.md ion-list#labels-list ion-list-header {
78+
font-size: 16px;
79+
80+
margin-bottom: 18px;
81+
82+
color: #757575;
83+
84+
min-height: 26px;
85+
}
86+
87+
ion-menu.md ion-item {
88+
--padding-start: 10px;
89+
--padding-end: 10px;
90+
border-radius: 4px;
91+
}
92+
93+
ion-menu.md ion-item.selected {
94+
--background: rgba(var(--ion-color-primary-rgb), 0.14);
95+
}
96+
97+
ion-menu.md ion-item.selected ion-icon {
98+
color: var(--ion-color-primary);
99+
}
100+
101+
ion-menu.md ion-item ion-icon {
102+
color: #616e7e;
103+
}
104+
105+
ion-menu.md ion-item ion-label {
106+
font-weight: 500;
107+
}
108+
109+
ion-menu.ios ion-content {
110+
--padding-bottom: 20px;
111+
}
112+
113+
ion-menu.ios ion-list {
114+
padding: 20px 0 0 0;
115+
}
116+
117+
ion-menu.ios ion-note {
118+
line-height: 24px;
119+
margin-bottom: 20px;
120+
}
121+
122+
ion-menu.ios ion-item {
123+
--padding-start: 16px;
124+
--padding-end: 16px;
125+
--min-height: 50px;
126+
}
127+
128+
ion-menu.ios ion-item.selected ion-icon {
129+
color: var(--ion-color-primary);
130+
}
131+
132+
ion-menu.ios ion-item ion-icon {
133+
font-size: 24px;
134+
color: #73849a;
135+
}
136+
137+
ion-menu.ios ion-list#labels-list ion-list-header {
138+
margin-bottom: 8px;
139+
}
140+
141+
ion-menu.ios ion-list-header,
142+
ion-menu.ios ion-note {
143+
padding-left: 16px;
144+
padding-right: 16px;
145+
}
146+
147+
ion-menu.ios ion-note {
148+
margin-bottom: 8px;
149+
}
150+
151+
ion-note {
152+
display: inline-block;
153+
font-size: 16px;
154+
155+
color: var(--ion-color-medium-shade);
156+
}
157+
158+
ion-item.selected {
159+
--color: var(--ion-color-primary);
160+
}
161+
`,
162+
})
163+
export class AppComponent {
164+
public appPages = [
165+
{ title: 'Inbox', url: '/folder/inbox', icon: 'mail' },
166+
{ title: 'Outbox', url: '/folder/outbox', icon: 'paper-plane' },
167+
{ title: 'Favorites', url: '/folder/favorites', icon: 'heart' },
168+
{ title: 'Archived', url: '/folder/archived', icon: 'archive' },
169+
{ title: 'Trash', url: '/folder/trash', icon: 'trash' },
170+
{ title: 'Spam', url: '/folder/spam', icon: 'warning' },
171+
];
172+
public labels = ['Family', 'Friends', 'Notes', 'Work', 'Travel', 'Reminders'];
173+
constructor() {}
174+
}

‎packages/ionic-angular/src/generators/application/files/sidemenu-standalone/src/app/app.config.ts.template‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { ApplicationConfig, importProvidersFrom } from '@angular/core';
2+
import { provideRouter } from '@angular/router';
3+
import { appRoutes } from './app.routes';
4+
import {IonicModule} from '@ionic/angular';
5+
6+
export const appConfig: ApplicationConfig = {
7+
providers: [
8+
provideRouter(appRoutes),
9+
importProvidersFrom(
10+
IonicModule.forRoot()
11+
)
12+
13+
],
14+
};

‎packages/ionic-angular/src/generators/application/files/sidemenu-standalone/src/app/app.routes.ts.template‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Routes } from '@angular/router';
2+
3+
export const appRoutes: Routes = [
4+
{
5+
path: '',
6+
redirectTo: 'folder/Inbox',
7+
pathMatch: 'full'
8+
},
9+
{
10+
path: 'folder/:id',
11+
loadChildren: () => import('./folder/folder.routes').then( r => r.routes)
12+
}
13+
];

‎packages/ionic-angular/src/generators/application/files/sidemenu-standalone/src/app/folder/folder.page.ts.template‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
2+
import { Component, OnInit } from '@angular/core';
3+
import { ActivatedRoute } from '@angular/router';
4+
import {CommonModule} from '@angular/common';
5+
import {IonicModule} from '@ionic/angular';
6+
7+
@Component({
8+
selector: '<%= prefix %>-folder',
9+
standalone: true,
10+
imports: [CommonModule, IonicModule],
11+
template: `
12+
<ion-header [translucent]="true">
13+
<ion-toolbar>
14+
<ion-buttons slot="start">
15+
<ion-menu-button></ion-menu-button>
16+
</ion-buttons>
17+
<ion-title>{{ folder }}</ion-title>
18+
</ion-toolbar>
19+
</ion-header>
20+
21+
<ion-content [fullscreen]="true">
22+
<ion-header collapse="condense">
23+
<ion-toolbar>
24+
<ion-title size="large">{{ folder }}</ion-title>
25+
</ion-toolbar>
26+
</ion-header>
27+
28+
<div id="container">
29+
<strong class="capitalize">{{ folder }}</strong>
30+
<p>Explore <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
31+
</div>
32+
</ion-content>
33+
`,
34+
styles: `
35+
ion-menu-button {
36+
color: var(--ion-color-primary);
37+
}
38+
39+
#container {
40+
text-align: center;
41+
position: absolute;
42+
left: 0;
43+
right: 0;
44+
top: 50%;
45+
transform: translateY(-50%);
46+
}
47+
48+
#container strong {
49+
font-size: 20px;
50+
line-height: 26px;
51+
}
52+
53+
#container p {
54+
font-size: 16px;
55+
line-height: 22px;
56+
color: #8c8c8c;
57+
margin: 0;
58+
}
59+
60+
#container a {
61+
text-decoration: none;
62+
}
63+
`
64+
})
65+
export class FolderPage implements OnInit {
66+
public folder!: string;
67+
68+
constructor(private activatedRoute: ActivatedRoute) { }
69+
70+
ngOnInit() {
71+
const id = this.activatedRoute.snapshot.paramMap.get('id');
72+
73+
if (id) {
74+
this.folder = id;
75+
}
76+
}
77+
78+
}

‎packages/ionic-angular/src/generators/application/files/sidemenu-standalone/src/app/folder/folder.routes.ts.template‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { Routes } from '@angular/router';
2+
3+
export const routes: Routes = [
4+
{
5+
path: '',
6+
loadComponent: () => import('./folder.page').then(p => p.FolderPage)
7+
}
8+
];

0 commit comments

Comments
 (0)