From 40fcc61a1561cc154fe683994b265e41c51a97c9 Mon Sep 17 00:00:00 2001 From: Awakich Date: Thu, 2 Apr 2026 17:38:13 +0300 Subject: [PATCH 1/3] add mobile version of courses & programs list pages --- .eslintrc.json | 5 +- .../src/app/office/chat/chat.component.scss | 2 + .../app/office/courses/courses.component.html | 2 +- .../app/office/courses/courses.component.scss | 35 +++++++- .../office/courses/list/list.component.scss | 10 ++- .../office/features/nav/nav.component.html | 87 ++++++++++++------- .../office/features/nav/nav.component.scss | 53 ++--------- .../app/office/features/nav/nav.component.ts | 17 +--- .../app/office/members/members.component.scss | 2 + .../src/app/office/office.component.html | 30 ++++--- .../src/app/office/office.component.scss | 36 ++++++-- .../office/program/main/main.component.scss | 22 ++++- .../app/office/program/main/main.component.ts | 3 - .../app/office/program/program.component.scss | 21 ++++- .../program-card/program-card.component.html | 4 +- .../program-card/program-card.component.scss | 15 +++- .../office/projects/projects.component.scss | 2 + .../office/vacancies/vacancies.component.scss | 2 + .../src/assets/icons/svg/chats.svg | 2 +- .../src/assets/icons/svg/menu-burger.svg | 2 +- .../src/assets/icons/svg/menu-cross.svg | 2 +- .../assets/icons/symbol/svg/sprite.css.svg | 2 +- .../profile-control-panel.component.scss | 37 ++++++-- .../profile-info/profile-info.component.html | 9 +- .../profile-info/profile-info.component.ts | 2 + .../layout/sidebar/sidebar.component.scss | 2 +- .../primitives/back/back.component.scss | 1 + 27 files changed, 256 insertions(+), 151 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 99e8d33e1..0f241fd0b 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -14,6 +14,9 @@ "rules": { "no-useless-constructor": "off", "@typescript-eslint/no-empty-function": "off", - "dot-notation": "off" + "dot-notation": "off", + "@typescript-eslint/no-explicit-any": "warn", + "@typescript-eslint/no-unused-vars": "warn", + "@typescript-eslint/no-unused-expressions": "warn" } } diff --git a/projects/social_platform/src/app/office/chat/chat.component.scss b/projects/social_platform/src/app/office/chat/chat.component.scss index 311c45cec..e30034d83 100644 --- a/projects/social_platform/src/app/office/chat/chat.component.scss +++ b/projects/social_platform/src/app/office/chat/chat.component.scss @@ -1,4 +1,6 @@ .page { + margin-top: 30px; + &__bar { margin-bottom: 20px; } diff --git a/projects/social_platform/src/app/office/courses/courses.component.html b/projects/social_platform/src/app/office/courses/courses.component.html index d8faa75eb..f23854695 100644 --- a/projects/social_platform/src/app/office/courses/courses.component.html +++ b/projects/social_platform/src/app/office/courses/courses.component.html @@ -4,7 +4,7 @@
-
+
diff --git a/projects/social_platform/src/app/office/courses/courses.component.scss b/projects/social_platform/src/app/office/courses/courses.component.scss index 53c48f8bc..bfba9dc14 100644 --- a/projects/social_platform/src/app/office/courses/courses.component.scss +++ b/projects/social_platform/src/app/office/courses/courses.component.scss @@ -2,9 +2,42 @@ @use "styles/responsive"; .profile { + display: flex; + flex-direction: column; + align-items: center; + padding-bottom: 100px; + margin-top: 30px; + + @include responsive.apply-desktop { + display: block; + } + &__info { display: grid; - grid-template-columns: 8fr 2fr; column-gap: 20px; + + @include responsive.apply-desktop { + grid-template-columns: 8fr 2fr; + } + } + + &__search { + margin-bottom: 24px; + } + + app-back { + display: none; + + @include responsive.apply-desktop { + display: block; + } + } + + app-soon-card { + display: none; + + @include responsive.apply-desktop { + display: block; + } } } diff --git a/projects/social_platform/src/app/office/courses/list/list.component.scss b/projects/social_platform/src/app/office/courses/list/list.component.scss index f7601a355..255072a90 100644 --- a/projects/social_platform/src/app/office/courses/list/list.component.scss +++ b/projects/social_platform/src/app/office/courses/list/list.component.scss @@ -1,9 +1,13 @@ -.courses { - margin-top: 20px; +@use "styles/responsive"; +.courses { &__list { display: grid; - grid-template-columns: 4fr 4fr; + grid-template-columns: 1fr; grid-gap: 20px; + + @include responsive.apply-desktop { + grid-template-columns: 4fr 4fr; + } } } diff --git a/projects/social_platform/src/app/office/features/nav/nav.component.html b/projects/social_platform/src/app/office/features/nav/nav.component.html index cdf606ec4..7ded39491 100644 --- a/projects/social_platform/src/app/office/features/nav/nav.component.html +++ b/projects/social_platform/src/app/office/features/nav/nav.component.html @@ -2,13 +2,14 @@
-

{{ title }}

@if (((notificationService.hasNotifications | async) || hasInvites) && !mobileMenuOpen) { @@ -19,9 +20,6 @@

{{ title }}

@if (mobileMenuOpen) {
-
{{ title }} appWidth="23" appHeight="21" appViewBox="0 0 23 21" + class="nav-bar__icon" > - + @if ((notificationService.hasNotifications | async) || hasInvites) {
} @@ -47,50 +53,75 @@

{{ title }}

} @else {
-

Уведомления

+

уведомления

    @for (invite of invites; track invite.id) {
  • @@ -103,8 +134,6 @@

    Уведомления

    }
- } @if (authService.profile | async; as user) { - }
} diff --git a/projects/social_platform/src/app/office/features/nav/nav.component.scss b/projects/social_platform/src/app/office/features/nav/nav.component.scss index 2a2928c06..2f7883027 100644 --- a/projects/social_platform/src/app/office/features/nav/nav.component.scss +++ b/projects/social_platform/src/app/office/features/nav/nav.component.scss @@ -5,8 +5,6 @@ .nav-bar { display: block; - padding: 25px 0 10px; - background-color: var(--light-gray); @include responsive.apply-desktop { display: none; @@ -18,7 +16,6 @@ display: flex; justify-content: space-between; max-width: responsive.$container-md; - padding: 0 15px; margin: 0 auto; @include responsive.apply-desktop { @@ -26,11 +23,14 @@ } } + &__icon { + color: var(--dark-grey); + } + &__top { display: flex; align-items: center; - justify-content: space-between; - padding-right: 50px; + justify-content: flex-end; margin-bottom: 40px; } @@ -42,7 +42,6 @@ justify-content: center; width: 60px; height: 40px; - color: var(--black); cursor: pointer; border-radius: var(--rounded-sm); @@ -73,16 +72,6 @@ } } - &__title { - color: var(--black); - - @include typography.heading-3; - - @include responsive.apply-desktop { - @include typography.heading-1; - } - } - &__mobile-menu { position: fixed; top: 0; @@ -131,35 +120,3 @@ background-color: var(--red); border-radius: 50%; } - -.pro-item { - display: flex; - gap: 10px; - align-items: center; - justify-content: space-between; - margin-right: 20px; - color: var(--dark-grey); - cursor: pointer; - transition: color 0.2s; - - &:hover { - color: var(--black); - } - - &__name { - display: flex; - align-items: center; - - i { - margin-right: 12px; - } - } - - &__badge { - padding: 2px 10px; - margin-left: auto; - color: var(--white); - background-color: var(--accent); - border-radius: 12px; - } -} diff --git a/projects/social_platform/src/app/office/features/nav/nav.component.ts b/projects/social_platform/src/app/office/features/nav/nav.component.ts index 47742dc95..3e8358fb4 100644 --- a/projects/social_platform/src/app/office/features/nav/nav.component.ts +++ b/projects/social_platform/src/app/office/features/nav/nav.component.ts @@ -1,14 +1,13 @@ /** @format */ import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from "@angular/core"; -import { NavService } from "@services/nav.service"; import { NavigationStart, Router, RouterLink, RouterLinkActive } from "@angular/router"; import { noop, Subscription } from "rxjs"; import { NotificationService } from "@services/notification.service"; import { Invite } from "@models/invite.model"; import { AuthService } from "@auth/services"; import { InviteService } from "@services/invite.service"; -import { AsyncPipe } from "@angular/common"; +import { AsyncPipe, CommonModule } from "@angular/common"; import { IconComponent } from "@ui/components"; import { InviteManageCardComponent, ProfileInfoComponent } from "@uilib"; @@ -47,6 +46,7 @@ import { InviteManageCardComponent, ProfileInfoComponent } from "@uilib"; styleUrl: "./nav.component.scss", standalone: true, imports: [ + CommonModule, IconComponent, RouterLink, RouterLinkActive, @@ -57,12 +57,10 @@ import { InviteManageCardComponent, ProfileInfoComponent } from "@uilib"; }) export class NavComponent implements OnInit, OnDestroy { constructor( - public readonly navService: NavService, private readonly router: Router, public readonly notificationService: NotificationService, private readonly inviteService: InviteService, - public readonly authService: AuthService, - private readonly cdref: ChangeDetectorRef + public readonly authService: AuthService ) {} ngOnInit(): void { @@ -73,14 +71,6 @@ export class NavComponent implements OnInit, OnDestroy { } }); routerEvents$ && this.subscriptions$.push(routerEvents$); - - // Подписка на изменения заголовка страницы - const title$ = this.navService.navTitle.subscribe(title => { - this.title = title; - this.cdref.detectChanges(); - }); - - title$ && this.subscriptions$.push(title$); } ngOnDestroy(): void { @@ -92,7 +82,6 @@ export class NavComponent implements OnInit, OnDestroy { subscriptions$: Subscription[] = []; mobileMenuOpen = false; notificationsOpen = false; - title = ""; /** * Проверка наличия непринятых приглашений diff --git a/projects/social_platform/src/app/office/members/members.component.scss b/projects/social_platform/src/app/office/members/members.component.scss index 66da90707..a6665729d 100644 --- a/projects/social_platform/src/app/office/members/members.component.scss +++ b/projects/social_platform/src/app/office/members/members.component.scss @@ -1,6 +1,8 @@ @use "styles/responsive"; .page { + margin-top: 30px; + &__bar { display: grid; grid-template-columns: 8fr 2fr; diff --git a/projects/social_platform/src/app/office/office.component.html b/projects/social_platform/src/app/office/office.component.html index d975079c1..5c6330611 100644 --- a/projects/social_platform/src/app/office/office.component.html +++ b/projects/social_platform/src/app/office/office.component.html @@ -3,9 +3,6 @@
@if (authService.profile | async; as user) {
-
- -
background-image
- @if (user !== undefined && invites !== undefined) { - - } +
+ + + @if (user !== undefined && invites !== undefined) { + + } +
+
diff --git a/projects/social_platform/src/app/office/office.component.scss b/projects/social_platform/src/app/office/office.component.scss index 6dc3c15a9..49a80684d 100644 --- a/projects/social_platform/src/app/office/office.component.scss +++ b/projects/social_platform/src/app/office/office.component.scss @@ -9,12 +9,18 @@ background-color: var(--white); &__background-image { - position: absolute; - top: 0; - left: 0; - width: 100%; - max-width: 130px; - padding-right: 20px; + display: none; + + @include responsive.apply-desktop { + position: absolute; + top: 0; + left: 0; + display: block; + gap: 30px; + width: 100%; + max-width: 130px; + padding-right: 20px; + } } &__wrapper { @@ -25,7 +31,17 @@ } &__top { - flex-shrink: 0; + display: flex; + align-items: center; + justify-content: space-between; + padding: 30px 5px 30px 17px; + background: linear-gradient(var(--accent), #4d3780); + + @include responsive.apply-desktop { + flex-shrink: 0; + padding: 0; + background: none; + } } &__body { @@ -52,7 +68,7 @@ } @media (max-width: 768px) { - padding: 0 15px; + padding: 0; } } @@ -75,6 +91,10 @@ grid-template-columns: 2fr 10fr; width: 100%; + @include responsive.apply-desktop { + margin-top: 18px; + } + @media (max-width: 992px) { grid-template-columns: 1fr; } diff --git a/projects/social_platform/src/app/office/program/main/main.component.scss b/projects/social_platform/src/app/office/program/main/main.component.scss index 35315428d..86cd8625a 100644 --- a/projects/social_platform/src/app/office/program/main/main.component.scss +++ b/projects/social_platform/src/app/office/program/main/main.component.scss @@ -1,21 +1,37 @@ +@use "styles/responsive"; + .programs { display: grid; - grid-template-columns: 8fr 2fr; + grid-template-columns: 1fr; grid-gap: 24px; + align-items: center; justify-content: space-between; + @include responsive.apply-desktop { + grid-template-columns: 8fr 2fr; + align-items: flex-start; + } + &__list { display: grid; - grid-template-columns: 4fr 4fr; + grid-template-columns: 1fr; grid-gap: 24px; + + @include responsive.apply-desktop { + grid-template-columns: 4fr 4fr; + } } &__filter { - display: flex; + display: none; flex-direction: column; gap: 20px; margin-top: 14px; + @include responsive.apply-desktop { + display: flex; + } + &--block { display: flex; gap: 12px; diff --git a/projects/social_platform/src/app/office/program/main/main.component.ts b/projects/social_platform/src/app/office/program/main/main.component.ts index 7d14e73d3..16c5eeb35 100644 --- a/projects/social_platform/src/app/office/program/main/main.component.ts +++ b/projects/social_platform/src/app/office/program/main/main.component.ts @@ -69,7 +69,6 @@ import { ProgramService } from "../services/program.service"; ], }) export class ProgramMainComponent implements OnInit, OnDestroy { - private readonly navService = inject(NavService); private readonly route = inject(ActivatedRoute); private readonly router = inject(Router); private readonly programService = inject(ProgramService); @@ -90,8 +89,6 @@ export class ProgramMainComponent implements OnInit, OnDestroy { ]); ngOnInit(): void { - this.navService.setNavTitle("Программы"); - const combined$ = combineLatest([ this.route.queryParams.pipe( map(q => ({ filter: this.buildFilterQuery(q), search: q["search"] || "" })), diff --git a/projects/social_platform/src/app/office/program/program.component.scss b/projects/social_platform/src/app/office/program/program.component.scss index ca045dcbe..8e64696b0 100644 --- a/projects/social_platform/src/app/office/program/program.component.scss +++ b/projects/social_platform/src/app/office/program/program.component.scss @@ -1,9 +1,28 @@ @use "styles/responsive"; .page { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; padding-bottom: 100px; + margin: 30px 20px 0; + + @include responsive.apply-desktop { + display: block; + align-items: flex-start; + } &__bar { - margin-bottom: 12px; + width: 100%; + margin-bottom: 24px; + + app-back { + display: none; + + @include responsive.apply-desktop { + display: block; + } + } } } diff --git a/projects/social_platform/src/app/office/program/shared/program-card/program-card.component.html b/projects/social_platform/src/app/office/program/shared/program-card/program-card.component.html index 567644a12..e102cd2b4 100644 --- a/projects/social_platform/src/app/office/program/shared/program-card/program-card.component.html +++ b/projects/social_platform/src/app/office/program/shared/program-card/program-card.component.html @@ -7,7 +7,7 @@
-

{{ program.name }}

+

{{ program.name }}

-

+

{{ program.datetimeStarted | date: "dd.MM.yyyy" }}

-

diff --git a/projects/social_platform/src/app/office/program/shared/program-card/program-card.component.scss b/projects/social_platform/src/app/office/program/shared/program-card/program-card.component.scss index 443705742..f502e2593 100644 --- a/projects/social_platform/src/app/office/program/shared/program-card/program-card.component.scss +++ b/projects/social_platform/src/app/office/program/shared/program-card/program-card.component.scss @@ -7,7 +7,7 @@ display: flex; gap: 20px; align-items: center; - margin-top: 25px; + max-width: 333px; &__photo { position: relative; @@ -24,19 +24,25 @@ &__info { position: relative; z-index: 1; + min-width: 0; padding: 22px; margin-left: -18%; + overflow: hidden; border: 0.5px solid var(--dark-grey); border-radius: var(--rounded-lg); } &__name { + overflow: hidden; color: var(--black); + text-overflow: ellipsis; + white-space: nowrap; } &__dates { display: flex; - gap: 5px; + gap: 2px; + white-space: nowrap; } &__description { @@ -44,10 +50,13 @@ } &__registration { - padding: 2px 2px 2px 30px; + padding: 2px 2px 2px 25px; margin-top: 2px; margin-bottom: 6px; + overflow: hidden; color: var(--white); + text-overflow: ellipsis; + white-space: nowrap; border-radius: var(--rounded-lg); &--actual { diff --git a/projects/social_platform/src/app/office/projects/projects.component.scss b/projects/social_platform/src/app/office/projects/projects.component.scss index 6351846cd..d60f60ce0 100644 --- a/projects/social_platform/src/app/office/projects/projects.component.scss +++ b/projects/social_platform/src/app/office/projects/projects.component.scss @@ -1,6 +1,8 @@ @use "styles/responsive"; .page { + margin-top: 30px; + &__info { display: flex; gap: 20px; diff --git a/projects/social_platform/src/app/office/vacancies/vacancies.component.scss b/projects/social_platform/src/app/office/vacancies/vacancies.component.scss index b9019b352..daa9f858a 100644 --- a/projects/social_platform/src/app/office/vacancies/vacancies.component.scss +++ b/projects/social_platform/src/app/office/vacancies/vacancies.component.scss @@ -1,4 +1,6 @@ .page { + margin-top: 30px; + &__info { display: flex; gap: 20px; diff --git a/projects/social_platform/src/assets/icons/svg/chats.svg b/projects/social_platform/src/assets/icons/svg/chats.svg index abde5e71c..2e929b589 100644 --- a/projects/social_platform/src/assets/icons/svg/chats.svg +++ b/projects/social_platform/src/assets/icons/svg/chats.svg @@ -1,5 +1,5 @@ - + diff --git a/projects/social_platform/src/assets/icons/svg/menu-burger.svg b/projects/social_platform/src/assets/icons/svg/menu-burger.svg index 7d23bcd2e..dcd6e9888 100644 --- a/projects/social_platform/src/assets/icons/svg/menu-burger.svg +++ b/projects/social_platform/src/assets/icons/svg/menu-burger.svg @@ -1,4 +1,4 @@ - + > diff --git a/projects/social_platform/src/assets/icons/svg/menu-cross.svg b/projects/social_platform/src/assets/icons/svg/menu-cross.svg index 02dc703ec..918de6fe5 100644 --- a/projects/social_platform/src/assets/icons/svg/menu-cross.svg +++ b/projects/social_platform/src/assets/icons/svg/menu-cross.svg @@ -1,3 +1,3 @@ - + diff --git a/projects/social_platform/src/assets/icons/symbol/svg/sprite.css.svg b/projects/social_platform/src/assets/icons/symbol/svg/sprite.css.svg index b4a4ac247..27869683b 100644 --- a/projects/social_platform/src/assets/icons/symbol/svg/sprite.css.svg +++ b/projects/social_platform/src/assets/icons/symbol/svg/sprite.css.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.scss b/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.scss index 7bb882fe9..d0652ceab 100644 --- a/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.scss +++ b/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.scss @@ -1,26 +1,41 @@ +@use "styles/responsive"; + .control-panel { position: sticky; top: 15px; - z-index: 1000; + z-index: 10; display: flex; align-items: center; justify-content: flex-end; - margin: 15px auto; &__actions { display: flex; - gap: 30px; + gap: 18px; align-items: center; - margin-right: 35px; + margin-right: 18px; + + @include responsive.apply-desktop { + gap: 30px; + margin-right: 35px; + } } &__action { color: var(--black); cursor: pointer; - opacity: 0.5; - &:hover { - opacity: 0.8; + i { + opacity: 1; + + @include responsive.apply-desktop { + opacity: 0.5; + } + } + + @include responsive.apply-desktop { + &:hover i { + opacity: 0.8; + } } } @@ -45,4 +60,12 @@ border-radius: 100%; } } + + i { + color: var(--light-white); + + @include responsive.apply-desktop { + color: var(--dark-grey); + } + } } diff --git a/projects/ui/src/lib/components/layout/profile-info/profile-info.component.html b/projects/ui/src/lib/components/layout/profile-info/profile-info.component.html index 295c491cb..f9d0e8bc3 100644 --- a/projects/ui/src/lib/components/layout/profile-info/profile-info.component.html +++ b/projects/ui/src/lib/components/layout/profile-info/profile-info.component.html @@ -3,14 +3,7 @@ @if (user) {
- -
- -
- +
} diff --git a/projects/ui/src/lib/components/layout/profile-info/profile-info.component.ts b/projects/ui/src/lib/components/layout/profile-info/profile-info.component.ts index 016f59943..c41808474 100644 --- a/projects/ui/src/lib/components/layout/profile-info/profile-info.component.ts +++ b/projects/ui/src/lib/components/layout/profile-info/profile-info.component.ts @@ -33,6 +33,8 @@ export class ProfileInfoComponent implements OnInit { ngOnInit(): void {} + avatarSize = window.innerWidth < 920 ? 42 : 33; + /** Данные пользователя для отображения */ @Input({ required: true }) user!: User | UserData; diff --git a/projects/ui/src/lib/components/layout/sidebar/sidebar.component.scss b/projects/ui/src/lib/components/layout/sidebar/sidebar.component.scss index 4f2abdb8e..c8010f524 100644 --- a/projects/ui/src/lib/components/layout/sidebar/sidebar.component.scss +++ b/projects/ui/src/lib/components/layout/sidebar/sidebar.component.scss @@ -10,7 +10,7 @@ &__logo { width: 110px; height: 33px; - margin-bottom: 30px; + margin-bottom: 15px; cursor: pointer; } diff --git a/projects/ui/src/lib/components/primitives/back/back.component.scss b/projects/ui/src/lib/components/primitives/back/back.component.scss index 1b2f14b77..77d1c4c44 100644 --- a/projects/ui/src/lib/components/primitives/back/back.component.scss +++ b/projects/ui/src/lib/components/primitives/back/back.component.scss @@ -3,6 +3,7 @@ .back { display: flex; align-items: center; + margin-top: 20px; margin-bottom: 45px; cursor: pointer; From 91ae2663b253581c041620f48baa4e4d90e333de Mon Sep 17 00:00:00 2001 From: Awakich Date: Fri, 3 Apr 2026 23:04:36 +0300 Subject: [PATCH 2/3] add sticky position for office__top --- .../social_platform/src/app/office/office.component.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/projects/social_platform/src/app/office/office.component.scss b/projects/social_platform/src/app/office/office.component.scss index 49a80684d..ba03571c2 100644 --- a/projects/social_platform/src/app/office/office.component.scss +++ b/projects/social_platform/src/app/office/office.component.scss @@ -36,11 +36,16 @@ justify-content: space-between; padding: 30px 5px 30px 17px; background: linear-gradient(var(--accent), #4d3780); + position: sticky; + top: 0; + left: 0; + z-index: 100; @include responsive.apply-desktop { flex-shrink: 0; padding: 0; background: none; + position: static; } } From 74da4c1c932ac750550f86ab0b52aa8c533f7bdb Mon Sep 17 00:00:00 2001 From: Awakich Date: Sat, 4 Apr 2026 18:02:51 +0300 Subject: [PATCH 3/3] fix static for office__top --- .../src/app/office/office.component.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/projects/social_platform/src/app/office/office.component.scss b/projects/social_platform/src/app/office/office.component.scss index ba03571c2..f1e93123b 100644 --- a/projects/social_platform/src/app/office/office.component.scss +++ b/projects/social_platform/src/app/office/office.component.scss @@ -31,21 +31,21 @@ } &__top { + position: sticky; + top: 0; + left: 0; + z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 30px 5px 30px 17px; background: linear-gradient(var(--accent), #4d3780); - position: sticky; - top: 0; - left: 0; - z-index: 100; @include responsive.apply-desktop { + position: static; flex-shrink: 0; padding: 0; background: none; - position: static; } }