More page mobile UI

src/app/app.module.ts

@@ -19,6 +19,8 @@ import { SupportComponent } from './support/support.component';
 
 // Plugin / Other packages
 import { DragToSelectModule } from 'ngx-drag-to-select';
+import { SettingsComponent } from './settings/settings.component';
+import { MoreComponent } from './more/more.component';
 
 @NgModule({
 	declarations: [
@@ -31,7 +33,9 @@ import { DragToSelectModule } from 'ngx-drag-to-select';
 		SchedulesComponent,
 		CustomSelectorComponent,
 		FaqComponent,
-		SupportComponent
+		SupportComponent,
+		SettingsComponent,
+		MoreComponent
 	],
 	imports: [
 		BrowserModule,

src/app/menu-items/menu-items.component.scss

@@ -346,8 +346,11 @@
 			}
 		}
 		.status {
-			align-self: center;
-			padding: 10px;
+			border-left: 1px solid #efefef;
+			border-top-left-radius: 10px;
+			border-bottom-left-radius: 10px;
+			align-self: stretch;
+			padding: 20px 10px 10px;
 			width: 100px;
 			text-align: center;
 			font-size: 12px;

src/app/more/more.component.html

@@ -0,0 +1,25 @@
+<section class="user-info">
+	<img>
+	<div class="name"> John Doe </div>
+	<div class="other-info"> Member ID: 03293 </div>
+	<div class="other-info"> Restaurant Rating: <i class="icon ion-ios-star"></i> 4.0 </div>
+</section>
+
+<ul class="nav-list">
+	<li>
+		<i class="icon ion-md-help-circle-outline"></i>
+		<label> FAQs </label>
+	</li>
+	<li>
+			<i class="icon ion-ios-chatbubbles"></i>
+		<label> Support </label>
+	</li>
+	<li>
+		<i class="icon ion-ios-cog"></i>
+		<label> Settings </label>
+	</li>
+	<li>
+		<i class="icon ion-md-log-out"></i>
+		<label> Logout </label>
+	</li>
+</ul>

src/app/more/more.component.scss

@@ -0,0 +1,55 @@
+.user-info {
+	text-align: center;
+	line-height: 1.8;
+	background-color: white;
+	box-shadow: 0px 0px 5px var(--grey);
+	padding: 30px 0;
+
+	img {
+		width: 70px;
+		height: 70px;
+		background-color: #efefef;
+		border-radius: 50%;
+		margin: 0 auto;
+		display: block;
+	}
+
+	.name {
+		font-size: 14px;
+		color: black;
+		font-weight: 500;
+		margin-top: 20px;
+	}
+
+	.other-info {
+		font-size: 12px;
+		color: var(--grey);
+	}
+}
+
+.nav-list {
+	width: 90%;
+	margin: 0 auto;
+	list-style: none;
+
+	li {
+		background-color: white;
+		padding: 15px;
+		margin: 20px auto;
+		border-radius: 10px;
+		display: flex;
+		align-items: center;
+
+		i {
+			color: var(--brand-blue);
+			font-size: 20px;
+			margin-right: 10px;
+		}
+
+		label {
+			color: var(--dark-grey);
+			font-size: 14px;
+			font-weight: 500;
+		}
+	}
+}

src/app/more/more.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MoreComponent } from './more.component';
+
+describe('MoreComponent', () => {
+  let component: MoreComponent;
+  let fixture: ComponentFixture<MoreComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MoreComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MoreComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/more/more.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-more',
+  templateUrl: './more.component.html',
+  styleUrls: ['./more.component.scss']
+})
+export class MoreComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/settings/settings.component.html

@@ -0,0 +1 @@
+<p>settings works!</p>

src/app/settings/settings.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SettingsComponent } from './settings.component';
+
+describe('SettingsComponent', () => {
+  let component: SettingsComponent;
+  let fixture: ComponentFixture<SettingsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SettingsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SettingsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/settings/settings.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-settings',
+  templateUrl: './settings.component.html',
+  styleUrls: ['./settings.component.scss']
+})
+export class SettingsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/widgets-holder/widgets-holder.component.html

@@ -39,7 +39,7 @@
 			<li [ngClass]="{'active' : selected_nav === 'settings'}" (click)="selected_nav = 'settings'">
 				<i class="icon ion-ios-cog"></i> <label> Settings </label>
 			</li>
-			<li [ngClass]="{'active' : selected_nav === 'settings'}" (click)="selected_nav = 'settings'">
+			<li [ngClass]="{'active' : selected_nav === 'more'}" (click)="selected_nav = 'more'">
 				<i class="icon ion-ios-more"></i> <label> More </label>
 			</li>
 		</ul>
@@ -52,5 +52,6 @@
 		<app-schedules *ngIf="selected_nav === 'schedule'"></app-schedules>
 		<app-faq *ngIf="selected_nav === 'faq'"></app-faq>
 		<app-support *ngIf="selected_nav === 'support'"></app-support>
+		<app-more *ngIf="selected_nav === 'more'"></app-more>
 	</section>
 </div>

src/app/widgets-holder/widgets-holder.component.ts

@@ -6,7 +6,7 @@ import { Component, OnInit } from '@angular/core';
 	styleUrls: ['./widgets-holder.component.scss']
 })
 export class WidgetsHolderComponent implements OnInit {
-	selected_nav: string = 'settings';
+	selected_nav: string = 'more';
 
 	constructor() { }