I have spent several hours looking for how to align the links in a menu and I have to turn to you because I am still very fresh with Tailwind.
The menu looks like this
I want to left align the category burger
{{-- MENU HAMBURGUERS CATEGORIAS --}}
<a class="flex flex-col col-end-6 items-center justify-center px-4 bg-white bg-opacity-25 text-white cursor-pointer font-semibold h-full">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<span>Categorías</span>
</a>
If I take out the justify-between class in the div of the second line:
<div class="container flex items-center justify-between h-16">
It looks like this:
But this way I can't right align the access and register options
the full menu
<div class="container flex items-center h-16">
{{-- LOGOTIPO --}}
<a href="/" class="flex-shrink-0 mr-6 flex items-center">
<img class="block lg:hidden h-12 w-auto" src="{{ asset('img/logoB.png')}}" alt="Workflow">
<img class="hidden lg:block h-12 w-auto" src="{{ asset('img/logoB.png')}}" alt="Workflow">
</a>
{{-- FIN LOGOTIPO --}}
{{-- MENU HAMBURGUERS CATEGORIAS --}}
<a class="flex flex-col col-end-6 items-center justify-center px-4 bg-white bg-opacity-25 text-white cursor-pointer font-semibold h-full">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<span>Categorías</span>
</a>
{{-- MENU HAMBURGUERS CATEGORIAS --}}
{{-- LOGIN y OPCIONES --}}
@auth
<div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
<!-- Boton notificaciones -->
<button class="bg-blue-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</button>
<!-- Profile dropdown -->
<div class="ml-3 relative" x-data="{ open:false }">
<div>
<button x-on:click="open = !open" type="button" class="bg-gray-800 flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
<img class="h-8 w-8 rounded-full" src="{{ auth()->user()->profile_photo_url }}" alt="Imagen de perfil">
</button>
</div>
<div x-show="open" x-on:click.away="open = !open" class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
<a href="{{ route('profile.show') }}" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Perfil</a>
{{-- PERMISO ADMIN.HOME INFO: https://youtu.be/Ox3WRl6sJrw?list=PLZ2ovOgdI-kX3XFj77zlvSQYhJyJSYQWr&t=134 --}}
@can('admin.home')
<a href="{{ route('admin.home') }}" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Administrador</a>
@endcan
<form method="POST" action="{{ route('logout') }}">
@csrf
<a href="{{ route('logout') }}" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2" onclick="event.preventDefault();
this.closest('form').submit();">
Cerrar sesión
</a>
</form>
</div>
</div>
</div>
@else
<div>
<a href="{{route('login')}}" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Acceder</a>
<a href="{{route('register')}}" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Registrarse</a>
</div>
@endauth
{{-- FIN LOGIN Y OPCIONES --}}
</div>
I will be very grateful to anyone who can give me an idea.
You can consider the following:
ul
( flex and justify-around ), in addition to giving it a width to note the separation of theli
.Example code: