admin-erahn/resources/views/layouts/app.blade.php

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Ar-Rahn Admin Page</title>

    <!-- Routes -->
    @routes
    
    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    
    <style>
        .sidebar {
            height: 100%;
            width: 0;
            position: fixed;
            z-index: 1;
            top: 0;
            left: 0;
            background-color: white;
            overflow-x: hidden;
            transition: 0.5s;
            /* padding-top: 60px; */
        }

        .sidebara a {
            padding: 8px 8px 8px 32px;
            text-decoration: none;
            font-size: 25px;
            color: #818181;
            display: block;
            transition: 0.3s;
        }

        .sidebara a:hover {
            color: #f1f1f1;
        }

        .sidebara .closebtn {
            position: absolute;
            top: 0;
            right: 25px;
            font-size: 36px;
            margin-left: 50px;
        }

        @media screen and (max-height: 450px) {
            .sidebar {padding-top: 15px;}
            .sidebar a {font-size: 18px;}
        }

        #app {
            transition: margin-left .5s;
            /* padding: 16px; */
        }

    </style>
</head>
<body class="bg-gray-200">
    <script>
        openNav = ()  => {
            let toggle = document.getElementById("mySidebar");
            let maintoggle = document.getElementById("app");

            if(toggle.style.width == "" || toggle.style.width == '0px')
            {
                toggle.style.width = "250px";
                maintoggle.style.marginLeft = "250px";
            }else{
                document.getElementById("mySidebar").style.width = "0";
                document.getElementById("app").style.marginLeft= "0";
            }
        }

  
        
        closeNav = () =>  {
          document.getElementById("mySidebar").style.width = "0";
          document.getElementById("app").style.marginLeft= "0";
        }
        </script>

    <div id="app">
  

        @auth
        @include('layouts.sidebar')

        <nav class="bg-white border-b border-gray-200 z-30 w-full sticky">

            <div class="px-3 py-3 lg:px-5 lg:pl-3">
               <div class="flex items-center justify-between">
                  <div class="flex items-center justify-start">     
                     
                    
                    <button id="toggleSidebarMobile" @if(Auth::user()->roles == 'admin' || Auth::user()->roles == 'operasi') onclick="openNav()" @endif aria-expanded="true" aria-controls="sidebar" class=" mr-2 text-gray-600 hover:text-gray-900 cursor-pointer p-2 hover:bg-gray-100 rounded">
                        <svg id="toggleSidebarMobileHamburger" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                           <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
                        </svg>
                        <svg id="toggleSidebarMobileClose" class="w-6 h-6 hidden" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                           <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                        </svg>
                     </button>
                     
                  </div>
                  
                  @auth
                  {{-- <a href="#" class="text-xl font-bold flex items-center lg:ml-2.5">
                    <img src="{{ asset('img/icon_pkb.png') }}" class="h-6 mr-2" alt="Windster Logo">
                    <span class="self-center whitespace-nowrap">Ar-Rahn</span>
                    </a> --}}
                    <clock-component></clock-component>


                    {{-- <clock-component></clock-component> --}}
                  {{-- <div class="mx-auto">
                    <a class="text-yellow-200 rounded bg-gray-400 px-6 py-3 font-bold mr-4">
                        CAWANGAN : {{ Auth::user()->cawangan }}
                    </a>
                  </div> --}}
                  {{-- <cawangan v-bind:cawangan="{!! Auth::user()->cawangan !!}"></cawangan> --}}
                  <cawangan-component status={{ Auth::user()->cawangan  }} roles={{ Auth::user()->roles }}></cawangan-component>
                  @endauth

                  <div class="flex items-center">

                    @guest
                    @if (Route::has('login'))
                        <div class="hidden lg:flex items-center">
                            <a href="{{ route('login') }}" class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded">
                                Log In
                            </a>
                         </div>
                    @endif

                    @if (Route::has('register'))
                        <div class="hidden lg:flex items-center ml-2">
                            <a href="{{ route('register') }}" class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded">
                                Register
                            </a>
                         </div>
                    @endif
                @else
                        {{-- <a class="text-gray-900 font-bold mr-4  md:invisible xl:visible">
                            {{ Auth::user()->name }}
                        </a> --}}

                            <div class="hidden lg:flex items-center">
                                <button onclick="event.preventDefault();
                                document.getElementById('logout-form').submit();" class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded md:invisible xl:visible">
                                    Log out
                                  </button>
                                  <button onclick="event.preventDefault();
                                    document.getElementById('logout-form').submit();" class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded md:visible xl:invisible">
                                        <i class= "fas fa-sign-out-alt"></i>
                                    </button>
                             </div>

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

        <main class="py-4 px-4">
            @yield('content')
        </main>
    </div>
</body>
</html>