Add JS and CSS entrypoints for new sidebar

client/scss/sidebar.scss

@@ -0,0 +1,62 @@
+/* =============================================================================
+/*  Wagtail CMS sidebar stylesheet entrypoint
+/* =============================================================================
+
+The sidebar is implemented in its own stylesheet so that it can be used
+by different frontend frameworks.
+
+This stylesheet follows the same conventions as the rest of Wagtail,
+see core.scss for details.
+
+==============================================================================*/
+
+
+/* SETTINGS
+These are variables, maps, and fonts.
+* No CSS should be produced by these files
+*/
+
+@import 'settings';
+
+
+/* TOOLS
+These are functions and mixins.
+* No CSS should be produced by these files.
+*/
+
+@import 'tools';
+
+
+/* GENERIC
+This is for resets and other rules that affect large collections of bare elements.
+* Changes to them should be very rare.
+*/
+
+// @import 'generic/generic';
+
+
+/* ELEMENTS
+These are base styles for bare HTML elements.
+* Changes to them should be very rare.
+*/
+
+// @import 'elements/elements';
+// @import 'elements/typography';
+// @import 'elements/forms';
+// @import 'elements/root';
+
+
+/* OBJECTS
+These are classes related to layout, known as 'objects' in ITCSS or OOCSS.
+* This is for grids, wrappers, and other non-consmetic layout utilities.
+* These classes are prefixed with `.o-`.
+*/
+
+
+
+/* COMPONENTS
+These are classes for components.
+* These classes (unless legacy) are prefixed with `.c-`.
+* React component styles live in the same folders as their React components,
+  which is the preferred pattern over housing them in the scss folder.
+*/

client/webpack.config.js

@@ -42,6 +42,7 @@ module.exports = function exports() {
       'page-chooser',
       'page-editor',
       'privacy-switch',
+      'sidebar',
       'sidebar-legacy',
       'task-chooser-modal',
       'task-chooser',

wagtail/admin/static_src/wagtailadmin/scss/core.scss

@@ -1 +1 @@
-@import '../../../../../client/scss/styles';
+@import '../../../../../client/scss/core';

wagtail/admin/static_src/wagtailadmin/scss/sidebar.scss

@@ -0,0 +1 @@
+@import '../../../../../client/scss/sidebar';

wagtail/admin/templates/wagtailadmin/admin_base.html

@@ -7,6 +7,8 @@
     <link rel="stylesheet" href="{% versioned_static 'wagtailadmin/css/core.css' %}" type="text/css" />
     {% hook_output 'insert_global_admin_css' %}
 
+    {% main_nav_css %}
+
     {% block extra_css %}{% endblock %}
 {% endblock %}
 

wagtail/admin/templatetags/wagtailadmin_tags.py

@@ -96,11 +96,36 @@ def search_other(context, current=None):
 
 @register.simple_tag
 def main_nav_js():
-    return Media(
-        js=[
-            versioned_static('wagtailadmin/js/sidebar-legacy.js')
-        ]
-    ) + admin_menu.media['js']
+    if 'slim-sidebar' in getattr(settings, 'WAGTAIL_EXPERIMENTAL_FEATURES', []):
+        return Media(
+            js=[
+                versioned_static('wagtailadmin/js/telepath/telepath.js'),
+                versioned_static('wagtailadmin/js/sidebar.js'),
+            ]
+        )
+
+    else:
+        return Media(
+            js=[
+                versioned_static('wagtailadmin/js/sidebar-legacy.js')
+            ]
+        ) + admin_menu.media['js']
+
+
+@register.simple_tag
+def main_nav_css():
+    if 'slim-sidebar' in getattr(settings, 'WAGTAIL_EXPERIMENTAL_FEATURES', []):
+        return Media(
+            css={
+                'all': [
+                    versioned_static('wagtailadmin/css/sidebar.css')
+                ]
+            }
+        )
+
+    else:
+        # Legacy sidebar CSS in core.css
+        return admin_menu.media['css']
 
 
 @register.filter("ellipsistrim")

wagtail/admin/ui/sidebar.py

@@ -12,7 +12,7 @@ class BaseSidebarAdapter(Adapter):
     @cached_property
     def media(self):
         return forms.Media(js=[
-            versioned_static('wagtailadmin/js/telepath/sidebar.js'),
+            versioned_static('wagtailadmin/js/sidebar.js'),
         ])