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

    <link href="{{ asset('css/all.min.css') }}" rel="stylesheet">
    
    <!-- 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">
    
    <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 @auth class="bg-gray-200" @endauth @guest class="bg-white" @endguest>
    <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" @guest style="background: url(/img/background.jpg) no-repeat center center fixed;
                                -webkit-background-size: cover;
                                -moz-background-size: cover;
                                -o-background-size: cover;background-size: cover;"@endguest>
  

        @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
                    <clock-component></clock-component>
                    <cawangan-component status={{ Auth::user()->cawangan  }} roles={{ Auth::user()->roles }} route={{ (Route::is('home') || Route::is('akaun.home')) ? 'ada' : 'tiada' }}></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

                         <logout-component csrftoken="{{ csrf_token() }}" :route={{ json_encode(route('logout')) }}></logout-component>

                                       
                @endguest
                  </div>
               </div>
            </div>
         </nav>
        @endauth

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