Hi everyone ! 
I would like to create a sidebar from files for my app.
I see the code of sharerenamer and activity :
- GitHub - JonathanTreffler/sharerenamer: A simple Nextcloud app that lets you customize file/folder share links
- GitHub - nextcloud/activity: Activity app for Nextcloud
I created :
A SidebarTab.vue template
<template>
<div>
<p>
coucou
</p>
</div>
</template>
<script>
export default {
name: 'SidebarTab',
components: {
},
data() {
return {
loading: false,
token: null,
fileInfo: {},
shares: [],
}
},
}
</script>
<style scoped>
#tab-sharerenamer {
height: 100%;
padding: 0;
}
</style>
The sidebar.js file
import Vue from 'vue'
import { translate, translatePlural } from 'nextcloud-l10n'
import SidebarTab from './SidebarTab'
Vue.prototype.t = translate
Vue.prototype.n = translatePlural
const View = Vue.extend(SidebarTab)
let tabInstance = null
console.error('Ceci est un test depuis main.js')
const workspaceTab = new OCA.Files.Sidebar.Tab({
id: 'workspace',
name: t('workspace', 'Workspace'),
icon: 'icon-rename',
async mount(el, fileInfo, context) {
if (tabInstance) {
tabInstance.$destroy()
}
tabInstance = new View({
// Better integration with vue parent component
parent: context,
})
// Only mount after we have all the info we need
await tabInstance.update(fileInfo)
tabInstance.$mount(el)
},
update(fileInfo) {
tabInstance.update(fileInfo)
},
destroy() {
tabInstance.$destroy()
tabInstance = null
},
})
window.addEventListener('DOMContentLoaded', function() {
if (OCA.Files && OCA.Files.Sidebar) {
OCA.Files.Sidebar.registerTab(workspaceTab)
} else {
console.error('Error with OCA.Files and/or OCA.Files.Sidebar')
}
})
A LoadSidebarScripts.php listener
<?php
namespace OCA\Workspace\Listener;
use OCP\Util;
use OCP\EventDispatcher\Event;
use OCA\Workspace\AppInfo\Application;
use OCP\EventDispatcher\IEventListener;
use OCA\Files\Event\LoadSidebar;
class LoadSidebarScripts implements IEventListener {
public function handle(Event $event) :void {
if (!($event instanceof LoadSidebar)) {
return;
}
Util::addStyle(Application::APP_ID, 'workspace-style');
Util::addScript(Application::APP_ID, 'workspace-sidebar');
}
}
And I called the LoadSideBarScripts.php from Application.php
<?php
/**
* @copyright 2021 Arawa <TODO>
*
* @author 2021 Cyrille Bollu <cyrille@bollu.be>
* @license GNU AGPL version 3 or any later version
*/
namespace OCA\Workspace\AppInfo;
use OCA\Workspace\Listener\LoadSidebarScripts;
use OCA\Workspace\Middleware\IsGeneralManagerMiddleware;
use OCA\Workspace\Middleware\WorkspaceAccessControlMiddleware;
use OCA\Workspace\Middleware\IsSpaceAdminMiddleware;
use OCA\Workspace\Service\UserService;
use OCP\AppFramework\App;
use OCP\AppFramework\Bootstrap\IRegistrationContext;
use OCP\AppFramework\Utility\IControllerMethodReflector;
use OCP\IRequest;
use OCP\IURLGenerator;
use OCA\Files\Event\LoadSidebar;
class Application extends App {
public const APP_ID = 'workspace';
public const GROUP_WKSUSER = 'WorkspacesManagers'; // Group that holds all workspace users (members managed by the application)
public const GENERAL_MANAGER = "GeneralManager"; // Group that holds the application administrators
// TODO Remove the '_01' suffix
public const ESPACE_MANAGER_01 = "GE-";
public const ESPACE_USERS_01 = "U-";
public const GID_SPACE = "SPACE-";
public function __construct(array $urlParams=[] ) {
parent::__construct(self::APP_ID, $urlParams);
// code
}
public function register(IRegistrationContext $context): void {
$context->registerEventListener(LoadSidebar::class,LoadSidebarScripts::class);
}
}
And it doesn’t work !
I get this error message (see below my screenshot)
I searched on this error and there is this subject which is solved : "/apps/files" blocked due to MIME type [Solved]
However, I changed the rights on my project folders and files. And it didn’t work again 
Note : I am working with Docker.
My docker-compose.yml :
version: '3'
services:
nextcloud-db-23:
image: mariadb
restart: always
command: --transaction-isolation=READ-COMMITTED --binlog-format=ROW
volumes:
- ./db:/var/lib/mysql
environment:
- MYSQL_ROOT_PASSWORD=password
- MYSQL_PASSWORD=password
- MYSQL_DATABASE=nextcloud
- MYSQL_USER=nextcloud
nextcloud-web-23:
image: nextcloud:23
restart: always
ports:
- 8223:80
links:
- nextcloud-db-23
volumes:
- ./server:/var/www/html/
environment:
- MYSQL_PASSWORD=password
- MYSQL_DATABASE=nextcloud
- MYSQL_USER=nextcloud
- MYSQL_HOST=nextcloud-db-23
Do you have an idea how to solve this problem ?