Using the Common.js file, it's very easy to add icon hyperlinks to the sidebar on Citizen skin. I had to add it to common and not Citizen.js because once again citizen.js doesn't load my additions into the DOM, but common does. I don't like having to
Best of all, with the way I did it (really the simplest way), it doesn't add anything to the mobile sidebar. Because it's so small on mobile, being at the bottom of the screen, you don't really have the space to add stuff anyway.
Only downside is we can't get rid of these links in the megamenu since they are still required for people who disable javascript and mobile users (which is like 50-75% of all web traffic so cater to them).
Code
This is the JS code for the Upload file icon I added:
/* Append Upload file icon to Citizen sidebar, under megamenu icon */
(function($, mw) {
// Wait for the DOM to be ready
$(document).ready(function() {
if (!mw.user.isAnon()) {
// Create the HTML for the "Upload file" icon + link
var uploadFileIcon = '<a class="citizen-header__item sidebar-upload" href="/wiki/Special:Upload"><div class="citizen-header__button"></div></a>';
// Insert the icon HTML after the existing icon container element
$('.citizen-drawer').after(uploadFileIcon);
}
});
})(jQuery, mediaWiki);
You could easily readapt this code by just changing the var uploadFileIcon, the sidebar-upload class in the <a> tag (I kept the format as sidebar-X) and the '.citizen-drawer' to the previous class in the DOM. Just one thing: this code above checks that the user is logged in (because anonymous, or non-logged in users, can't upload files anyway). It won't add the icon if you're not logged in. You can simply remove the "if (!mw.user.isAnon())" condition to stop checking for that.
And then just to style the new icon, in Citizen.css:
/*appended upload file icon in sidebar */
.sidebar-upload> div, .sidebar-library > div, .sidebar-essays > div{
height:40px;
width:100%;
background-repeat:no-repeat;
background-size:auto;
background-position:center;
opacity:var(--opacity-icon-base);
content:"";
filter: var(--filter-invert); /* for dark mode */
}
.sidebar-upload > div{
background-image:linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E upload %3C/title%3E%3Cpath d=%22M17 12v5H3v-5H1v5a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5z%22/%3E%3Cpath d=%22M10 1 5 7h4v8h2V7h4z%22/%3E%3C/svg%3E");
}
This is copied straight from the style used for the other two icons (search function and megamenu) that Citizen adds. The icon is an encoded svg, I got the code from when we added it to the megamenu by looking at the CSS. Otherwise you can upload your own svgs to ProleWiki, find the files here (it's better if we used the ones made expressly for this purpose as they will look better together).
I divided the CSS clauses in two so that we can apply the same style to all sidebar items except for the background image.
Known problems
Known problems with my additions:
- If user blocks Javascript, icons won't load.