html code
<button type="button">
<svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff"><path d="M12 15a3 3 0 100-6 3 3 0 000 6z" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M19.622 10.395l-1.097-2.65L20 6l-2-2-1.735 1.483-2.707-1.113L12.935 2h-1.954l-.632 2.401-2.645 1.115L6 4 4 6l1.453 1.789-1.08 2.657L2 11v2l2.401.655L5.516 16.3 4 18l2 2 1.791-1.46 2.606 1.072L11 22h2l.604-2.387 2.651-1.098C16.697 18.831 18 20 18 20l2-2-1.484-1.75 1.098-2.652 2.386-.62V11l-2.378-.605z" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
</button>
<button type="button">
<svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff"><path d="M2 11V4.6a.6.6 0 01.6-.6h6.178a.6.6 0 01.39.144l3.164 2.712a.6.6 0 00.39.144H21.4a.6.6 0 01.6.6V11M2 11v8.4a.6.6 0 00.6.6h18.8a.6.6 0 00.6-.6V11M2 11h20" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
</button>
</nav>
</aside>
<aside class="sidebar">
<nav>
<button type="button">
<svg width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff"><path d="M12 16a4 4 0 100-8 4 4 0 000 8z" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M21 7.353v9.294a.6.6 0 01-.309.525l-8.4 4.666a.6.6 0 01-.582 0l-8.4-4.666A.6.6 0 013 16.647V7.353a.6.6 0 01.309-.524l8.4-4.667a.6.6 0 01.582 0l8.4 4.667a.6.6 0 01.309.524zM3.528 7.294L8.4 10m12.1-2.722L15.6 10M12 21v-5" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
<span>Blockchick</span>
</button>
<button type="button">
<svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff"><path d="M5 12v6s0 3 7 3 7-3 7-3v-6" stroke="#ffffff" stroke-width="1.5"></path><path d="M5 6v6s0 3 7 3 7-3 7-3V6" stroke="#ffffff" stroke-width="1.5"></path><path d="M12 3c7 0 7 3 7 3s0 3-7 3-7-3-7-3 0-3 7-3z" stroke="#ffffff" stroke-width="1.5"></path></svg>
<span>DataRiver</span>
</button>
<button type="button">
<svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff"><path d="M2 14v-4a1 1 0 011-1h2.697a1 1 0 00.555-.168l4.193-2.796A1 1 0 0112 6.87V17.13a1 1 0 01-1.555.832l-4.193-2.795A1 1 0 005.697 15H3a1 1 0 01-1-1z" stroke="#ffffff" stroke-width="1.5"></path><path d="M16.5 7.5S18 9 18 11.5s-1.5 4-1.5 4M19.5 4.5S22 7 22 11.5s-2.5 7-2.5 7" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
<span>AudioVibe</span>
</button>
<button type="button">
<svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff"><path d="M12 4v16M8 9v6M20 10v4M4 10v4M16 7v10" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
<span>SoundBlast</span>
</button>
<button type="button">
<svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff"><path d="M13.848 13.317L9.505 18.28a2 2 0 01-3.01 0l-4.343-4.963a2 2 0 010-2.634L6.495 5.72a2 2 0 013.01 0l4.343 4.963a2 2 0 010 2.634z" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M13 19l4.884-5.698a2 2 0 000-2.604L13 5" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M17 19l4.884-5.698a2 2 0 000-2.604L17 5" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<span>Levels</span>
</button>
<button type="button">
<svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff"><path d="M5 20v-1a7 7 0 017-7v0a7 7 0 017 7v1M12 12a4 4 0 100-8 4 4 0 000 8z" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
<span>Accounts</span>
</button>
<button type="button">
<svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff"><path d="M16 12h1.4a.6.6 0 01.6.6v6.8a.6.6 0 01-.6.6H6.6a.6.6 0 01-.6-.6v-6.8a.6.6 0 01.6-.6H8m8 0V8c0-1.333-.8-4-4-4S8 6.667 8 8v4m8 0H8" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
<span>Security</span>
</button>
</nav>
</aside>
<p class="text-info">Change the width of the screen, below 500px, to see how the sidebar is hidden.</p>
<p class="text-dev">Development of <a href="https://github.com/frontend-joe/css-sidebars" target="_blank">Frontend Joe</a></p>
css code
* {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body {
background: #202124;
}
button {
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
}
.toolbar,
.sidebar,
.burger {
position: fixed;
top: 0;
}
.toolbar {
z-index: 3;
left: 0;
width: 72px;
height: 100%;
background: #0b5ed7;
transition: 0.4s;
}
.sidebar {
z-index: 2;
left: 72px;
width: 200px;
height: 100%;
background: #0d6efd;
transition: 0.4s;
}
@media (width < 500px) {
.sidebar {
translate: -100% 0;
}
body.open .sidebar {
translate: 0 0;
}
}
.burger {
z-index: 1;
left: 72px;
display: grid;
place-items: center;
width: 72px;
height: 64px;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHN0cm9rZS13aWR0aD0iMS41IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgY29sb3I9IiNmZmZmZmYiPjxwYXRoIGQ9Ik0zIDVoMThNMyAxMmgxOE0zIDE5aDE4IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvcGF0aD48L3N2Zz4=) no-repeat center center;
}
body.open .burger {
left: auto;
right: 0;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHN0cm9rZS13aWR0aD0iMS41IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgY29sb3I9IiNmZmZmZmYiPjxwYXRoIGQ9Ik02Ljc1OCAxNy4yNDNMMTIuMDAxIDEybTUuMjQzLTUuMjQzTDEyIDEybTAgMEw2Ljc1OCA2Ljc1N00xMi4wMDEgMTJsNS4yNDMgNS4yNDMiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PC9wYXRoPjwvc3ZnPg==) no-repeat no-repeat center center;
}
@media (width >= 500px) {
.burger {
display: none;
}
}
.sidebar > nav {
display: grid;
}
button {
position: relative;
display: flex;
gap: 10px;
align-items: center;
width: 100%;
height: 60px;
padding: 0 20px;
}
button > img {
width: 20px;
height: 20px;
}
.toolbar img {
width: 28px;
height: 28px;
}
.sidebar > nav > button > span {
border-radius: 4px;
color: #f9f9f9;
font-size: 12px;
font-weight: 200;
letter-spacing: 2px;
line-height: 1;
transition: 0.4s;
}
.text-dev {
color: #ffffff;
position: fixed;
bottom: 0;
text-align: center;
width: 100%;
}
.text-dev a {
color: #0d6efd;
font-weight: 800;
}
.text-info {
font-size: 1.5rem;
color: #ffffff;
text-align: center;
width: 100%;
padding: 2rem 1rem 1rem 5.5rem;
}
@media (width >= 500px) {
.text-info {
padding: 2rem 1rem 1rem 18rem;
}
}
JS
const toggleSidebar = () => document.body.classList.toggle("open");
0 comments:
Post a Comment