---
tags: N108 Component
---
# MemberTopBar.jsx
- Member 切換流程圖 *(原本 component 名稱把 Member 去掉)*
- 可以配合 PPT 14頁

digraph Pageswitch {
                nodesep=0.5
                node [color=orange, fontsize=22, shape=box, style=bold]
                edge [color=RosyBrown, style=dashed]
                Profile->{TopBar IMG_Name Content}
                Content->{info LearnHistory WatchHistory NotelistHistory}
                info->{infobtn}
                NotelistHistory->{NoteHistory}
                {rank=same;UploadImg IMG_Name}
                TopBar [color=orange, fontsize=22, shape=box,style=filled, fillcolor=Bisque]
}

## import 資料
| 名稱 | 類型 | 描述 | 來源 |
| :------ | :----------- | :----------- | :-- |
| NavLink | <font color='RosyBrown'>external component</font> | Route | react-router-dom |

## render
### props (上層傳入) 參數介紹
| 名稱 | 類型 | 描述 |
| :------ | :----------- | :----------- |
| `mode` | <font color='orange'>string</font> | Member content 的三種功能，會傳送給上層的 MemberProfile.jsx 的 queryString，三種功能為 profile、history、notehistory |
| `topbarshowIMG` | <font color='blue'>bool</font> | 在 Membertopbar 顯示小頭貼跟個人名稱，true 為顯示中；false 為不顯示 | false |
| `userimg` | <font color='orange'>string</font> | API 傳入的頭貼路徑 |
| `info` | <font color='Gold'>json value</font> | API 傳入的個人 ID、名稱、SSO來源、Type|
### return
- 當 Member_IMG_Name.jsx 的**滾輪**效果觸發，會顯示小頭貼跟姓名在MemberTopBar 上
- 
- login 小頭貼
- 分為 2 種情況
1. 有頭貼顯示頭貼 `{userimg}`
2. 沒頭貼顯示 SVG

<div className="blank-profile">
    {
        topbarshowIMG &&
        <div className="profile-containter dis-flex-row">
            <div className="imgicon dis-center">
                {userimg.length ?
                    <img src={userimg} alt="" />
                    :
                    <svg viewBox="0 0 24 24" className="yt-icon2 icon-member">
                        <g className="yt-icon2">
                            <path d="M12,0 C18.62375,0 24,5.37625 24,12 C24,18.62375 18.62375,24 12,24 C5.37625,24 0,18.62375 0,12 C0,5.37625 5.37625,0 12,0 Z M12,10.63625 C13.66,10.63625 15,9.29625 15,7.63625 C15,5.97625 13.66,4.63625 12,4.63625 C10.34,4.63625 9,5.97625 9,7.63625 C9,9.29625 10.34,10.63625 12,10.63625 Z M12,12.40875 C8.33375,12.40875 5.455,14.18125 5.455,15.8175 C6.84125,17.95 9.26875,19.3625 12,19.3625 C14.73125,19.3625 17.15875,17.95 18.545,15.8175 C18.545,14.18125 15.66625,12.40875 12,12.40875 Z" className="yt-icon2"></path>
                        </g>
                    </svg>
                }
            </div>
            <div className="dis-center">
                {info.CName}
            </div>
        </div>
    }
</div>

- 三種 NavLink 選擇，對應 mode 三種功能
- 藉由上層 MemberProfile.jsx 用 queryString 抓取，傳入底層component
- 

<div className="dis-space-between profile_sidebar">
    <div className="dis-flex">
        <NavLink activeClassName={`${mode == "profile" && "underlinenav-item-selected"}`} className="underlinenav-item" to="/Member?type=profile"><i className="fa fa-user"></i>&ensp;個人資料</NavLink>
        <NavLink activeClassName={`${mode == "history" && "underlinenav-item-selected"}`} className="underlinenav-item" to="/Member?type=history"><i className="fa fa-history"></i>&ensp;觀看紀錄</NavLink>
        <NavLink activeClassName={`${mode == "notehistory" && "underlinenav-item-selected"}`} className="underlinenav-item" to="/Member?type=notehistory"><i className="fas fa-book-open"></i>&ensp;筆記紀錄</NavLink>
    </div>
</div>

[回上層 MemberProfile.jsx](https://hackmd.io/_F5o4DuORuuuyeXsJI7XSw?view)