<style>
:root {
--vk-bg: #edeef0;
--sidebar-bg: #ffffff;
--text-primary: #2a5885;
--text-active: #000;
--hover-bg: #f5f8fc;
--active-bg: linear-gradient(to right, #e1eaf3 0%, #d0e0f0 100%);
--active-left-border: #5181b8;
--divider: #ebedf0;
}
@media (prefers-color-scheme: dark) {
:root {
--vk-bg: #111;
--sidebar-bg: #191919;
--text-primary: #c4d0de;
--text-active: #ffffff;
--hover-bg: #222;
--active-bg: #2a2a2a;
--active-left-border: #71aaed;
--divider: #333;
}
}
/* ===== САЙДБАР ===== */
.sidebar {
width: 220px;
background: var(--sidebar-bg);
border-right: 1px solid var(--divider);
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
background: var(--vk-bg);
color: var(--text-primary);
overflow-y: auto;
box-shadow: 1px 0 6px rgba(0,0,0,0.06);
margin-left: -10px; /* ← если не помогает */
/* ← закругление углов */
border-radius: 0 18px 18px 0; /* левый край прямой, правые — скруглённые */
/* или симметрично: border-radius: 12px; */
/* или меньше: border-radius: 0 12px 12px 0; */
}
/* Пункт меню */
.sidebar a {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
text-decoration: none;
transition: all 0.18s ease;
position: relative;
}
.sidebar a:hover {
background: var(--hover-bg);
color: var(--text-active);
}
/* Активный пункт */
.sidebar a.active {
background: var(--active-bg);
color: var(--text-active);
font-weight: 600;
}
.sidebar a.active::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--active-left-border);
border-radius: 0 4px 4px 0;
}
/* Иконки */
.sidebar .icon {
width: 24px;
height: 24px;
flex-shrink: 0;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.9;
transition: opacity 0.2s;
}
.sidebar a:hover .icon {
opacity: 1;
}
/* Разделители */
.sidebar .divider {
height: 1px;
background: var(--divider);
margin: 8px 12px;
}
/* ===== ИКОНКИ (обновлённые, чище и современнее) ===== */
.icon.profile { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2a5 5 0 100 10 5 5 0 000-10zm0 12c-4.97 0-9 2.686-9 6v2h18v-2c0-3.314-4.03-6-9-6z'/%3E%3C/svg%3E"); }
.icon.news { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M4 4h16v2H4V4zm0 5h16v2H4v-2zm0 5h12v2H4v-2z'/%3E%3C/svg%3E"); }
.icon.msg { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E"); }
.icon.friends { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E"); }
.icon.groups { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M4 4h16v2H4V4zm0 4h16v2H4v-2zm0 4h10v2H4v-2z'/%3E%3C/svg%3E"); }
.icon.photos { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E"); }
.icon.video { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z'/%3E%3C/svg%3E"); }
.icon.music { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z'/%3E%3C/svg%3E"); }
.icon.guest { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v16l4-2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E"); }
.icon.shop { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM17 18c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zM7 13h10l3-8H5.82L7 13z'/%3E%3C/svg%3E"); }
.icon.feedback{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M21 6h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1zm-4 6V3c0-.55-.45-1-1-1H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1z'/%3E%3C/svg%3E"); }
.icon.settings{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath 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.48-.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'/%3E%3C/svg%3E"); }
.sidebar h3 {
margin: 12px 0 4px 20px;
padding-left: 0;
letter-spacing: 1.5px;
font-weight: 700;
font-size: 13px;
color: #4a76a8;
text-transform: uppercase;
opacity: 0.7;
}
</style>
<div class="sidebar">
<a href="$HOME_PAGE_LINK$" class="active">
<span class="icon profile"></span> Моя страница
</a>
<a href="/news/">
<span class="icon news"></span> Новости
</a>
<a href="/index/14">
<span class="icon msg"></span> Сообщения
</a>
<a href="#">
<span class="icon friends"></span> Друзья
</a>
<a href="#">
<span class="icon groups"></span> Группы
</a>
<a href="/photo/">
<span class="icon photos"></span> Фотографии
</a>
<a href="/video/">
<span class="icon video"></span> Видео
</a>
<a href="#">
<span class="icon music"></span> Музыка
</a>
<div class="divider"></div>
<a href="/gb/">
<span class="icon guest"></span> Гостевая
</a>
<a href="/shop">
<span class="icon shop"></span> Интернет-магазин
</a>
<a href="/index/0-3">
<span class="icon feedback"></span> Обратная связь
</a>
<div class="divider"></div>
<a href="/index/11">
<span class="icon settings"></span> Настройки
</a>
</div>
