hw5

src/s1-main/App.tsx

@@ -1,21 +1,22 @@
 import React from 'react'
 import s from './App.module.css'
 import HW1 from '../s2-homeworks/hw01/HW1'
-import HW2 from '../s2-homeworks/hw02/HW2'
-import HW3 from '../s2-homeworks/hw03/HW3'
-import HW4 from '../s2-homeworks/hw04/HW4'
+// import HW2 from '../s2-homeworks/hw02/HW2'
+// import HW3 from '../s2-homeworks/hw03/HW3'
+// import HW4 from '../s2-homeworks/hw04/HW4'
+import HW5 from '../s2-homeworks/hw05/HW5'
 
 const App = () => {
     return (
         <div className={s.App}>
             <div>react homeworks:</div>
 
-            <HW1/>
-            <HW2/>
-            <HW3/>
-            <HW4/>
-
+            {/*<HW1/>*/}
+            {/*<HW2/>*/}
+            {/*<HW3/>*/}
+            {/*<HW4/>*/}
 
+            <HW5/>
         </div>
     )
 }

src/s2-homeworks/hw04/Stand.tsx

@@ -11,12 +11,12 @@ const Stand = () => {
     const [stateForAllCheckboxes, setChecked] = useState(false)
 
     return (
-        <div className={s.stand}>
+        <div id={'hw4-stand'} className={s.stand}>
             <div className={s.inputs}>
                 инпут с ошибкой:
                 <div>
                     <SuperInputText
-                        id={'super-input-with-error'}
+                        id={'hw4-super-input-with-error'}
                         value={stateForAllInputs}
                         onChangeText={setValue}
                         error={error}
@@ -29,7 +29,7 @@ const Stand = () => {
                 совместим со старым кодом
                 <div>
                     <SuperInputText
-                        id={'super-input-like-old'}
+                        id={'hw4-super-input-like-old'}
                         value={stateForAllInputs}
                         onChange={e => setValue(e.currentTarget.value)}
                     />
@@ -39,15 +39,15 @@ const Stand = () => {
             <div className={s.buttons}>
                 обычная кнопка:
                 <div>
-                    <SuperButton id={'super-button-default'}>default</SuperButton>
+                    <SuperButton id={'hw4-super-button-default'}>default</SuperButton>
                 </div>
                 красная кнопка:
                 <div>
-                    <SuperButton id={'super-button-red'} xType={'red'}>red</SuperButton>
+                    <SuperButton id={'hw4-super-button-red'} xType={'red'}>red</SuperButton>
                 </div>
                 задизэйбленная кнопка:
                 <div>
-                    <SuperButton id={'super-button-disabled'} xType={'red'} disabled>disabled</SuperButton>
+                    <SuperButton id={'hw4-super-button-disabled'} xType={'red'} disabled>disabled</SuperButton>
                 </div>
 
             </div>
@@ -56,7 +56,7 @@ const Stand = () => {
                 чекбокс с текстом:
                 <div>
                     <SuperCheckbox
-                        id={'super-checkbox-with-text'}
+                        id={'hw4-super-checkbox-with-text'}
                         checked={stateForAllCheckboxes}
                         onChangeChecked={setChecked}
                     >
@@ -66,7 +66,7 @@ const Stand = () => {
                 совместим со старым кодом
                 <div>
                     <SuperCheckbox
-                        id={'super-checkbox-like-old'}
+                        id={'hw4-super-checkbox-like-old'}
                         checked={stateForAllCheckboxes}
                         onChange={e => setChecked(e.currentTarget.checked)}
                     />

src/s2-homeworks/hw05/HW5.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import Header from './Header'
+import Pages from './Pages'
+import {HashRouter} from 'react-router-dom'
+
+function HW5() {
+    return (
+        <div>
+            {/*в gh-pages лучше работает HashRouter*/}
+            <HashRouter>
+
+            <Header/>
+
+            <Pages/>
+
+            </HashRouter>
+        </div>
+    )
+}
+
+export default HW5

src/s2-homeworks/hw05/Header.module.css

@@ -0,0 +1,39 @@
+.link {
+    text-decoration: none;
+    color: #7af;
+    margin: 10px;
+}
+
+.link:hover {
+    color: #c9f;
+}
+
+.active {
+    color: #5ff;
+}
+
+.burgerMenu {
+    width: 21px;
+    height: 21px;
+
+    margin: 10px;
+
+    background: #99ff99;
+}
+
+.header {
+    display: flex;
+    justify-content: flex-end;
+
+    width: 280px;
+}
+
+.showMenu {
+    transition-duration: 500ms;
+    transform: translate(0);
+}
+
+.hideMenu {
+    transition-duration: 500ms;
+    transform: translate(-220px);
+}

src/s2-homeworks/hw05/Header.tsx

@@ -0,0 +1,43 @@
+import React, {useState} from 'react'
+import {NavLink} from 'react-router-dom'
+import {PATH} from './Pages'
+import s from './Header.module.css'
+
+function Header() {
+    const [isShow, setShow] = useState(false)
+
+    // hw5-menu изначально отсутствует, при нажатии на бургер - появляется, при повторном нажатии исчезает
+    return (
+        <div id={'hw5-header'} className={s.header + ' ' + (isShow ? s.showMenu : s.hideMenu)}>
+            {isShow && (
+                <div id={'hw5-menu'} className={s.menu}>
+                    <NavLink
+                        id={'hw5-pre-junior-link'}
+                        to={PATH.PRE_JUNIOR}
+                        className={({isActive}) => isActive ? s.active : s.link} // делает студент
+                    >
+                        pre-junior
+                    </NavLink>
+                    <NavLink
+                        id={'hw5-junior-link'}
+                        to={PATH.JUNIOR}
+                        className={({isActive}) => isActive ? s.active : s.link} // делает студент
+                    >
+                        junior
+                    </NavLink>
+                    <NavLink
+                        id={'hw5-junior-plus-link'}
+                        to={PATH.JUNIOR_PLUS}
+                        className={({isActive}) => isActive ? s.active : s.link} // делает студент
+                    >
+                        junior+
+                    </NavLink>
+                </div>
+            )}
+
+            <div id={'hw5-burger-menu'} className={s.burgerMenu} onClick={() => setShow(!isShow)}/>
+        </div>
+    )
+}
+
+export default Header

src/s2-homeworks/hw05/Pages.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import {Routes, Route, Navigate} from 'react-router-dom'
+import Error404 from './pages/Error404'
+import PreJunior from './pages/PreJunior'
+import Junior from './pages/Junior'
+import JuniorPlus from './pages/JuniorPlus'
+
+export const PATH = {
+    PRE_JUNIOR: '/pre-junior',
+    JUNIOR: '/junior',
+    JUNIOR_PLUS: '/junior-plus',
+}
+
+function Pages() {
+    return (
+        <div>
+            {/*Routes выбирает первый подходящий роут*/}
+            <Routes>
+
+                {/*роутинг будут писать студенты*/}
+                {/*в начале мы попадаем на страницу '/' и переходим сразу на страницу PRE_JUNIOR*/}
+                <Route path={'/'} element={<Navigate to={PATH.PRE_JUNIOR}/>}/>
+
+                <Route path={PATH.PRE_JUNIOR} element={<PreJunior/>}/>
+                <Route path={PATH.JUNIOR} element={<Junior/>}/>
+                <Route path={PATH.JUNIOR_PLUS} element={<JuniorPlus/>}/>
+
+                {/*он отрисуется если пользователь захочет попасть на несуществующую страницу*/}
+                <Route path={'/*'} element={<Error404/>}/>
+
+            </Routes>
+        </div>
+    )
+}
+
+export default Pages

src/s2-homeworks/hw05/pages/Error404.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+const Error404 = () => {
+    return (
+        <div id={'page-404'}>
+            <div>404</div>
+            <div>Page not found!</div>
+            <div>—ฅ/ᐠ.̫ .ᐟ\ฅ—</div>
+        </div>
+    )
+}
+
+export default Error404

src/s2-homeworks/hw05/pages/Junior.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+function Junior() {
+    return (
+        <div id={'hw5-page-junior'}>
+            junior page
+            {/*<HW6/>*/}
+            {/*<HW7/>*/}
+            {/*<HW8/>*/}
+            {/*<HW9/>*/}
+        </div>
+    )
+}
+
+export default Junior

src/s2-homeworks/hw05/pages/JuniorPlus.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+function JuniorPlus() {
+    return (
+        <div id={'hw5-page-junior-plus'}>
+            junior plus page
+            {/*<HW10/>*/}
+            {/*<HW11/>*/}
+            {/*<HW12/>*/}
+            {/*<HW13/>*/}
+        </div>
+    )
+}
+
+export default JuniorPlus

src/s2-homeworks/hw05/pages/PreJunior.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import HW1 from '../../hw01/HW1'
+import HW2 from '../../hw02/HW2'
+import HW3 from '../../hw03/HW3'
+import HW4 from '../../hw04/HW4'
+
+function PreJunior() {
+    return (
+        <div id={'hw5-page-pre-junior'}>
+            pre junior page
+            <HW1/>
+            <HW2/>
+            <HW3/>
+            <HW4/>
+        </div>
+    )
+}
+
+export default PreJunior