Add app content list

core/css/apps.scss

@@ -906,3 +906,196 @@ kbd {
 
 	}
 }
+
+
+#app-content-wrapper {
+	display: flex;
+}
+.app-content-list {
+	width: 300px;
+	min-height: 100%;
+	overflow-x: hidden;
+	overflow-y: auto;
+	border-right: 1px solid nc-darken($color-main-background, 8%);
+	display: flex;
+	flex-direction: column;
+	transition: transform 250ms ease-in-out;
+
+	/* Icon fixes */
+	[class^='icon-'],
+	[class*=' icon-'] {
+		order: 4;
+		width: 24px;
+		height: 24px;
+		margin: -10px;
+		padding: 22px;
+		opacity: .3;
+		&:hover, &:focus {
+			opacity: .7;
+		}
+		&[class^='icon-star'],
+		&[class*=' icon-star'] {
+			opacity: .7;
+			&:hover, &:focus {
+				opacity: 1 ;
+			}
+
+		}
+		&.icon-starred {
+			opacity: 1 ;
+		}
+	}
+
+	/* Default item */
+	.app-content-list-item {
+		position: relative;
+		height: 68px;
+		border-top: 1px solid nc-darken($color-main-background, 8%);
+		cursor: pointer;
+		padding: 10px 7px;
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+
+		&:hover, &:focus,
+		&.active {
+			background-color: nc-darken($color-main-background, 6%);
+		}
+
+		.app-content-list-item-checkbox.checkbox + label,
+		.app-content-list-item-star {
+			position: absolute;
+			height: 40px;
+			width: 40px;
+			display: flex;
+			z-index: 50;
+			+ .app-content-list-item-icon {
+				opacity: .7;
+			}
+		}
+
+		.app-content-list-item-checkbox.checkbox + label {
+			top: 14px;
+			left: 7px;
+			&::before {
+				margin: 0;
+			}
+			/* Hide the star, priority to the checkbox */
+			~ .app-content-list-item-star {
+				display: none;
+			}
+		}
+
+		.app-content-list-item-star {
+			top: 10px;
+			left: 32px;
+			background-size: 16px;
+			height: 20px;
+			width: 20px;
+			margin: 0;
+			padding: 0;
+		}
+
+		.app-content-list-item-icon {
+			position: absolute;
+			display: inline-block;
+			height: 40px;
+			width: 40px;
+			line-height: 40px;
+			border-radius: 50%;
+			vertical-align: middle;
+			margin-right: 10px;
+			color: #fff;
+			text-align: center;
+			font-size: 1.5em;
+			text-transform: capitalize;
+			object-fit: cover;
+			user-select: none;
+		}
+
+		.app-content-list-item-line-one,
+		.app-content-list-item-line-two {
+			display: block;
+			padding-left: 50px;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			order: 1;
+			flex: 1 1 0;
+			padding-right: 10px;
+		}
+
+		.app-content-list-item-line-two {
+			opacity: .5;
+			order: 3;
+			flex: 1 0 calc(100% - 24px);
+		}
+
+		.app-content-list-item-details {
+			order: 2;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			max-width: 100px;
+			opacity: .5;
+			font-size: 80%;
+			user-select: none;
+		}
+	}
+}
+/* App content */
+.app-content-detail {
+	width: 70%;
+
+	#app-navigation-toggle-back {
+		display: none;
+	}
+}
+
+/* Mobile width < 768px */
+@media only screen and (max-width: 768px) {
+
+	/* full width for message list on mobile */
+	.app-content-list {
+		width: 100%;
+		background: $color-main-background;
+		position: relative;
+		z-index: 100;
+	}
+
+	/* overlay message detail on top of message list */
+	.app-content-detail {
+		background: $color-main-background;
+		width: 100%;
+		left: 0;
+		height: 100%;
+		top: 0;
+		box-shadow: 0 0 100px rgba(100, 100, 100, .9);
+		position: absolute;
+	}
+
+	/* Show app details page */
+	#app-content.showdetails {
+		#app-navigation-toggle {
+			transform: translateX(-44px);
+		}
+		#app-navigation-toggle-back {
+			position: fixed;
+			display: inline-block !important;
+			top: 45px;
+			left: 0;
+			width: 44px;
+			height: 44px;
+			z-index: 149;
+			background-color: rgba(255, 255, 255, .7);
+			cursor: pointer;
+			opacity: .6;
+			transform: rotate(90deg);
+		}
+		.app-content-list {
+			transform: translateX(-100%);
+		}
+	}
+
+	/* end of media query */
+}