78 行
4.1 KiB
JavaScript
78 行
4.1 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import { Link } from 'react-router-dom'
|
|
|
|
export default function Side() {
|
|
const [selected, setSelected] = useState('');
|
|
|
|
return (
|
|
<div className="l-side">
|
|
<div className="l-side-logo">
|
|
<a href=""><img src="../../../assets/img/common/logo.svg" alt="ロゴ" /></a>
|
|
</div>
|
|
<nav className="mypage-nav">
|
|
<ul className="mypage-nav-list">
|
|
<li
|
|
className={ (selected == 'meeting' || (selected == '' && document.getElementById('p_router').value == 'meeting')) ? "mypage-nav-list__item nav-active" : "mypage-nav-list__item" }
|
|
onClick={e => {
|
|
e.preventDefault();
|
|
setSelected('meeting');
|
|
}}>
|
|
<Link className='mypage-nav-list__link' to='/p-account/meeting'>
|
|
<i className="icon meeting"></i>
|
|
<span>ミーティング</span>
|
|
</Link>
|
|
</li>
|
|
<li
|
|
className={ (selected == 'favorite' || (selected == '' && document.getElementById('p_router').value == 'favorite')) ? "mypage-nav-list__item -favorite nav-active" : "mypage-nav-list__item -favorite" }
|
|
onClick={e => {
|
|
e.preventDefault();
|
|
setSelected('favorite');
|
|
}}>
|
|
<Link className='mypage-nav-list__link' to='/p-account/favorite'>
|
|
<i className="icon star"></i>
|
|
</Link>
|
|
</li>
|
|
<li className={ (selected == 'search' || (selected == '' && document.getElementById('p_router').value == 'search')) ? "mypage-nav-list__item nav-active" : "mypage-nav-list__item" }
|
|
onClick={e => {
|
|
e.preventDefault();
|
|
setSelected('search');
|
|
}}>
|
|
<Link className='mypage-nav-list__link' to='/p-account/search'>
|
|
<i className="icon search"></i>
|
|
<span>検索</span>
|
|
</Link>
|
|
</li>
|
|
<li className={ (selected == 'child' || (selected == '' && document.getElementById('p_router').value == 'child')) ? "mypage-nav-list__item nav-active" : "mypage-nav-list__item" }
|
|
onClick={e => {
|
|
e.preventDefault();
|
|
setSelected('child');
|
|
}}>
|
|
<Link className='mypage-nav-list__link' to='/p-account/child'>
|
|
<i className="icon parents"></i>
|
|
<span>子情報</span>
|
|
</Link>
|
|
</li>
|
|
<li className={ (selected == 'profile' || (selected == '' && document.getElementById('p_router').value == 'profile')) ? "mypage-nav-list__item nav-active" : "mypage-nav-list__item" }
|
|
onClick={e => {
|
|
e.preventDefault();
|
|
setSelected('profile');
|
|
}}>
|
|
<Link className='user-icon mypage-nav-list__link' to='/p-account/profile'>
|
|
<figure>
|
|
<div className="prof-wrap">
|
|
<img src="/assets/img/avatar/avatar-sample01@2x.png" alt="" />
|
|
</div>
|
|
</figure>
|
|
<span>プロフィール</span>
|
|
</Link>
|
|
</li>
|
|
<li className="mypage-nav-list__item -logout">
|
|
<a href="/login/p-account" className="mypage-nav-list__link">
|
|
<i className="icon log-out"></i><span>ログアウト</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
);
|
|
} |