Меню со вставкой чистого DIV для соцсетей
// ==UserScript==
// @name Navbar ficbook.net
// @namespace Violentmonkey Scripts
// @version 1.0.1
//
// @match https://ficbook.net/*
// @grant none
//
// @author -
// @description Меню со вставкой чистого DIV для соцсетей
// ==/UserScript==
// Добавляем стили для правильного отображения и цветов SVG
const style = document.createElement('style');
style.textContent = `
/* Делаем див инлайновым, чтобы он встал в один ряд с LI, и задаем отступ слева */
.custom-social-container {
display: inline-flex !important;
align-items: center;
margin-left: 20px;
vertical-align: middle;
}
/* Светлая тема */
.custom-social-container a {
color: #4F2D01 !important;
}
.custom-social-container a:hover {
color: #915c17 !important;
}
/* Темная тема */
.dark-theme .custom-social-container a {
color: #FFF!important;
}
.dark-theme .custom-social-container a:hover {
color: #7e7c7c !important;
}
/* Передаем цвет на SVG */
.custom-social-container svg {
fill: currentColor !important;
}
`;
document.head.appendChild(style);
// Находим оригинальное меню
let container = document.querySelector('.slide.slide-xs-only .nav.navbar-nav');
if (container) {
container.style.setProperty('margin-bottom', '5px', 'important');
// Создаем новый список
let newNav = document.createElement('ul');
newNav.className = 'nav navbar-nav nested-custom-menu';
newNav.style.setProperty('margin-top', '0px', 'important');
newNav.style.setProperty('margin-bottom', '5px', 'important');
newNav.style.setProperty('clear', 'both', 'important');
// Ссылки + иконки (Path взяты напрямую из спрайтов)
const links = [
{
text: 'Добавить фанфик',
url: '/home/addfic',
content: '<path d="M0 16C2 10 7.2 0 16 0c-4.1 3.3-6 11-9 11H4l-3 5H0ZM13 16h-1v-3H9v-1h3V9h1v3h3v1h-3v3z"/>'
},
{
text: 'Поиск фанфиков',
url: '/find',
content: '<path d="M6.3 0C2.8 0 0 2.8 0 6.3s2.8 6.4 6.3 6.4 6.4-2.8 6.4-6.4C12.7 2.8 9.9 0 6.3 0zm0 11.4c-2.8 0-5-2.3-5-5.1s2.3-5 5-5c2.8 0 5.1 2.3 5.1 5 0 2.8-2.3 5.1-5.1 5.1zM15.8 14.9 12.9 12c-.3-.3-.7-.3-.9 0s-.3.7 0 .9l2.9 2.9c.3.3.7.3.9 0s.3-.7 0-.9z"/>'
},
{
text: 'Случайная работа',
url: '/randomfic',
viewBox: '0 0 16 16', // У кубика свой вьюбокс
content: `
<path d="M11.3 0H4.7A4.7 4.7 0 0 0 0 4.7v6.6C0 13.9 2.1 16 4.7 16h6.6c2.6 0 4.7-2.1 4.7-4.7V4.7C16 2.1 13.9 0 11.3 0zm3.38 11.3a3.39 3.39 0 0 1-3.39 3.38H4.71a3.39 3.39 0 0 1-3.4-3.39V4.71a3.39 3.39 0 0 1 3.4-3.4h6.58a3.39 3.39 0 0 1 3.4 3.4v6.58z"/>
<circle cx="4.84" cy="4.84" r="1.08"/>
<circle cx="11.29" cy="4.84" r="1.08"/>
<circle cx="11.29" cy="11.24" r="1.08"/>
<circle cx="4.84" cy="11.24" r="1.08"/>
<circle cx="8.07" cy="8.03" r="1.08"/>
`
}
];
links.forEach(item => {
let li = document.createElement('li');
li.innerHTML = `
<a href="${item.url}" style="display: flex !important; align-items: center !important;">
<svg width="16" height="16" viewBox="${item.viewBox}" xmlns="http://www.w3.org/2000/svg" style="fill: currentColor !important; display: inline-block !important; vertical-align: middle !important; margin-right: 5px !important; flex-shrink: 0 !important;">
${item.content}
</svg>
<span style="line-height: 1 !important;">${item.text}</span>
</a>
`;
newNav.appendChild(li);
});
// Создаем именно DIV элемент
let socialDiv = document.createElement('div');
// Объединяем классы и кастомный для стилизации цветов
socialDiv.className = 'd-flex align-items-center gap-12 custom-social-container';
// Вставляем иконки внутрь дива
socialDiv.innerHTML = `
<a href="https://t.me/ficbook_official" target="_blank" rel="nofollow"><svg class="svg-icon ic_telegram "><use href="/assets/icons/icons-sprite10.svg#ic_telegram"></use></svg></a>
<a href="http://vk.com/ficbooknet" target="_blank" rel="nofollow"><svg class="svg-icon ic_vk "><use href="/assets/icons/icons-sprite10.svg#ic_vk"></use></svg></a>
<a href="https://www.youtube.com/channel/UCbtVE1EkJhiaeO1jD2P7lQg" target="_blank" rel="nofollow"><svg class="svg-icon ic_youtube "><use href="/assets/icons/icons-sprite10.svg#ic_youtube"></use></svg></a>
`;
// Аппендим DIV в конец списка UL (он встанет сразу после последнего LI)
newNav.appendChild(socialDiv);
// Выводим всё это дело на страницу
container.after(newNav);
}