toolshed/frontend/src/main.js

import {createApp} from 'vue'
import {BootstrapIconsPlugin} from 'bootstrap-icons-vue';
import App from './App.vue'

import './scss/toolshed.scss'

import router from './router'

import _nacl from 'js-nacl';

const app = createApp(App).use(BootstrapIconsPlugin);

_nacl.instantiate((nacl) => {
    window.nacl = nacl
    app.use(router).mount('#app')
});

window.closeAllDropdowns = function () {
    const dropdowns = document.getElementsByClassName("dropdown-menu");
    let i;
    for (i = 0; i < dropdowns.length; i++) {
        const openDropdown = dropdowns[i];
        if (openDropdown.classList.contains('show')) {
            openDropdown.classList.remove('show');
        }
    }
}

window.onclick = function (event) {
    if (!event.target.matches('.dropdown-toggle *')
        && !event.target.matches('.dropdown-toggle')
        && !event.target.matches('.dropdown-menu *')
        && !event.target.matches('.dropdown-menu')) {
        closeAllDropdowns();
    }
    if (!event.target.matches('.sidebar-toggle *')
        && !event.target.matches('.sidebar-toggle')
        && !event.target.matches('.sidebar *')
        && !event.target.matches('.sidebar')) {
        const sidebar = document.getElementById("sidebar");
        const marginLeft = parseInt(getComputedStyle(sidebar).marginLeft);
        if (sidebar.classList.contains('collapsed') && marginLeft === 0) {
            sidebar.classList.remove('collapsed');
        }
    }
}