diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index 68d2e54..e050024 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -20,7 +20,7 @@ const Footer = () => {
2023
-
+
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index f4991a7..28a8fe5 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -11,24 +11,30 @@ import ROUTES from '@shared/constants/routes';
import viewTransition from '@shared/lib/helpers/viewTransition';
import useScreen from '@shared/lib/hooks/useScreen';
+import LangSwitcher from './ui/LangSwitcher';
+
const Header = () => {
const [isDocsShown, setIsDocsShown] = useState(false);
- const { translation } = useLanguage();
+ const { translation, language, changeLanguage } = useLanguage();
const { pathname } = useLocation();
const isSettings = pathname.slice(1) === ROUTES.SETTINGS;
const navigate = useNavigate();
const isMobile = useScreen() === 'mobile';
- const { logOut } = useAuth();
+ const { logOut, isAuth } = useAuth();
- const docsTooltip = translation.mainLayout.header.tooltips.docs;
+ const { docsTip, logOutTip, langTip, homeTip } = translation.mainLayout.header.tooltips;
function handleClick() {
viewTransition(() => navigate(-1));
}
+ const isDocsToShow = isAuth;
+ const isLogOutToShow = isAuth;
+ const isHomeToShow = pathname !== '/';
+
return (
<>
-
+
{isSettings && !isMobile ? (
)}
-
- setIsDocsShown((prev) => !prev)}
- data-tooltip={docsTooltip}
- data-testid="show_docs"
- className="tooltipElem"
- >
- article
-
+
+ {isHomeToShow && (
+ navigate(ROUTES.WELCOME_PAGE)}>
+ home
+
+ )}
+ {isDocsToShow && (
+ setIsDocsShown((prev) => !prev)}
+ data-tooltip={docsTip}
+ data-testid="show_docs"
+ className="tooltipElem"
+ >
+ article
+
+ )}
+ {isLogOutToShow && (
+ logOut()} className="tooltipElem" data-tooltip={logOutTip}>
+ door_open
+
+ )}
>
diff --git a/src/components/Header/ui/LangSwitcher.tsx b/src/components/Header/ui/LangSwitcher.tsx
new file mode 100644
index 0000000..b32c751
--- /dev/null
+++ b/src/components/Header/ui/LangSwitcher.tsx
@@ -0,0 +1,19 @@
+import { FC } from 'react';
+
+type PropsType = {
+ language: string;
+ changeLanguage: (lang: 'en' | 'ru') => void;
+ tip: string;
+};
+
+const LangSwitcher: FC = ({ language, changeLanguage, tip }) => {
+ const text = language === 'en' ? 'Eng' : 'Ru';
+ const switchLang = language === 'en' ? 'ru' : 'en';
+ return (
+
+ );
+};
+
+export default LangSwitcher;
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 3591241..df4b9c5 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -95,7 +95,10 @@ const en = {
mainLayout: {
header: {
tooltips: {
- docs: 'Show docs',
+ docsTip: 'Show docs',
+ logOutTip: 'Log out',
+ langTip: 'Change lang',
+ homeTip: 'Home',
},
},
},
diff --git a/src/locales/ru.ts b/src/locales/ru.ts
index e94f5ad..4ed2366 100644
--- a/src/locales/ru.ts
+++ b/src/locales/ru.ts
@@ -96,7 +96,10 @@ const ru = {
mainLayout: {
header: {
tooltips: {
- docs: 'Документация',
+ docsTip: 'Документация',
+ logOutTip: 'Выйти',
+ langTip: 'Сменить язык',
+ homeTip: 'Домой',
},
},
},
diff --git a/src/shared/ui/FilledButton.tsx b/src/shared/ui/FilledButton.tsx
new file mode 100644
index 0000000..a1dc64d
--- /dev/null
+++ b/src/shared/ui/FilledButton.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { createComponent } from '@lit/react';
+import { MdFilledButton } from '@material/web/button/filled-button';
+
+const FilledButton = createComponent({
+ react: React,
+ tagName: 'md-filled-button',
+ elementClass: MdFilledButton,
+});
+
+export default FilledButton;
diff --git a/src/test/docsComponent/DocsComp.test.tsx b/src/test/docsComponent/DocsComp.test.tsx
index 0d66710..83059f0 100644
--- a/src/test/docsComponent/DocsComp.test.tsx
+++ b/src/test/docsComponent/DocsComp.test.tsx
@@ -2,9 +2,11 @@ import { act, fireEvent, render, screen, waitForElementToBeRemoved } from '@test
import { describe, expect, it } from 'vitest';
import App from '@/app/App';
+import { prepareAuthCookie } from '@/shared/helpers/cookieHandlers';
describe('Testing for docs component', () => {
it('Should render docs components after clicking on show docs btn', async () => {
+ document.cookie = prepareAuthCookie('test@gmail.com');
render();
const showDocsBtn = screen.getByTestId('show_docs');
expect(screen.queryByTestId('overlay')).toBeNull();