42point/dp-trade-UI-kit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move V1/V2 toggle into main nav and ui-kit sidebar

Browse Source 
Relocates the toggle out of header actions into the end of .main-nav
(pushed right via margin-left:auto) and adds it to the ui-kit sidebar,
which uses the base layout without the site header.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Alexey S 2026-04-22 16:08:30 +03:00
parent 6ff7e97046
commit 6ca7190335
3 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/_includes/partials/header.njk
View File

@ -10,10 +10,6 @@
</form>
<div class="header-actions">
<div class="design-toggle" role="group" aria-label="Версия дизайна">
<button type="button" class="design-toggle__btn" data-version="v1">V1</button>
<button type="button" class="design-toggle__btn" data-version="v2">V2</button>
</div>
<a class="phone-link" href="tel:+74959379460">+7 (495) 937-94-60</a>
<a class="header-icon header-icon--air" href="#" aria-label="Аккаунт">
<svg viewBox="0 0 24 24" aria-hidden="true">
@ -300,5 +296,9 @@
</div>
</section>
</div>
<div class="design-toggle design-toggle--nav" role="group" aria-label="Версия дизайна">
<button type="button" class="design-toggle__btn" data-version="v1">V1</button>
<button type="button" class="design-toggle__btn" data-version="v2">V2</button>
</div>
</nav>
</header>

9
src/css/v2.css
View File

@ -27,6 +27,15 @@
background: var(--color-primary-wine-100);
color: #fff;
}
.design-toggle--nav {
margin-left: auto;
align-self: center;
flex-shrink: 0;
}
.design-toggle--uikit {
margin: 16px 24px 0;
align-self: flex-start;
}
/* V2-only DOM nodes hidden under V1 */
[data-design-version="v1"] [data-v2-only] { display: none !important; }

4
src/ui-kit.njk
View File

@ -4,6 +4,10 @@ layout: layouts/ui-kit
permalink: /ui-kit.html
---
<aside class="sidebar">
<div class="design-toggle design-toggle--uikit" role="group" aria-label="Версия дизайна">
<button type="button" class="design-toggle__btn" data-version="v1">V1</button>
<button type="button" class="design-toggle__btn" data-version="v2">V2</button>
</div>
<a class="brand" href="#top" aria-label="DP Trade Design System">
<span class="brand__mark">DP</span>
<span>