Andrew Zambazos
192 lines
6.2 KiB
HTML
192 lines
6.2 KiB
HTML
<html>
|
|
<head>
|
|
<style type="text/css">
|
|
* {
|
|
-webkit-user-select: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
background: #1a1c23;
|
|
color: #8a8d9e;
|
|
fill: #8a8d9e;
|
|
font-family: 'Inter', -apple-system, 'Segoe UI', Arial, sans-serif;
|
|
height: 100vh;
|
|
padding: 16px 0;
|
|
}
|
|
|
|
.sidebar-header {
|
|
padding: 20px 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.sidebar-header h2 {
|
|
color: #ffffff;
|
|
font-weight: 600;
|
|
font-size: 1.2rem;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.logo {
|
|
width: 32px;
|
|
height: 32px;
|
|
background: linear-gradient(135deg, #6366f1, #8b5cf6);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.menu-section {
|
|
margin-top: 32px;
|
|
}
|
|
|
|
.menu-section-title {
|
|
color: #6b7280;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
padding: 0 24px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
li {
|
|
list-style-type: none;
|
|
padding: 12px 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 8px;
|
|
margin: 2px 12px;
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
}
|
|
|
|
li:hover {
|
|
background-color: #2d303e;
|
|
color: #fff;
|
|
fill: #fff;
|
|
}
|
|
|
|
li.disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
li.active {
|
|
background: linear-gradient(90deg, #6366f1, #8b5cf6);
|
|
color: #ffffff;
|
|
fill: #ffffff;
|
|
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
|
|
}
|
|
|
|
li svg {
|
|
margin-right: 12px;
|
|
}
|
|
|
|
ul {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.divider {
|
|
height: 1px;
|
|
background-color: #2d303e;
|
|
margin: 24px 24px;
|
|
}
|
|
|
|
.sidebar-footer {
|
|
position: absolute;
|
|
bottom: 16px;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 16px 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.user-avatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
background: #2d303e;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.user-info {
|
|
margin-left: 12px;
|
|
}
|
|
|
|
.user-name {
|
|
color: #fff;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.user-role {
|
|
color: #8a8d9e;
|
|
font-size: 0.8rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- SVG Icons from https://www.flaticon.com/packs/basic-ui-4 -->
|
|
<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
|
|
<symbol id="dashboard" viewBox="0 0 24 24">
|
|
<path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/>
|
|
</symbol>
|
|
<symbol id="profile" viewBox="0 0 24 24">
|
|
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
|
|
</symbol>
|
|
<symbol id="favorites" viewBox="0 0 24 24">
|
|
<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
|
|
</symbol>
|
|
<symbol id="documents" viewBox="0 0 24 24">
|
|
<path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>
|
|
</symbol>
|
|
<symbol id="help" viewBox="0 0 24 24">
|
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>
|
|
</symbol>
|
|
<symbol id="settings" viewBox="0 0 24 24">
|
|
<path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>
|
|
</symbol>
|
|
</svg>
|
|
|
|
<div class="sidebar-header">
|
|
<div class="logo"></div>
|
|
<h2>Dashly</h2>
|
|
</div>
|
|
|
|
<div class="menu-section">
|
|
<div class="menu-section-title">Main</div>
|
|
<ul>
|
|
<li class="active"><svg width="20" height="20"><use xlink:href="#dashboard" /></svg>Dashboard</li>
|
|
<li class="disabled"><svg width="20" height="20"><use xlink:href="#profile" /></svg>Profile</li>
|
|
<li class="disabled"><svg width="20" height="20"><use xlink:href="#favorites" /></svg>Favorites</li>
|
|
<li class="disabled"><svg width="20" height="20"><use xlink:href="#documents" /></svg>Documents</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="menu-section">
|
|
<div class="menu-section-title">Support</div>
|
|
<ul>
|
|
<li class="disabled"><svg width="20" height="20"><use xlink:href="#help" /></svg>Help Center</li>
|
|
<li class="disabled"><svg width="20" height="20"><use xlink:href="#settings" /></svg>Settings</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<div class="sidebar-footer">
|
|
<div class="user-avatar">U</div>
|
|
<div class="user-info">
|
|
<div class="user-name">User</div>
|
|
<div class="user-role">Admin</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |