diff --git a/src/app/components/main-layout/main-layout.component.scss b/src/app/components/main-layout/main-layout.component.scss index 0ea5de8..11457ad 100644 --- a/src/app/components/main-layout/main-layout.component.scss +++ b/src/app/components/main-layout/main-layout.component.scss @@ -8,7 +8,6 @@ app-header { left: 232px; right: 0; height: 96px; - width: 100%; background-color: var(--white); z-index: 1; } @@ -46,6 +45,16 @@ app-sidebar-mobile { display: none; } +/* Media queries */ + +@media (max-width: 1440px) { + app-header, + app-sidebar, + .main-content { + left: 60px; + } +} + @media screen and (max-width: 910px) { .main-content { padding: 32px; diff --git a/src/app/shared/components/header/header.component.scss b/src/app/shared/components/header/header.component.scss index 80c0d3e..77d9e32 100644 --- a/src/app/shared/components/header/header.component.scss +++ b/src/app/shared/components/header/header.component.scss @@ -2,7 +2,6 @@ display: flex; justify-content: space-between; align-items: center; - width: calc(100% - 232px); height: 93px; box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1); } diff --git a/src/app/shared/components/sidebar/sidebar.component.html b/src/app/shared/components/sidebar/sidebar.component.html index 63efb67..795c1ce 100644 --- a/src/app/shared/components/sidebar/sidebar.component.html +++ b/src/app/shared/components/sidebar/sidebar.component.html @@ -59,7 +59,8 @@ 'active-link': currentPath === 'privacy-policy' }" > - {{ "sidebar.privacyPolicy" | translate }} + privacy-policy + {{ "sidebar.privacyPolicy" | translate }} - {{ "sidebar.legalNotice" | translate }} + legal-notice + {{ "sidebar.legalNotice" | translate }} - {{ "sidebar.logout" | translate }} + logout{{ + "sidebar.logout" | translate + }} diff --git a/src/app/shared/components/sidebar/sidebar.component.scss b/src/app/shared/components/sidebar/sidebar.component.scss index 47ce54c..13b9da6 100644 --- a/src/app/shared/components/sidebar/sidebar.component.scss +++ b/src/app/shared/components/sidebar/sidebar.component.scss @@ -27,19 +27,23 @@ nav { padding-left: 56px; height: 46px; cursor: pointer; + img { width: 30px; height: 30px; padding-right: 8px; } + span { text-align: center; font-size: 16px; color: var(--light-gray); } + &:hover { background-color: var(--very-dark-blue); } + &:active { background-color: var(--very-dark-blue); } @@ -54,6 +58,7 @@ nav { align-items: center; flex-direction: column; margin-bottom: 30px; + a { justify-content: center; width: fit-content; @@ -64,6 +69,19 @@ nav { text-decoration: none; color: var(--light-gray); cursor: pointer; + + img { + display: none; + width: 30px; + height: 30px; + cursor: pointer; + + &:hover { + filter: brightness(0) saturate(100%) invert(75%) sepia(51%) + saturate(5547%) hue-rotate(164deg) brightness(97%) contrast(82%); + } + } + &:hover { color: var(--light-blue); } @@ -75,5 +93,48 @@ nav { } .active-link { - color: var(--light-blue) !important; + cursor: auto !important; + filter: brightness(0) saturate(100%) invert(75%) sepia(51%) saturate(5547%) + hue-rotate(164deg) brightness(97%) contrast(82%) !important; +} + +/* Media queries */ + +@media (max-width: 1440px) { + section, + nav { + width: 60px; + } + + .logo { + width: 40px; + height: 73px; + margin: 10px; + } + + .nav-links-inner { + justify-content: center; + width: 100%; + padding: 6px 0; + + img { + padding-right: 0; + } + + span { + display: none; + } + } + + .reference { + a { + img { + display: block; + } + + span { + display: none; + } + } + } } diff --git a/src/assets/img/sidebar/legal-notice.svg b/src/assets/img/sidebar/legal-notice.svg new file mode 100644 index 0000000..f6c68d6 --- /dev/null +++ b/src/assets/img/sidebar/legal-notice.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/img/sidebar/logout.svg b/src/assets/img/sidebar/logout.svg new file mode 100644 index 0000000..5c0e49f --- /dev/null +++ b/src/assets/img/sidebar/logout.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/img/sidebar/privacy-policy.svg b/src/assets/img/sidebar/privacy-policy.svg new file mode 100644 index 0000000..e2af45a --- /dev/null +++ b/src/assets/img/sidebar/privacy-policy.svg @@ -0,0 +1 @@ + \ No newline at end of file