Untitled

avatar
unknown
plain_text
2 years ago
2.9 kB
5
Indexable
<!DOCTYPE html>
<html lang="en">
	<%- include("components/head.ejs") %>

	<style>
		.navbar > div {
			padding: 1rem;
			border-radius: 1rem;
			height: 100vh;
		}

		.users {
			z-index: 1;
			flex-grow: 1;
			overflow-y: auto;
			max-height: 500px;
		}
	</style>
	<body data-bs-theme="dark">
		<div class="container-fluid" style="height: 100vh">
			<div class="row justify-content-evenly navbar p-0 h-100">
				<div class="col-3 bg-secondary-subtle border" id="chats">
					<div class="row mb-4">
						<div class="col">
							<img src="imgs/logo.png" width="40" alt="" />
						</div>
						<div class="col d-flex justify-content-end align-items-center">
							<div class="button-wrapper row justify-content-evenly">
								<div class="col-2">
									<button class="btn p-0">
										<i class="fa-solid fa-users"></i>
									</button>
								</div>
								<div class="col-2">
									<button class="btn p-0">
										<i class="fa-solid fa-circle-notch"></i>
									</button>
								</div>
								<div class="col-2">
									<button class="btn p-0">
										<i class="fa-solid fa-message"></i>
									</button>
								</div>
								<div class="col-2">
									<button class="btn p-0">
										<i class="fa-solid fa-bars"></i>
									</button>
								</div>
							</div>
						</div>
					</div>
					<div class="row rounded">
						<div class="col-12 mb-3">
							<div class="input-group">
								<div class="input-group-text">
									<i class="fa-solid fa-search"></i>
								</div>
								<input
									type="text"
									class="form-control"
									aria-label="Text input with checkbox"
									placeholder="Search your friends" />
							</div>
						</div>
						<div class="col-12 users">
							<% users.map((user) => { %>
							<!--  -->
							<%- include("components/userCard.ejs", { user }) %>
							<!--  -->
							<% }) %>
						</div>
					</div>
				</div>

				<!-- User Area -->
				<div class="col bg-secondary-subtle border">
					<div class="row pb-2 border-bottom">
						<div class="col d-flex">
							<div class="d-flex justify-content-center align-items-center">
								<img src="imgs/logo.png" width="40" alt="" />
							</div>
							<div class="mx-1">
								<h5 class="m-0 text-light">User</h5>
								<p class="m-0"><small class="text-warning"> online </small></p>
							</div>
						</div>
						<div class="col d-flex justify-content-end align-items-center">
							<div class="row justify-content-evenly">
								<div class="col-5">
									<i class="fa-solid fa-search"></i>
								</div>
								<div class="col-5">
									<i class="fa-solid fa-bars"></i>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
Editor is loading...