tabs created for mobile UI

.firebase/hosting.ZGlzdFx2ZW5kb3ItYXBw.cache

@@ -0,0 +1,16 @@
+3rdpartylicenses.txt,1575875297269,ed93c2cf4d21aee2e6c6e44e5c5efb8338cebe5df9f5ba231ee5080d0549da89
+index.html,1575875304492,8e1a0cce9da82fb2a8db514fbbc03495aba50b7e0d1a3c78c265a91b64d14a45
+favicon.ico,1575875297270,2c19690e9587bae12f419b34d2edeecc76808099540a9c9f4ea6194116cfc8f7
+polyfills-es2015.2987770fde9daa1d8a2e.js,1575875298490,895992c1cd19989779f0b2b1bb98380ccaaff7dca8ebb7ae938d32489e8327cd
+runtime-es2015.edb2fcf2778e7bf1d426.js,1575875298185,8351e28e6622d0d4825d766649b2ae0e8767c34304fff594f102bfe52b7e4e29
+runtime-es5.edb2fcf2778e7bf1d426.js,1575875298200,8351e28e6622d0d4825d766649b2ae0e8767c34304fff594f102bfe52b7e4e29
+assets/logo.svg,1575875297271,f3745450255ef3c784dbca1b7f50f2937e368ceaed68abc4c4ef331b7ef05b3d
+ionicons.96f1c901c087fb64019f.woff2,1575875297269,f56a51ffbe17ef863faa4066e49c70312eb30e7e85729362e5eee99a8859d1b0
+ionicons.99b863497156d4478ec3.woff,1575875297269,1e881984a27f846ad3d29c95ef0875cf86c15fc8987f172b3a7725f7bd8e0473
+ionicons.a558ac78b554eefa1817.eot,1575875297269,8b73b068a0da0055b0f8c2eb4db41a96b677929ef59daee56473cb32f6486b75
+polyfills-es5.ef4b1e1fc703b3ff76e3.js,1575875301294,4a1df964bb0af95fbfc2a22ff3bb07e5523ad002180bc2df9b6b3bdb7d9bc77b
+ionicons.ef4a9f280b0e411ddf6c.ttf,1575875297269,a8e923d106092391db9ad835d1413de698070a3189640b0da6a07a7c0645a242
+styles.c90cbf5b338c728e4ceb.css,1575875297270,efb1e50363c53dd41a110af245ef292742016a5f5780544acd58947072f05e01
+main-es2015.0fb2307ec0f9ce164576.js,1575875304457,fea70c5eedb73b0ec077e55274ae34002e540e3d104739aa6eb8825b07f2cb03
+main-es5.0fb2307ec0f9ce164576.js,1575875304469,8ab35a1d994dd5f404d586482c8839f91dda661c91dfdca048d2d8f23e20cc22
+ionicons.d659209138fc7c28c23a.svg,1575875297270,ce3fbc244f9bdd5f31f3ec444fd8309055a2d34d2fdce959a8215035e20f69fb

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "vendor-19"
+  }
+}

firebase.json

@@ -0,0 +1,16 @@
+{
+  "hosting": {
+    "public": "dist/vendor-app",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}

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

@@ -22,22 +22,22 @@
 
 		<ul>
 			<li [ngClass]="{'active' : selected_nav === 'dashboard'}" (click)="selected_nav = 'dashboard'">
-				<i class="icon ion-ios-home"></i> Dashboard
+				<i class="icon ion-ios-home"></i> <label> Dashboard </label>
 			</li>
 			<li [ngClass]="{'active' : selected_nav === 'orders'}" (click)="selected_nav = 'orders'">
-				<i class="icon ion-ios-cube"></i> Orders
+				<i class="icon ion-ios-cube"></i> <label> Orders </label>
 			</li>
 			<li [ngClass]="{'active' : selected_nav === 'items'}" (click)="selected_nav = 'items'">
-				<i class="icon ion-ios-clipboard"></i> Menu Items & Offers
+				<i class="icon ion-ios-clipboard"></i> <label> Menu Items & Offers </label>
 			</li>
 			<li [ngClass]="{'active' : selected_nav === 'schedule'}" (click)="selected_nav = 'schedule'">
-				<i class="icon ion-ios-calendar"></i> Shop Schedules
+				<i class="icon ion-ios-calendar"></i> <label> Shop Schedules </label>
 			</li>
 			<li [ngClass]="{'active' : selected_nav === 'profile'}" (click)="selected_nav = 'profile'">
-				<i class="icon ion-ios-person"></i> Profile
+				<i class="icon ion-ios-person"></i> <label> Profile </label>
 			</li>
 			<li [ngClass]="{'active' : selected_nav === 'settings'}" (click)="selected_nav = 'settings'">
-				<i class="icon ion-ios-cog"></i> Settings
+				<i class="icon ion-ios-cog"></i> <label> Settings </label>
 			</li>
 		</ul>
 	</section>

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

@@ -10,6 +10,10 @@
 	z-index: 1;
 	background-color: white;
 
+	@media screen and (max-width: 1023px) {
+		display: none;
+	}
+
 	img {
 		width: 70px;
 	}
@@ -61,6 +65,10 @@
 	align-items: stretch;
 	width: 100%;
 	background-color: #f5f6fa;
+
+	@media screen and (max-width: 1023px) {
+		flex-direction: column-reverse;
+	}
 }
 
 .side-navigation {
@@ -69,6 +77,15 @@
 	height: calc(100vh - 70px);
 	overflow: auto;
 
+	@media screen and (max-width: 1023px) {
+		width: 100%;
+		height: 70px;
+		box-shadow: 0px 0px 5px var(--grey);
+		position: fixed;
+		bottom: 0;
+		z-index: 1;
+	}
+
 	&:hover {
 		&::-webkit-scrollbar {
 		  display: block;
@@ -97,6 +114,10 @@
 		text-align: center;
 		line-height: 1.8;
 
+		@media screen and (max-width: 1023px) {
+			display: none;
+		}
+
 		img {
 			width: 70px;
 			height: 70px;
@@ -123,6 +144,13 @@
 		margin: 40px 0 40px auto;
 		list-style: none;
 
+		@media screen and (max-width: 1023px) {
+			display: flex;
+			margin: 0;
+			height: 100%;
+			align-items: center;
+		}
+
 		li {
 			font-size: 15px;
 			color: var(--grey);
@@ -131,6 +159,40 @@
 			cursor: pointer;
 			position: relative;
 
+			@media screen and (max-width: 1023px) {
+				width: calc(100% / 5);
+				text-align: center;
+				font-size: 10px;
+				padding: 0;
+			}
+
+			i {
+				font-size: 20px;
+				margin-right: 15px;
+
+				@media screen and (max-width: 1023px) {
+					display: block;
+					margin-right: 0;
+					font-size: 22px;
+				}
+			}
+
+			label {
+				@media screen and (max-width: 1023px) {
+					white-space: nowrap;
+					text-overflow: ellipsis;
+					overflow: hidden;
+					width: 80%;
+					text-align: center;
+					margin: 0 auto;
+					display: block;
+				}
+			}
+
+			&:nth-child(5) {
+				display: none;
+			}
+
 			&::before {
 				content: '';
 				position: absolute;
@@ -139,6 +201,10 @@
 				width: 80%;
 				height: 1px;
 				background-color: #efefef;
+
+				@media screen and (max-width: 1023px) {
+					display: none;
+				}
 			}
 
 			&::after {
@@ -149,6 +215,10 @@
 				background-color: transparent;
 				height: 100%;
 				top: 0;
+
+				@media screen and (max-width: 1023px) {
+					display: none;
+				}
 			}
 
 			&.active {
@@ -158,15 +228,14 @@
 					background-color: var(--brand-blue);
 				}
 			}
-
-			i {
-				font-size: 20px;
-				margin-right: 15px;
-			}
 		}
 	}
 }
 
 .widgets {
 	width: 80%;
+
+	@media screen and (max-width: 1023px) {
+		width: 100%;
+	}
 }