1

Llevo varias horas buscando como alinear los links de un menú y tengo que recurrir a ustedes por que aún estoy muy fresco con Tailwind.

El menú se ve así

Deseo alinear a la izquierda la hamburguesa de categorías

{{-- 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>

Si saco la clase justify-between en el div de la segunda linea:

<div class="container flex items-center justify-between h-16">

Se ve de la siguiente manera:

Pero de esta manera no puedo alinear a la derecha las opciones acceder y registrarse

El menú completo

<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>

Estaré muy agradecido a toda persona que me pueda brindar una idea.

1 respuesta 1

1

Puedes considerar lo siguiente:

  1. Divide el menú en 2 listas desordenadas
  2. Al contenedor principal le das las clases necesarias que ayuden a colocar los contenedores internos de manera horizontal y separados colocándolos en los extremos (flex y justify-between)
  3. Las mismas acciones del paso anterior las repites para los contenedores ul (flex y justify-around), además de darle un ancho para notar la separación de los li.

Código de ejemplo:

<nav class="bg-gray-400 
            text-white
            flex 
            font-bold 
            justify-between">
  <ul class="flex justify-around w-3/12">
    <li>Logo</li>
    <li>Categorías</li>
  </ul>
  <ul class="flex justify-around w-3/12">
    <li>Acceder</li>
    <li>Registrarse</li>
  </ul>
</nav>
1
  • Muchas gracias! lo solucione en base a tu comentario! buenas noches
    – maraet
    Commented el 14 jul. 2021 a las 1:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.