04ヘッダーの作成
以下のコードを追記して、ログアウトボタンを設置します。
home.blade.php
<body>
{{-- ここから追加 --}}
<header>
<div class="container">
<div class="d-flex header_flex">
<div class="left_header"><h2>メモ共有</h2></div>
<div class="right_header">
<ul>
<li>
<form action="{{ route('logout') }}" method="post">
@csrf
<input class="logout_btn" type="submit" value="ログアウト" />
</form>
</li>
<li>ユーザー名：{{ Auth::user()->name }}</li>
</ul>
</div>
</div>
</div>
</header>
{{-- ここまでを追加 --}}
<div class="container">
<div class="memo_area"><div class="memo_form"></div></div>
</div>
</body>メモ帳作成時に使った、public/css/style.cssをコピペしてください。
その後以下のコードを最終行に追加します。
header {
height: 80px;
}
.header_flex {
display: flex;
justify-content: space-between;
}
.left_header {
width: 30%;
}
.right_header {
width: 70%;
display: flex;
justify-content: end;
}
.right_header ul {
list-style: none;
display: flex;
}
.right_header ul li {
margin-left: 20px;
}
.right_header ul li a {
text-decoration: none;
color: black;
font-weight: bold;
}
.logout_btn {
background-color: transparent;
border: none;
font-weight: bold;
}
コメントを残す