craftcms · brandonkelly · Feb 6, 2024 · Feb 1, 2024 · Feb 2, 2024 · Feb 2, 2024
diff --git a/CHANGELOG-WIP.md b/CHANGELOG-WIP.md
@@ -1,6 +1,8 @@
 # Release Notes for Craft CMS 5.0.0 (WIP)
 
 ### Content Management
+- Improved global sidebar styling. ([#14281](https://github.com/craftcms/cms/pull/14281))
+- The global sidebar is now collapsible. ([#14281](https://github.com/craftcms/cms/pull/14281))
 - Redesigned the global breadcrumb bar to include quick links to other areas of the control panel, page context menus, and action menus. ([#13902](https://github.com/craftcms/cms/pull/13902))
 - All elements can now have thumbnails, provided by Assets fields. ([#12484](https://github.com/craftcms/cms/discussions/12484), [#12706](https://github.com/craftcms/cms/discussions/12706))
 - Element indexes and relational fields now have the option to use card views. ([#6024](https://github.com/craftcms/cms/pull/6024))

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+- Improved global sidebar styling. ([#14281](https://github.com/craftcms/cms/pull/14281))
+- The global sidebar is now collapsible. ([#14281](https://github.com/craftcms/cms/pull/14281))
 - Added `Craft.ElementEditor::markDeltaNameAsModified()`.
 - Removed `craft\elements\NestedElementManager::$allowDeletion`.
 - Fixed a bug where element editor forms could submit duplicate input values. ([#14276](https://github.com/craftcms/cms/issues/14276))

diff --git a/src/templates/_components/fieldtypes/Categories/input.twig b/src/templates/_components/fieldtypes/Categories/input.twig
@@ -43,8 +43,8 @@
 {% if jsClass is defined %}
     {% js %}
         new {{ jsClass }}({
-            id: "{{ id   | namespaceInputId   | e('js') }}",
-            name: "{{ name | namespaceInputName | e('js') }}",
+            id: "{{ id|namespaceInputId|e('js') }}",
+            name: "{{ name|namespaceInputName|e('js') }}",
             elementType: "{{ elementType|e('js') }}",
             sources: {{ sources|json_encode|raw }},
             criteria: {{ criteria|json_encode|raw }},

diff --git a/src/templates/_includes/disclosuremenu.twig b/src/templates/_includes/disclosuremenu.twig
@@ -82,7 +82,7 @@
 
 {% if withButton %}
   {% if html ?? false %}
-    {{ html | raw }}
+    {{ html|raw }}
   {% elseif label ?? false %}
     <span >{{ label }}</span>
   {% endif %}
@@ -143,7 +143,7 @@
             {% if item.heading is defined %}
               {% tag headingTag with {
                 class: ['h6', 'padded'],
-              } | merge(item.headingAttributes ??{}, recursive=true) %}
+              }|merge(item.headingAttributes ??{}, recursive=true) %}
                 {{ item.heading }}
               {% endtag %}
             {% endif %}

diff --git a/src/templates/_includes/links.twig b/src/templates/_includes/links.twig
@@ -1,6 +1,7 @@
 {% macro externalLinkIcon() %}
     {{ tag('span', {
         'data-icon': 'external',
+        'data-icon-size': 'puny',
         'role': 'img',
         'aria-label': 'Opens in a new window'|t('app'),
     }) }}

diff --git a/src/templates/_layouts/base.twig b/src/templates/_layouts/base.twig
@@ -12,11 +12,16 @@
     requestedSite ? "site--#{requestedSite.handle}",
 ])|filter -%}
 
+{% set sidebarState = craft.app.request.rawCookies.value('Craft-' ~ craft.app.systemUid ~ ':sidebar') ?? 'expanded' %}
 {% set bodyAttributes = {
     class: bodyClass,
     dir: orientation,
+    data: {
+        sidebar: sidebarState
+    }
 }|merge(bodyAttributes ?? {}, recursive=true) -%}
 
+
 {% do view.registerAssetBundle('craft\\web\\assets\\cp\\CpAsset') -%}
 {% set cpAssetUrl = view.getAssetManager().getPublishedUrl('@app/web/assets/cp/dist', true) -%}
 

diff --git a/src/templates/_layouts/components/global-sidebar.twig b/src/templates/_layouts/components/global-sidebar.twig
@@ -1,107 +1,129 @@
-<header id="global-sidebar" class="sidebar">
-    <a id="system-info" href="{{ siteUrl }}" rel="noopener" target="_blank" title="{{ 'View site'|t('app') }}">
-        <div id="site-icon">
-            {% if hasSystemIcon %}
-                <img src="{{ craft.rebrand.icon.url }}" alt="">
-            {% else %}
-                {{ iconSvg('c-outline') }}
+{% macro action(item, isSelected, showIcon) %}
+    {% set showIcon = showIcon ?? true %}
+    {% set selected = item.sel ?? isSelected ?? false %}
+    {% set badgeCount = item.badgeCount ?? false %}
+    {% set external = item.external ?? false %}
+
+    {% set linkAttributes = {
+        href: (item.url ?? false) ? url(item.url) : null,
+        class: [
+            'sidebar-action',
+            (external ? 'external'),
+            (selected ? 'sel'),
+        ],
+        target: external ? '_blank',
+    }|merge(item.linkAttributes ?? {}, recursive=true) %}
+
+    {% tag 'a' with linkAttributes %}
+        <span class="sidebar-action__prefix">
+            {% if showIcon %}
+            <span class="nav-icon" aria-hidden="true">
+                {%- if item.icon is defined -%}
+                    {{ iconSvg(item.icon) }}
+                {%- elseif item.fontIcon is defined -%}
+                    <span data-icon="{{ item.fontIcon }}"></span>
+                {%- else -%}
+                    {% include "_includes/fallback-icon.svg.twig" with { label: item.label } %}
+                {%- endif -%}
+                </span>
             {% endif %}
+        </span>
+
+        <span class="sidebar-action__label">
+            <span class="label">{{ item.label }}</span>
+            {% if external %}<span class="cp-icon puny">{{ iconSvg('external') }}</span>{% endif %}
+        </span>
+
+        {%- if badgeCount -%}
+            <span class="sidebar-action__badge">
+                <span class="badge" aria-hidden="true">{{ item.badgeCount|number(decimals=0) }}</span>
+                {{ tag('span', {
+                    class: 'visually-hidden',
+                    data: {
+                        notification: true,
+                    },
+                    text: '{num, number} {num, plural, =1{notification} other{notifications}}'|t('app', {
+                        num: item.badgeCount,
+                    }),
+                }) }}
+            </span>
+        {%- endif -%}
+    {% endtag %}
+{% endmacro %}
+
+<craft-global-sidebar>
+    <header id="global-sidebar" class="global-sidebar">
+        <div class="global-sidebar__header">
+            {% include '_layouts/components/system-info' %}
         </div>
-        <div id="system-name">
-            <span class="h2">{{ systemName }}</span>
-        </div>
-    </a>
 
-    <nav id="nav" aria-label="{{ 'Primary'|t('app') }}">
-        <ul>
-            {% for item in craft.cp.nav() %}
-                {% set itemAttributes = {
-                    id: item.id,
-                    class: item.subnav ? 'has-subnav',
-                } %}
-                {% set linkAttributes = {
-                    href: url(item.url),
-                    class: item.sel ? ['sel'] : [],
-                }|merge(item.linkAttributes ?? {}, recursive=true) %}
-                <li {{ attr(itemAttributes) }}>
-                    <a {{ attr(linkAttributes) }}>
-                        <span class="icon icon-mask" aria-hidden="true">
-                            {%- if item.icon is defined -%}
-                                {{ iconSvg(item.icon) }}
-                            {%- elseif item.fontIcon is defined -%}
-                                <span data-icon="{{ item.fontIcon }}"></span>
-                            {%- else -%}
-                                {% include "_includes/fallback-icon.svg.twig" with { label: item.label } %}
-                            {%- endif -%}
-                        </span>
+        <div class="global-sidebar__nav">
 
-                        <span class="label">{{ item.label }}</span>
+            <nav id="nav" class="global-nav" aria-label="{{ 'Primary'|t('app') }}">
+                <ul>
+                    {% for item in craft.cp.nav() %}
+                        {% set itemAttributes = {
+                            id: item.id,
+                            class: [
+                                'nav-item',
+                                item.sel ? 'sel',
+                                item.subnav ? 'has-subnav'
+                            ],
+                        } %}
+                        <li {{ attr(itemAttributes) }}>
+                            {{ _self.action(item) }}
 
-                        {%- if not item.sel and item.badgeCount -%}
-                            <span class="badge" aria-hidden="true">{{ item.badgeCount|number(decimals=0) }}</span>
-                            {{ tag('span', {
-                                class: 'visually-hidden',
-                                data: {
-                                    notification: true,
-                                },
-                                text: '{num, number} {num, plural, =1{notification} other{notifications}}'|t('app', {
-                                    num: item.badgeCount,
-                                }),
-                            }) }}
-                        {%- endif -%}
-                    </a>
-                    {% if item.subnav %}
-                        <ul class="subnav">
-                            {% for itemId, item in item.subnav %}
-                                {% set itemIsSelected = (
-                                    (selectedSubnavItem is defined and selectedSubnavItem == itemId) or
-                                    (selectedSubnavItem is not defined and loop.first)
-                                ) -%}
-                                {% set linkAttributes = {
-                                    href: url(item.url),
-                                    class: [
-                                        itemIsSelected ? 'sel',
-                                        (item.external ?? false) ? 'external',
-                                    ],
-                                    target: (item.external ?? false) ? '_blank',
-                                    aria: {
-                                        current: itemIsSelected ? 'page' : false,
-                                    },
-                                } %}
+                            {% if item.subnav %}
+                                <ul class="nav-item__subnav">
+                                    {% for itemId, item in item.subnav %}
+                                        {% set itemIsSelected = (
+                                            (selectedSubnavItem is defined and selectedSubnavItem == itemId) or
+                                            (selectedSubnavItem is not defined and loop.first)
+                                        ) -%}
 
-                                <li>
-                                    <a {{ attr(linkAttributes) }}>
-                                        {{ item.label }}
 
-                                        {%- if not itemIsSelected and item.badgeCount is defined -%}
-                                            <span class="badge" aria-hidden="true">{{ item.badgeCount|number(decimals=0) }}</span>
-                                            {{ tag('span', {
-                                                class: 'visually-hidden',
-                                                data: {
-                                                    notification: true,
-                                                },
-                                                text: '{num, number} {num, plural, =1{notification} other{notifications}}'|t('app', {
-                                                    num: item.badgeCount,
-                                                }),
-                                            }) }}
-                                        {%- endif -%}
-                                    </a>
-                                </li>
-                            {% endfor %}
-                        </ul>
-                    {% endif %}
-                </li>
-            {% endfor %}
-        </ul>
-    </nav>
+                                        <li class="nav-item nav-item--sub">
+                                            {{ _self.action(item|merge({
+                                                linkAttributes:  {
+                                                    class: ['sidebar-action--sub'],
+                                                    aria: {
+                                                        current: itemIsSelected ? 'page' : false,
+                                                    },
+                                                }
+                                            }), itemIsSelected, false, ) }}
+                                        </li>
+                                    {% endfor %}
+                                </ul>
+                            {% endif %}
+                        </li>
+                    {% endfor %}
+                </ul>
+            </nav>
+        </div>
 
-    {% if currentUser.admin and devMode %}
-        {% set devModeText = 'Craft CMS is running in Dev Mode.'|t('app') %}
-        <div id="devmode">
-            {{ tag('span', {
-                class: 'visually-hidden',
-                text: devModeText
-            }) }}
+        <div class="global-sidebar__footer">
+            <div class="sidebar-actions">
+                <button type="button" class="sidebar-action" id="sidebar-trigger" aria-controls="global-sidebar" aria-expanded="{{ sidebarState == 'expanded' ? 'true' : 'false' }}">
+                    <span class="sidebar-action__prefix">
+                        <span class="nav-icon" aria-hidden="true" id="sidebar-toggle-icon">
+                            {{ iconSvg('angle-right') }}
+                        </span>
+                    </span>
+                    <span class="sidebar-action__label">
+                        <span class="label">{{ 'Toggle sidebar'|t('app') }}</span>
+                    </span>
+                </button>
+            </div>
+
+            {% if currentUser.admin and devMode %}
+                {% set devModeText = 'Craft CMS is running in Dev Mode.'|t('app') %}
+                <div id="devmode">
+                    {{ tag('span', {
+                        class: 'visually-hidden',
+                        text: devModeText
+                    }) }}
+                </div>
+            {% endif %}
         </div>
-    {% endif %}
-</header>
+    </header>
+</craft-global-sidebar>
diff --git a/src/templates/_layouts/components/system-info.twig b/src/templates/_layouts/components/system-info.twig
@@ -0,0 +1,12 @@
+<a id="system-info" href="{{ siteUrl }}" rel="noopener" target="_blank" title="{{ 'View site'|t('app') }}">
+    <div id="site-icon">
+        {% if hasSystemIcon %}
+            <img src="{{ craft.rebrand.icon.url }}" alt="">
+        {% else %}
+            {{ iconSvg('c-outline') }}
+        {% endif %}
+    </div>
+    <div id="system-name">
+        <span class="h2">{{ systemName }}</span>
+    </div>
+</a>