03. layout

navbar 생성

// layouts/navbar.blade.php
<nav class="navbar is-fixed-top px-4" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
        <a class="navbar-item is-size-4 has-text-black" href="/">
            reddit
        </a>

        <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
        </a>
    </div>

    <div class="navbar-menu">
        <div class="navbar-start">
        </div>

        <div class="navbar-end">
            @guest
                <div class="navbar-item is-hidden-touch">
                    <div class="buttons">
                        <a href="{{ route('login') }}" class="button is-info is-outlined is-rounded">
                            <strong>{{ __('Log In') }}</strong>
                        </a>
                        <a href="{{ route('register') }}" class="button is-info is-rounded">
                            <strong>{{ __('Sign Up') }}</strong>
                        </a>
                    </div>
                </div>
            @endguest

            <div class="navbar-item has-dropdown is-hoverable">
                <a class="navbar-link is-hidden-touch">
                    <span class="icon">
                        <i class="far fa-user"></i>
                    </span>
                    @auth
                        <span>{{ Auth::user()->name }}</span>
                    @endauth
                </a>

                <div class="navbar-dropdown is-right">
                    <hr class="navbar-divider">
                    @guest
                        <a href="{{ route('login') }}" class="navbar-item">
                            {{ __('Log In') }}
                        </a>
                    @else
                        <a class="navbar-item logout-item">
                            {{ __('Log Out') }}
                        </a>

                        <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                            @csrf
                        </form>
                    @endguest
                </div>
            </div>
        </div>
    </div>
</nav>

@push('bottom')
    <script>
        $(document).ready(function() {
            // burger click 이벤트 메뉴 활성화.
            $(".navbar-burger").click(function() {
                $(".navbar-burger").toggleClass("is-active");
                $(".navbar-menu").toggleClass("is-active");
            });

            $(".logout-item").click(function() {
                event.preventDefault();
                document.getElementById('logout-form').submit();
            });
        });
    </script>
@endpush

layout navbar 추가

// app.blade.php
<body class="has-navbar-fixed-top">
    <div id="app">
        @include('layouts/navbar')

        @yield('content')

    </div>

    @stack('bottom')
</body>

full-page-section component 수정

// full-page-section.blade.php
// is-fullheight -> is-fullheight-with-navbar

jquery, fontawesome 추가

jquery
fontawesome

// app.blade.php
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/6b9195aef2.js" crossorigin="anonymous"></script>

root route 수정

// web.php
Route::get('/', [App\Http\Controllers\HomeController::class, 'index'])->name('home');

// HomeController.php
// auth middleware 아래 코드 제거
public function __construct()
{
  $this->middleware('auth');
}

// RouteServiceProvider.php
public const HOME = '/';

git commit

git add .
git commit -m "feat: create navbar"

Author And Source

이 문제에 관하여(03. layout), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@yeomc/03-layout

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

03. layout

navbar 생성

layout navbar 추가

full-page-section component 수정

jquery, fontawesome 추가

root route 수정

git commit

Author And Source

좋은 웹페이지 즐겨찾기