diff --git a/src/pages/AboutUsPage/view/AboutUsPageView.ts b/src/pages/AboutUsPage/view/AboutUsPageView.ts index 267b31e5..b64ceb4c 100644 --- a/src/pages/AboutUsPage/view/AboutUsPageView.ts +++ b/src/pages/AboutUsPage/view/AboutUsPageView.ts @@ -1,7 +1,11 @@ +import LinkModel from '@/shared/Link/model/LinkModel.ts'; import getStore from '@/shared/Store/Store.ts'; import observeStore, { selectCurrentLanguage } from '@/shared/Store/observer.ts'; +import { LINK_DETAILS } from '@/shared/constants/links.ts'; import { PAGE_DESCRIPTION } from '@/shared/constants/pages.ts'; +import SVG_DETAILS from '@/shared/constants/svg.ts'; import createBaseElement from '@/shared/utils/createBaseElement.ts'; +import createSVGUse from '@/shared/utils/createSVGUse.ts'; import styles from './aboutUsPageView.module.scss'; @@ -34,12 +38,27 @@ class AboutUsPageView { tag: 'div', }); - this.page.append(this.createTitle(), this.cardsList); + this.page.append(this.createTitle(), this.cardsList, this.createRSSLogo().getHTML()); this.parent.append(this.page); return this.page; } + private createRSSLogo(): LinkModel { + const logo = new LinkModel({ + attrs: { + href: 'https://rs.school', + target: LINK_DETAILS.BLANK, + }, + classes: [styles.logo], + }); + + const svg = document.createElementNS(SVG_DETAILS.SVG_URL, 'svg'); + svg.append(createSVGUse(SVG_DETAILS.RSS_LOGO)); + logo.getHTML().append(svg); + return logo; + } + private createTitle(): HTMLHeadingElement { const title = createBaseElement({ cssClasses: [styles.title], diff --git a/src/pages/AboutUsPage/view/aboutUsPageView.module.scss b/src/pages/AboutUsPage/view/aboutUsPageView.module.scss index 04c5cdf3..36211330 100644 --- a/src/pages/AboutUsPage/view/aboutUsPageView.module.scss +++ b/src/pages/AboutUsPage/view/aboutUsPageView.module.scss @@ -33,3 +33,28 @@ justify-content: center; } } + +.logo { + display: flex; + margin: 0 auto; + margin-top: var(--small-offset); + width: max-content; + + svg { + width: 11rem; + height: 4rem; + transition: fill 0.1s; + + use { + transition: fill 0.1s; + } + } + + @media (hover: hover) { + &:hover { + svg { + fill: var(--steam-green-1200); + } + } + } +} diff --git a/src/shared/constants/svg.ts b/src/shared/constants/svg.ts index a01d2a65..71439b9d 100644 --- a/src/shared/constants/svg.ts +++ b/src/shared/constants/svg.ts @@ -19,6 +19,7 @@ const SVG_DETAILS = { NOT_FOUND: 'notFound', OPEN_EYE: 'openEye', PROFILE: 'userCircle', + RSS_LOGO: 'rssLogo', STAR: 'star', SVG_URL: 'http://www.w3.org/2000/svg', diff --git a/src/shared/img/svg/rssLogo.svg b/src/shared/img/svg/rssLogo.svg new file mode 100644 index 00000000..618095e2 --- /dev/null +++ b/src/shared/img/svg/rssLogo.svg @@ -0,0 +1 @@ + \ No newline at end of file