Social Panel

Yesterday I was talking with @ildiesign about the fact that I needed a component which I could use on all of my mini-projects on Codepen in order to make it easier for people to find my Social Media profiles.

Today, she came up with this A.W.E.S.O.M.E. design! This is exactly what I needed!

You can see the live version on Codepen:

https://codepen.io/FlorinPop17/pen/LYPrmqV

In this article we’re going to build it from scratch using HTML/CSS and a little bit of JavaScript.

The HTML

There are two important pieces of the HTML.

1. The ‘Get in Touch’ button which will trigger the action that’ll show the Panel
2. The actual Panel

<div class="social-panel-container">
	<div class="social-panel">
		<p>
			Created with <i class="fa fa-heart"></i> by
			<a target="_blank" href="https://florin-pop.com">Florin Pop</a>
		</p>
		<button class="close-btn"><i class="fas fa-times"></i></button>
		<h4>Get in touch on</h4>
		<ul>
			<li>
				<a href="https://twitter.com/florinpop1705" target="_blank">
					<i class="fab fa-twitter"></i>
				</a>
			</li>
			<li>
				<a href="https://instagram.com/florinpop17" target="_blank">
					<i class="fab fa-instagram"></i>
				</a>
			</li>
			<li>
				<a href="https://facebook.com/florinpop17" target="_blank">
					<i class="fab fa-facebook"></i>
				</a>
			</li>
			<li>
				<a href="https://linkedin.com/in/florinpop17" target="_blank">
					<i class="fab fa-linkedin"></i>
				</a>
			</li>
		</ul>
	</div>
</div>
<button class="floating-btn">
	Get in Touch
</button>

Both the button and the container will be fixed positioned as we want them always to be in the bottom right corner.

The CSS

Before we start, let’s setup some basic CSS rules:

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

* {
	box-sizing: border-box;
}

Great! Now the .social-panel-container:

.social-panel-container {
	position: fixed;
	right: 0;
	bottom: 80px;
	transform: translateX(100%);
	transition: transform 0.4s ease-in-out;
}

.social-panel-container.visible {
	transform: translateX(-10px);
}

As mentioned above, it’s fixed and we’re moving it back into the view by adding the .visible class (Check the JS section below to see how it’s done).

Next, the .social-panel element:

.social-panel {
	border-radius: 16px;
	box-shadow: 0 16px 31px -17px rgba(0, 31, 97, 0.6);
	border: 5px solid #001f61;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-family: 'Muli';
	position: relative;
	height: 169px;
	width: 370px;
	max-width: calc(100% - 10px);
}

This is basically the main component you see visually. The above container it’s used to position it fixed on the screen. But you knew that already, right? 😄

Now all the mambo-jumbo that’s inside:

.social-panel button.close-btn {
	border: 0;
	color: #97a5ce;
	cursor: pointer;
	font-size: 20px;
	position: absolute;
	top: 5px;
	right: 5px;
}

.social-panel button.close-btn:focus {
	outline: none;
}

.social-panel p {
	background-color: #001f61;
	border-radius: 0 0 10px 10px;
	color: #fff;
	font-size: 14px;
	line-height: 18px;
	padding: 2px 17px 6px;
	position: absolute;
	top: 0;
	left: 50%;
	margin: 0;
	transform: translateX(-50%);
	text-align: center;
	width: 235px;
}

.social-panel p i {
	margin: 0 5px;
}

.social-panel p a {
	color: #ff7500;
	text-decoration: none;
}

.social-panel h4 {
	color: #97a5ce;
	font-family: 'Muli';
	font-size: 14px;
	margin: 20px 0;
	line-height: 18px;
	text-transform: uppercase;
}

.social-panel ul {
	display: flex;
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.social-panel ul li {
	margin: 0 10px;
}

.social-panel ul li a {
	border: 1px solid #dce1f2;
	border-radius: 50%;
	color: #001f61;
	font-size: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 50px;
	width: 50px;
	text-decoration: none;
}

.social-panel ul li a:hover {
	border-color: #ff6a00;
	box-shadow: 0 9px 12px -9px #ff6a00;
}

Few things to note:

• the .close-btn and the p tag are positioned absolute. This is because we want to place them in a certain position inside the .social-panel
• we have a small :hover efect on the social icons links
• within these links we have icons from FontAwesome

Other than that, it’s pretty straightforward. If there is something you don’t understand, let me know and I’ll be happy to help.

Now for the .floating-btn:

.floating-btn {
	border-radius: 26.5px;
	background-color: #001f61;
	border: 1px solid #001f61;
	box-shadow: 0 16px 22px -17px #03153b;
	color: #fff;
	cursor: pointer;
	font-size: 16px;
	line-height: 20px;
	padding: 12px 20px;
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 999;
}

.floating-btn:hover {
	background-color: #ffffff;
	color: #001f61;
}

.floating-btn:focus {
	outline: none;
}

This button also has a :hover effect which will change it’s appearance - neat, eh? 😉

And lastly some media queries as we want it to be responsive also on mobile devices:

@media screen and (max-width: 480px) {
	.social-panel-container.visible {
		transform: translateX(0px);
	}

	.floating-btn {
		right: 10px;
	}
}

Basically we’re moving these floating elements a little to the right to be in the center of a mobile device.

The JavaScript

Now that we have everything in place, we just need to display the panel by adding the .visible class on it when the user clicks the .floating-btn. Also, the .close-btn will… Let’s see if you guess what it does 😉.

const floating_btn = document.querySelector('.floating-btn');
const close_btn = document.querySelector('.close-btn');
const social_panel_container = document.querySelector(
	'.social-panel-container'
);

floating_btn.addEventListener('click', () => {
	social_panel_container.classList.toggle('visible');
});

close_btn.addEventListener('click', () => {
	social_panel_container.classList.remove('visible');
});

Note that the .floating-btn is actually toggling the .visible class. This is because I’m allowing the user to click the button again in order to hide the panel.

Conclusion

I want to thank @ildiesign again for her wonderful work! Make sure you follow her on Twitter and you’ll be amazed by her wonderful designs!

Happy Coding! 😇