2021-12-30 13:57:05 +09:00
|
|
|
import React, { useState } from 'react';
|
2022-01-06 05:43:21 +09:00
|
|
|
import { Link } from 'react-router-dom';
|
|
|
|
import { useCookies } from 'react-cookie';
|
2021-10-01 17:45:39 +09:00
|
|
|
|
2021-10-31 12:26:19 +09:00
|
|
|
export default function ParentSide() {
|
2021-10-05 20:28:19 +09:00
|
|
|
const [selected, setSelected] = useState('');
|
2022-01-06 05:43:21 +09:00
|
|
|
const [cookies, setCookie] = useCookies(['user']);
|
2021-11-13 02:52:21 +09:00
|
|
|
|
|
|
|
const father_image = document.getElementById('father_image').value;
|
|
|
|
|
2021-12-30 13:57:05 +09:00
|
|
|
const handleLogout = async () => {
|
|
|
|
await axios.get('/p-account/logout')
|
2022-01-06 05:43:21 +09:00
|
|
|
.then(() => {
|
|
|
|
setCookie('logged', null);
|
2022-01-06 05:50:17 +09:00
|
|
|
window.location.href = '/p-account/login';
|
2022-01-06 05:43:21 +09:00
|
|
|
})
|
2021-11-10 22:28:37 +09:00
|
|
|
}
|
2021-11-14 22:13:34 +09:00
|
|
|
|
|
|
|
const handleSelected = (id) => {
|
|
|
|
var navbar_list = document.getElementsByClassName("mypage-nav-list__item");
|
|
|
|
for(let i=0; i<navbar_list.length; i++)
|
|
|
|
navbar_list[i].classList.remove('nav-active');
|
|
|
|
document.getElementsByClassName(id)[0].classList.add('nav-active');
|
|
|
|
setSelected(id);
|
|
|
|
}
|
2021-12-17 10:02:47 +09:00
|
|
|
|
2021-10-05 00:35:47 +09:00
|
|
|
return (
|
|
|
|
<div className="l-side">
|
|
|
|
<div className="l-side-logo">
|
2021-12-16 05:29:15 +09:00
|
|
|
<a href=""><img src="/assets/img/common/logo_w.svg" alt="ロゴ" /></a>
|
2021-10-05 00:35:47 +09:00
|
|
|
</div>
|
|
|
|
<nav className="mypage-nav">
|
2021-10-05 20:28:19 +09:00
|
|
|
<ul className="mypage-nav-list">
|
2021-11-14 22:13:34 +09:00
|
|
|
<li className={`mypage-nav-list__item -meeting ${selected == '' && document.getElementById('p_router').value == 'meeting' && 'nav-active'}`}
|
|
|
|
onClick={e => handleSelected("-meeting")}>
|
2021-10-05 00:35:47 +09:00
|
|
|
<Link className='mypage-nav-list__link' to='/p-account/meeting'>
|
|
|
|
<i className="icon meeting"></i>
|
|
|
|
<span>ミーティング</span>
|
|
|
|
</Link>
|
2021-10-01 17:45:39 +09:00
|
|
|
</li>
|
2021-11-14 22:13:34 +09:00
|
|
|
<li className={`mypage-nav-list__item -favorite ${selected == '' && document.getElementById('p_router').value == 'favorite' && 'nav-active'}`}
|
|
|
|
onClick={e => handleSelected("-favorite")}>
|
2021-10-05 00:35:47 +09:00
|
|
|
<Link className='mypage-nav-list__link' to='/p-account/favorite'>
|
2021-10-01 17:45:39 +09:00
|
|
|
<i className="icon star"></i>
|
2021-11-14 22:13:34 +09:00
|
|
|
<span>お気に入り</span>
|
2021-10-05 00:35:47 +09:00
|
|
|
</Link>
|
2021-10-01 17:45:39 +09:00
|
|
|
</li>
|
2021-11-14 22:13:34 +09:00
|
|
|
<li className={`mypage-nav-list__item -search ${selected == '' && document.getElementById('p_router').value == 'search' && 'nav-active'}`}
|
|
|
|
onClick={e => handleSelected("-search")}>
|
2021-10-05 00:35:47 +09:00
|
|
|
<Link className='mypage-nav-list__link' to='/p-account/search'>
|
|
|
|
<i className="icon search"></i>
|
|
|
|
<span>検索</span>
|
|
|
|
</Link>
|
2021-10-01 17:45:39 +09:00
|
|
|
</li>
|
2021-11-14 22:13:34 +09:00
|
|
|
<li className={`mypage-nav-list__item -child ${selected == '' && document.getElementById('p_router').value == 'child' && 'nav-active'}`}
|
|
|
|
onClick={e => handleSelected("-child")}>
|
2021-10-05 00:35:47 +09:00
|
|
|
<Link className='mypage-nav-list__link' to='/p-account/child'>
|
|
|
|
<i className="icon parents"></i>
|
|
|
|
<span>子情報</span>
|
|
|
|
</Link>
|
2021-10-01 17:45:39 +09:00
|
|
|
</li>
|
2021-11-14 22:13:34 +09:00
|
|
|
<li className={`mypage-nav-list__item -profile ${selected == '' && document.getElementById('p_router').value == 'profile' && 'nav-active'}`}
|
|
|
|
onClick={e => handleSelected("-profile")}>
|
2021-10-05 00:35:47 +09:00
|
|
|
<Link className='user-icon mypage-nav-list__link' to='/p-account/profile'>
|
|
|
|
<figure>
|
|
|
|
<div className="prof-wrap">
|
2021-11-13 02:52:21 +09:00
|
|
|
<img src={father_image} alt="image" />
|
2021-10-05 00:35:47 +09:00
|
|
|
</div>
|
|
|
|
</figure>
|
|
|
|
<span>プロフィール</span>
|
|
|
|
</Link>
|
2021-10-01 17:45:39 +09:00
|
|
|
</li>
|
2021-11-14 22:13:34 +09:00
|
|
|
<li className={`mypage-nav-list__item -logout ${(selected == '-logout') && "nav-active"}`}
|
|
|
|
onClick={e => handleSelected("-logout")}>
|
2021-11-10 22:28:37 +09:00
|
|
|
<a className="mypage-nav-list__link" onClick={handleLogout}>
|
2021-10-01 17:45:39 +09:00
|
|
|
<i className="icon log-out"></i><span>ログアウト</span>
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
2021-10-05 00:35:47 +09:00
|
|
|
</nav>
|
|
|
|
</div>
|
|
|
|
);
|
2021-12-17 10:02:47 +09:00
|
|
|
}
|