documize/gui/app/styles/core/layout/master-internal.scss

// CSS GRID WITH FIXED SIDEBAR OUTSIDE GRID

// Mobile-first layout
.master-container {
	display: block;
	height: auto;
	width: 100%;

	.master-content {
		display: block;
		height: auto;
		width: 100%;
		padding: 10px;
	}
}
.master-sidebar-container {
	display: block;
	height: auto;
	width: 100%;
	z-index: 1041; // required if we want to show modals from inside sidebar

	.master-navbar {
		display: block;
		height: auto;
		width: 100%;
		background-color: $theme-500;
		text-align: center;
		padding: 0;
		z-index: 999;

		> .nav-content {
			display: flex;
			flex-grow: 1;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
			width: 100%;

			> .nav-options {
				> .selected {
					> .dicon, > .name {
						color: $color-white !important;
					}
				}

				> .option {
					cursor: pointer;
					display: inline-block;

					> .dicon {
						display: inline-block;
						color: $theme-300;
						font-size: 20px;
						padding: 10px;
					}

					> .name {
						display: none;
						color: $theme-300;
					}

					&:hover {
						> .dicon, > .name {
							color: $theme-400 !important;
						}
					}
				}
			}

			> .meta {
				> .logo {
					display: none;
					cursor: pointer;
				}

				> .bookmarks, > .login, > .invalid-plan {
					display: inline-block;

					>.dicon {
						cursor: pointer;
						color: $color-white;
						font-size: 20px;
						padding: 10px;
					}
				}

				> .invalid-plan {
					>.dicon {
						color: map-get($yellow-shades, 600) !important;
					}
				}

				> .user-gravatar-container {
					display: inline-block;
					margin: 0 10px 0 0;
					padding: 0;
					vertical-align: text-bottom;

					> .user-gravatar {
						cursor: pointer;
						position: relative;
						width: 25px;
						height: 25px;
						line-height: 24px;
						padding: 0;
						border-radius: 50%;
						font-size: 0.75rem;
						text-align: center;
						color: $theme-500;
						font-weight: bold;
						background-color: $color-white;
						@extend .no-select;
					}
				}
			}
		}
	}

	.master-sidebar {
		display: block;
		height: auto;
		width: 100%;
		padding: 5px 10px;
		z-index: 888;
		background-color: map-get($gray-shades, 100);
	}
}

// Tablet starts around 700px
@media (min-width: $display-break-1) {
	.master-container {
		display: grid;
		grid-template-columns: 240px auto;

		.master-content {
			grid-column-start: 2;
			padding: 20px;
		}
	}

	.master-sidebar-container {
		position: fixed;
		width: 240px;
		height: 100vh;

		.master-navbar {
			position: fixed;
			top: 0;
			left: 0;
			width: 40px;
			height: 100vh;
			text-align: center;
			padding: 10px 0;

			> .nav-content {
				display: flex;
				flex-grow: 1;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;
				height: 100vh;

				> .nav-options {
					> .option {
						>.dicon {
							display: block;
							font-size: 20px;
							padding: 20px 0;
						}
					}
				}

				> .meta {
					padding-bottom: 30px;

					> .logo  {
						display: block;

						> img {
							width: 32px;
							height: 32px;
						}

						> .documize {
							display: none;
						}
					}

					> .bookmarks, > .login, > .invalid-plan {
						display: block;

						>.dicon {
							color: $color-white;
							font-size: 20px;
							padding: 10px 0;
						}
					}

					> .user-gravatar-container {
						display: block;
						text-align: center;
						margin: 10px 0 15px 4px;
						padding: 0;

						> .user-gravatar {
							display: block;
						}
					}
				}
			}
		}

		.master-sidebar {
			position: fixed;
			top: 0;
			left: 40px;
			width: 200px;
			height: 100vh;
			overflow-x: hidden;
			overflow-y: auto;
		}
	}
}

// Small screen starts around 900px
@media (min-width: $display-break-2) {
	.master-container {
		display: grid;
		grid-template-columns: 290px auto;

		.master-content {
			grid-column-start: 2;
			padding: 20px;
		}
	}

	.master-sidebar-container {
		position: fixed;
		width: 290px;
		height: 100vh;

		.master-navbar {
			position: fixed;
			top: 0;
			left: 0;
			width: 70px;
			height: 100vh;
			text-align: center;

			> .nav-content {
				> .nav-options {
					> .option {
						> .dicon {
							display: block;
							font-size: 24px;
							padding: 15px 0 10px 0;
						}

						> .name {
							display: block;
							padding: 0 0 15px 0;
							font-size: 0.8rem;
							font-weight: 700;
							text-transform: uppercase;
						}
					}
				}

				> .meta {
					> .logo  {
						> img {
							width: 32px;
							height: 32px;
						}

						> .documize {
							display: block;
							font-size: 0.7rem;
							color: white;
							text-decoration: none;
						}
					}

					> .user-gravatar-container {
						margin: 10px 0 15px 8px;
						padding: 0;

						> .user-gravatar {
							width: 30px;
							height: 30px;
							line-height: 30px;
							font-size: 0.9rem;
						}
					}
				}
			}
		}

		.master-sidebar {
			position: fixed;
			top: 0;
			left: 70px;
			width: 220px;
			height: 100vh;
		}
	}
}

// Medium screen starts around 1200px
@media (min-width: $display-break-3) {
	.master-container {
		display: grid;
		grid-template-columns: 320px auto;

		.master-content {
			grid-column-start: 2;
			padding: 40px 30px;
		}
	}

	.master-sidebar-container {
		position: fixed;
		width: 320px;
		height: 100vh;

		.master-navbar {
			position: fixed;
			top: 0;
			left: 0;
			width: 70px;
			height: 100vh;
		}

		.master-sidebar {
			position: fixed;
			top: 0;
			left: 70px;
			width: 250px;
			height: 100vh;
			padding: 20px 10px;
		}
	}
}

// Large screen starts around 1600px
@media (min-width: $display-break-4) {
	.master-container {
		display: grid;
		grid-template-columns: 370px  minmax(auto, 1200px);

		.master-content {
			grid-column-start: 2;
			padding: 40px 40px;
		}
	}

	.master-sidebar-container {
		position: fixed;
		width: 370px;
		height: 100vh;

		.master-navbar {
			position: fixed;
			top: 0;
			left: 0;
			width: 70px;
			height: 100vh;
		}

		.master-sidebar {
			position: fixed;
			top: 0;
			left: 70px;
			width: 300px;
			height: 100vh;
			padding: 20px 15px;
		}
	}
}