<div class="navigation">
	<ul>
		<li class="list active">
			<b></b>
			<b></b>
			<a href="#">
				<span class="icon">
					<ion-icon name="home-outline"></ion-icon>
				</span>
				<span class="title">Home</span>
			</a>
		</li>
		<li class="list">
			<b></b>
			<b></b>
			<a href="#">
				<span class="icon">
					<ion-icon name="person-outline"></ion-icon>
				</span>
				<span class="title">Profile</span>
			</a>
		</li>
		<li class="list">
			<b></b>
			<b></b>
			<a href="#">
				<span class="icon">
					<ion-icon name="chatbubbles-outline"></ion-icon>
				</span>
				<span class="title">Messages</span>
			</a>
		</li>
		<li class="list">
			<b></b>
			<b></b>
			<a href="#">
				<span class="icon">
					<ion-icon name="settings-outline"></ion-icon>
				</span>
				<span class="title">Settings</span>
			</a>
		</li>
		<li class="list">
			<b></b>
			<b></b>
			<a href="#">
				<span class="icon">
					<ion-icon name="help-outline"></ion-icon>
				</span>
				<span class="title">Help</span>
			</a>
		</li>
		<li class="list">
			<b></b>
			<b></b>
			<a href="#">
				<span class="icon">
					<ion-icon name="lock-closed-outline"></ion-icon>
				</span>
				<span class="title">Password</span>
			</a>
		</li>
		<li class="list">
			<b></b>
			<b></b>
			<a href="#">
				<span class="icon">
					<ion-icon name="exit-outline"></ion-icon>
				</span>
				<span class="title">Sign Out</span>
			</a>
		</li>
	</ul>
</div>
<div class="menu-toggle">
	<ion-icon name="menu-outline" class="open"></ion-icon>
	<ion-icon name="close-outline" class="close"></ion-icon>
</div>
* {
	border: 0;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	user-select: none;
}

body {
	min-height: 100vh;
}

a {
	text-decoration: none;
}

li {
	list-style: none;
}

.navigation {
	position: fixed;
	top: 20px;
	left: 20px;
	bottom: 30px;
	width: 75px;
	background-color: #0000ee;
	border-left: 5px solid #0000ee;
	border-radius: 10px;
	overflow: hidden;

	&.active {
		width: 300px;
	}
	ul {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding-left: 5px;
		padding-top: 30px;
		.list {
			position: relative;
			width: 100%;
			// padding-left: 10px;
			border-top-left-radius: 10px;
			border-bottom-left-radius: 10px;
			margin: 10px 0;
			b {
				display: none;
			}
			a {
				color: #fff;
				width: 100%;
				display: flex;
				align-items: center;
				padding-top: 10px;
				padding-bottom: 10px;

				.icon {
					display: block;
					min-width: 60px;
					text-align: center;
					line-height: 2px;
					ion-icon {
						font-size: 1.5em;
					}
				}

				.title {
					display: block;
					padding-left: 10px;
					text-align: center;
					white-space: nowrap;
				}
			}

			&.active {
				background-color: #fff;

				b:nth-child(1) {
					position: absolute;
					display: block;
					top: -20px;
					height: 20px;
					width: 100%;
					background: #fff;

					&:before {
						content: "";
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						border-bottom-right-radius: 10px;
						background: #0000ee;
					}
				}

				b:nth-child(2) {
					position: absolute;
					display: block;
					bottom: -20px;
					height: 20px;
					width: 100%;
					background: #fff;

					&:before {
						content: "";
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						border-top-right-radius: 10px;
						background: #0000ee;
					}
				}

				a {
					color: #333;
				}
			}
		}
	}
}

.menu-toggle {
	position: fixed;
	right: 20px;
	top: 20px;
	background-color: #0000ee;
	height: 40px;
	width: 40px;
	border-radius: 10px;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;

	ion-icon {
		position: absolute;
		font-size: 34px;
		color: #fff;
		display: none;
		&.open {
			display: block;
		}
	}

	&.active {
		background-color: #ff4d89;
		ion-icon {
			&.open {
				display: none;
			}
			&.close {
				display: block;
			}
		}
	}
}
View Compiled
let menuList = document.querySelectorAll(".list");
let menuToggle = document.querySelector(".menu-toggle");
let navigation = document.querySelector(".navigation");

menuList.forEach((item) => {
	item.addEventListener("click", (e) => {
		let j = 0;
		while (j < menuList.length) menuList[j++].className = "list";
		item.className = "list active";
	});
});

menuToggle.addEventListener("click", (e) => {
	menuToggle.classList.toggle("active");
	navigation.classList.toggle("active");
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js