AUI - missing css for aui / aui-sidebar

Atlassian Ecosystem Design
, , ,
1

I am creating a plugin for Jira Cloud and in my app.js I could successfully include the AUI module.
I tried recreating the aui-sidebar seen in this example : Sidebar - AUI Documentation

but I am missing CSS files how are you supposed to include them?

import './styles/app.css';

// start the Stimulus application
import './bootstrap';

import React from "react";
import ReactDOM from 'react-dom';
import AJS from '@atlassian/aui';

var sidebar = AJS.sidebar('.aui-sidebar');

// Try to expand the sidebar.
if (sidebar.isCollapsed()) {
    sidebar.expand();
}

// Listen to collapse events.
sidebar.on('collapse-start', function () {
    console.log('Sidebar is collapsing!');
});

sidebar.on('collapse-end', function () {
    console.log('Sidebar is now collapsed!');
});

// Event delegation for custom interactions.
sidebar.$el.on('click', '.clone', function (e) {
    if (sidebar.isCollapsed()) {
        e.preventDefault();
        cloneDialog.show();
    }
});```
2

I think you can import locally downloaded files from CDN.
Or you can import from html and inside html

    <link rel="stylesheet" href="https://unpkg.com/@atlassian/aui@9.3.0/dist/aui/aui-prototyping.css" media="all">
    <script src="https://unpkg.com/@atlassian/aui@9.3.0/dist/aui/aui-css-deprecations.js"></script>
    <script src="https://unpkg.com/@atlassian/aui@9.3.0/dist/aui/aui-prototyping.js"></script>

These styles with js I am using in my spring project inside template language. (like Handlebars for js)

1 Like