[HELP] How to remove a user profile section

[marquezmiguel]

hello good morning I am trying to remove the following section from the user profile section and I cannot find the code that refers to this section inside the resources/view/profile/show.blade.php file

Am I modifying the correct file?

Item	Version
Laravel	9
Project	3
OS	macOS

[dfsmania]

Hi @marquezmiguel I'm not sure what you have done, since this package does not come with a profile view out-of-the-box. Probably, you have installed one of the Laravel's authentication scaffolding (like, ui, breeze or jetstream)...

[marquezmiguel]

that's right, I installed laravel jetstream and I want to remove that section I have marked in the image, but I can't find the file that section refers to.

this is the file show.blade.php

<x-app-layout>
    <x-slot name="header">
    </x-slot>
    <div>
        <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
            @if (Laravel\Fortify\Features::canUpdateProfileInformation())
                @livewire('profile.update-profile-information-form')

                <x-jet-section-border />
            @endif

            @if (Laravel\Fortify\Features::enabled(Laravel\Fortify\Features::updatePasswords()))
                <div class="mt-10 sm:mt-0">
                    @livewire('profile.update-password-form')
                </div>

                <x-jet-section-border />
            @endif

            @if (Laravel\Fortify\Features::canManageTwoFactorAuthentication())
                <div class="mt-10 sm:mt-0">
                    @livewire('profile.two-factor-authentication-form')
                </div>

                <x-jet-section-border />
            @endif

            <div class="mt-10 sm:mt-0">
                @livewire('profile.logout-other-browser-sessions-form')
            </div>

            @if (Laravel\Jetstream\Jetstream::hasAccountDeletionFeatures())
                <x-jet-section-border />

                <div class="mt-10 sm:mt-0">
                    @livewire('profile.delete-user-form')
                </div>
            @endif
        </div>
    </div>
</x-app-layout>

I need to remove this section

[dfsmania]

But, that's part of Jetstream package, the view looks similar at the one they shown on the documentation (but in this case embedded in the AdminLTE layout), see here. Probably you need to make changes on the jetstream package or check if you can publish its resources to make customizations, maybe as explained here.

UPDATE: Looking at the jetstream code in Github, I think that section is the navigation-menu included as a part of the app-layout that is using the profile view...

[marquezmiguel]

But, that's part of Jetstream package, the view looks similar at the one they shown on the documentation (but in this case embedded in the AdminLTE layout), see here. Probably you need to make changes on the jetstream package or check if you can publish its resources to make customizations, maybe as explained here.

UPDATE: Looking at the jetstream code in Github, I think that section is the navigation-menu included as a part of the app-layout that is using the profile view...

apparently it is this file, I am trying to delete that section but when I do it, the display is very broken, maybe I am deleting something wrong, my God.

UPDATE: by deleting or commenting out the entire contents of the navigation-menu.blade.php file the header menu disappears completely. it seems that this file only refers to the settings inside the header in the user profile section.

[dfsmania]

Nice, good to see you have solved it. However, take a read to next issue: #1001, it is discussed somehow the integration of this package with jetstream. It may be helpful to you...

[marquezmiguel]

Nice, good to see you have solved it. However, take a read to next issue: #1001, it is discussed somehow the integration of this package with jetstream. It may be helpful to you...

this works correctly in my project, thanks for bothering to look for that article. by the way I enabled the 'usermenu_image' function of adminlte and I have a peculiar problem, in the home page the image and the name are displayed correctly but when I access to another directory the image is broken.

[dfsmania]

You may try replacing any of these blade files with issues, with the next code:

@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
    <h1>Dashboard</h1>
@stop

@section('content')
    <p>Welcome to this beautiful admin panel.</p>
@stop

If after that, the issue disappear, then it may be related to some of the styles that are applied by the blade view, you will have to investigate which one...

[marquezmiguel]

it seems that the one causing the problems is

 <x-guest-layout> 
 </x-guest-layout> 

that brings the laravel files.

[dfsmania]

It may be because you are trying to embed one layout (from the jetstream package) into the layout provided by this package. Have you tried to use only the inner code of the x-guess-layout inside this template? For example, if your blade view is like:

<x-guest-layout>
  {{-- INNER JETSTREAM CODE --}}
</x-guest-layout>

Then replace it by something like:

@extends('adminlte::page')

@section('title', 'The title')

@section('content_header')
    <h1>The Content Header (if needed)</h1>
@stop

@section('content')
  {{-- INNER JETSTREAM CODE --}}
@stop

[marquezmiguel]

if i remove the layout is completely broken

for example this is the code with
included inside the adminlte template

@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
    <h1>Register New User</h1>
@stop

@section('content')
 <x-guest-layout>
    <x-jet-authentication-card>
        <x-slot name="logo">
        </x-slot>

        <x-jet-validation-errors class="mb-4" />

        <form method="POST" action="{{ route('register') }}">
            @csrf

            <div>
                <x-jet-label for="name" value="{{ __('Name') }}" />
                <x-jet-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" required autofocus autocomplete="name" />
            </div>

            <div class="mt-4">
                <x-jet-label for="email" value="{{ __('Email') }}" />
                <x-jet-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required />
            </div>

            <div class="mt-4">
                <x-jet-label for="password" value="{{ __('Password') }}" />
                <x-jet-input id="password" class="block mt-1 w-full" type="password" name="password" required autocomplete="new-password" />
            </div>

            <div class="mt-4">
                <x-jet-label for="password_confirmation" value="{{ __('Confirm Password') }}" />
                <x-jet-input id="password_confirmation" class="block mt-1 w-full" type="password" name="password_confirmation" required autocomplete="new-password" />
            </div>

            @if (Laravel\Jetstream\Jetstream::hasTermsAndPrivacyPolicyFeature())
                <div class="mt-4">
                    <x-jet-label for="terms">
                        <div class="flex items-center">
                            <x-jet-checkbox name="terms" id="terms" required />

                            <div class="ml-2">
                                {!! __('I agree to the :terms_of_service and :privacy_policy', [
                                        'terms_of_service' => '<a target="_blank" href="'.route('terms.show').'" class="underline text-sm text-gray-600 hover:text-gray-900">'.__('Terms of Service').'</a>',
                                        'privacy_policy' => '<a target="_blank" href="'.route('policy.show').'" class="underline text-sm text-gray-600 hover:text-gray-900">'.__('Privacy Policy').'</a>',
                                ]) !!}
                            </div>
                        </div>
                    </x-jet-label>
                </div>
            @endif

            <div class="flex items-center justify-end mt-4">
                <!-- <a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('login') }}">
                    {{ __('Already registered?') }}
                </a> -->

                <x-jet-button class="ml-4">
                    {{ __('Register') }}
                </x-jet-button>

            </div>
        </form>
    </x-jet-authentication-card>
</x-guest-layout>
@stop

@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
@stop

@section('js')
    <script> console.log('Hi!'); </script> 
@stop

and this is the result

and this is the code without
included inside the adminlte template

@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
    <h1>Register New User</h1>
@stop

@section('content')
    <x-jet-authentication-card>
        <x-slot name="logo">
        </x-slot>

        <x-jet-validation-errors class="mb-4" />

        <form method="POST" action="{{ route('register') }}">
            @csrf

            <div>
                <x-jet-label for="name" value="{{ __('Name') }}" />
                <x-jet-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" required autofocus autocomplete="name" />
            </div>

            <div class="mt-4">
                <x-jet-label for="email" value="{{ __('Email') }}" />
                <x-jet-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required />
            </div>

            <div class="mt-4">
                <x-jet-label for="password" value="{{ __('Password') }}" />
                <x-jet-input id="password" class="block mt-1 w-full" type="password" name="password" required autocomplete="new-password" />
            </div>

            <div class="mt-4">
                <x-jet-label for="password_confirmation" value="{{ __('Confirm Password') }}" />
                <x-jet-input id="password_confirmation" class="block mt-1 w-full" type="password" name="password_confirmation" required autocomplete="new-password" />
            </div>

            @if (Laravel\Jetstream\Jetstream::hasTermsAndPrivacyPolicyFeature())
                <div class="mt-4">
                    <x-jet-label for="terms">
                        <div class="flex items-center">
                            <x-jet-checkbox name="terms" id="terms" required />

                            <div class="ml-2">
                                {!! __('I agree to the :terms_of_service and :privacy_policy', [
                                        'terms_of_service' => '<a target="_blank" href="'.route('terms.show').'" class="underline text-sm text-gray-600 hover:text-gray-900">'.__('Terms of Service').'</a>',
                                        'privacy_policy' => '<a target="_blank" href="'.route('policy.show').'" class="underline text-sm text-gray-600 hover:text-gray-900">'.__('Privacy Policy').'</a>',
                                ]) !!}
                            </div>
                        </div>
                    </x-jet-label>
                </div>
            @endif

            <div class="flex items-center justify-end mt-4">
                <!-- <a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('login') }}">
                    {{ __('Already registered?') }}
                </a> -->

                <x-jet-button class="ml-4">
                    {{ __('Register') }}
                </x-jet-button>

            </div>
        </form>
    </x-jet-authentication-card>
@stop

@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
@stop

@section('js')
    <script> console.log('Hi!'); </script> 
@stop

and this is the result

this problem should I report it as a bug?

[dfsmania]

this problem should I report it as a bug?

No, it is not a problem on this package, is part of the integration with other package...

[marquezmiguel]

this problem should I report it as a bug?

No, it is not a problem on this package, is part of the integration with other package...

have you seen my code? i'm doing it right, right? that's the right way? i want to make sure i'm doing things right.

[dfsmania]

@marquezmiguel I'm not sure, I haven't integrated jetstream with this package before... So, I'm not sure what is the nice way to follow. However, the next piece of code is not needed (it is just an example of how to include extra css and js):

@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
@stop

@section('js')
    <script> console.log('Hi!'); </script> 
@stop

If the only issue you are facing is with the upper right logo image, then use your browser's inspector to check what style is added to it when you are mixing the layout, probably both layout uses the same class for the logo image and are adding styles to it...

UPDATE: I'm also noting that Jetstream uses Tailwind CSS while this package (and AdminLTE) is based on Bootstrap4, I do not believe you can mix both things, since both Tailwind CSS and Bootstrap4 contains definition for the class mt-1, for example. One way to follow, may be to change all the views of the Jetstream package to use Bootstrap4 and remove Tailwind CSS, but I'm not sure how hard will that be...

[marquezmiguel]

@marquezmiguel I'm not sure, I haven't integrated jetstream with this package before... So, I'm not sure what is the nice way to follow. However, the next piece of code is not needed (it is just an example of how to include extra css and js):

@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
@stop

@section('js')
    <script> console.log('Hi!'); </script> 
@stop

If the only issue you are facing is with the upper right logo image, then use your browser's inspector to check what style is added to it when you are mixing the layout, probably both layout uses the same class for the logo image and are adding styles to it...

UPDATE: I'm also noting that Jetstream uses Tailwind CSS while this package (and AdminLTE) is based on Bootstrap4, I do not believe you can mix both things, since both Tailwind CSS and Bootstrap4 contains definition for the class mt-1, for example. One way to follow, may be to change all the views of the Jetstream package to use Bootstrap4 and remove Tailwind CSS, but I'm not sure how hard will that be...

possibly a conflict is occurring between the two technologies, I will see how to proceed, thank you for your help.

[dfsmania]

OK, if you manage to found a solution for the integration of both technologies, you may share a brief summary here. It may be helpful to other people...