-
Notifications
You must be signed in to change notification settings - Fork 645
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #14281 from craftcms/feature/cms-1220-improve-side…
…bar-and-wide-screen-styling Improve sidebar and wide screen styling
- Loading branch information
Showing
22 changed files
with
742 additions
and
463 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
Oops, something went wrong.