b4cd0208e6
## 概要 [Task: 1468](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/OMDSDictation/_sprints/taskboard/OMDSDictation%20%E3%83%81%E3%83%BC%E3%83%A0/OMDSDictation/%E3%82%B9%E3%83%97%E3%83%AA%E3%83%B3%E3%83%88%204-2?workitem=1468) - ヘッダーcomponentを作成 - ログイン前とログイン後でヘッダーが異なるので各ページに配置するようにした - 呼び出すcomponentは一つとして作成し、内部でヘッダーを切り替えるようにした - フッターcomponentを作成 - ログイン前とログイン後でページのデザインが異なるのでヘッダー同様、各ページに配置することにした ## レビューポイント - ヘッダーの作成方法に問題はないか ## UIの変更 - https://ndstokyo.sharepoint.com/:f:/r/sites/Piranha/Shared%20Documents/General/OMDS/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88/Task1468?csf=1&web=1&e=K2tFjK ## 動作確認状況 - 型チェック - ローカルで動作確認 ## 補足
52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
import React from "react";
|
|
import styles from "./loginedHeader.module.scss";
|
|
|
|
import logo from "../../assets/images/OMS_logo_black.svg";
|
|
import ac from "../../assets/images/account_circle.svg";
|
|
import { LoginedPaths } from "./types";
|
|
import { HEADER_MENUS, HEADER_NAME } from "./constants";
|
|
|
|
interface HeaderProps {
|
|
// userRole: "user" | "partner"; ログインユーザーのロールに応じてタブの活性非活性に使用する想定
|
|
name: string;
|
|
activePath: LoginedPaths;
|
|
}
|
|
|
|
// ログイン後のヘッダー
|
|
const LoginedHeader: React.FC<HeaderProps> = (props: HeaderProps) => {
|
|
const { name, activePath } = props;
|
|
|
|
return (
|
|
<header className={styles.header}>
|
|
<div className={styles.headerLogo}>
|
|
<img src={logo} alt="OM System" />
|
|
</div>
|
|
<div className={styles.headerSub}>{HEADER_NAME}</div>
|
|
<div className={styles.headerMenu}>
|
|
<ul>
|
|
{HEADER_MENUS.map((x) => (
|
|
<li key={x.label}>
|
|
<a
|
|
href={x.path}
|
|
className={
|
|
activePath.toUpperCase() === x.path.toUpperCase()
|
|
? styles.isActive
|
|
: ""
|
|
}
|
|
>
|
|
{x.label}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<p className={styles.accountInfo}>
|
|
<img src={ac} alt="" className={styles.accountIcon} />
|
|
|
|
<span>{name}</span>
|
|
</p>
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
export default LoginedHeader;
|