Forem: Lavinia

Dropdown Component for main menu ~ Laravel/Breeze ~ Tailwind

Lavinia — Sun, 17 Jan 2021 03:41:59 +0000

Currently, I'm working on a project using Laravel, I haven't used Laravel since version 5, I think, also I stopped programming for about a year for different personal reasons.

The thing is that a lot of things have changed and one of them is that now Laravel has this package to manage the authentication process: Laravel/Breeze.

Puedes leer la versión en Español en mi blog.

I had some issues at the beginning because I didn't have the latest version of PHP, but after I solved them I was able to focus on the next steps. Tailwind is something really new for me and Laravel/Breeze is working with templates and styles using that library, but one thing that is missing is the "sub-menu" for the main links.

The menu has the option to have a drop-down for the user actions on the right side:

For the project I'm working on, I need to have a sub-menu for some of the main menu items:

Components

Following the same logic of the original components, I've created two components:

nav-link-parent.blade.php



@props(['active'])

@php
$classes = ($active ?? false)
            ? 'parent-nav inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 text-sm font-semibold leading-5 text-gray-900 focus:outline-none focus:border-indigo-700 transition duration-150 ease-in-out cursor-pointer relative'
            : 'parent-nav inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-semibold leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out cursor-pointer relative';
@endphp

<div x-data="{ open: false }" @click.away="open = false" @close.stop="open = false" @click="open = ! open" {{ $attributes->merge(['class' => $classes]) }} >
    <div>
        {{ $name }}

        <div class="ml-1 inline-block relative top-1">
            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
        </div>
    </div>

    <div class="children border border-gray-300" 
    x-show="open"
    x-transition:enter="transition ease-out duration-200"
    x-transition:enter-start="transform opacity-0 scale-95"
    x-transition:enter-end="transform opacity-100 scale-100"
    x-transition:leave="transition ease-in duration-75"
    x-transition:leave-start="transform opacity-100 scale-100"
    x-transition:leave-end="transform opacity-0 scale-95">
        {{ $children }}
    </div>
</div>

responsive-nav-link-parent.blade.php



@props(['active'])

@php

$classes = ($active ?? false)

            ? 'parent-nav inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 text-sm font-semibold leading-5 text-gray-900 focus:outline-none focus:border-indigo-700 transition duration-150 ease-in-out'

            : 'parent-nav inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-semibold leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out';

@endphp

@props(['active'])

@php

$classes = ($active ?? false)

            ? 'parent-nav block pl-3 pr-4 py-2 border-l-4 border-indigo-400 text-base font-semibold text-indigo-700 bg-indigo-50 focus:outline-none focus:text-indigo-800 focus:bg-indigo-100 focus:border-indigo-700 transition duration-150 ease-in-out'

            : 'parent-nav block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-semibold text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition duration-150 ease-in-out';

@endphp

<div x-data="{ open: false }" @click.away="open = false" @close.stop="open = false" @click="open = ! open" {{ $attributes->merge(['class' => $classes]) }} >

    <div>

        {{ $name }}

    &lt;div class="ml-1 inline-block relative top-1"&gt;
        &lt;svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"&gt;
            &lt;path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /&gt;
        &lt;/svg&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="children border border-gray-300 mt-3" 
x-show="open"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="transform opacity-0 scale-95"
x-transition:enter-end="transform opacity-100 scale-100"
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="transform opacity-100 scale-100"
x-transition:leave-end="transform opacity-0 scale-95"&gt;
    {{ $children }}
&lt;/div&gt;



</div>

Style

Some CSS to set the right position for the elements.

app.css



.children {

    background: #fff;

}

.children a,

.children .separator {

    display: block;

    margin: 5px 0px;

    padding: 5px 10px;

}

.children .separator {

    border-top-width: 2px;

}

.children a:hover {

    color: #818cf8;

}

@media (min-width: 768px) {

    .children {

        position: absolute;

        width: 155px;

        top: 70px;

    }

}

Update the Navigation layout

And last I've updated the navigation layout and have added two slots: name and children

navigation.blade.php



...

<x-nav-link-parent :href="'#'" :active="request()->routeIs('padron.')">

    <x-slot name="name">Option A</x-slot>

    <x-slot name="children">

        <a href="#">Item A</a>

        <span class="separator"></span>

        <a href="#">Item B</a>

        <a href="#">Item C</a>

        <span class="separator"></span>

        <a href="#">Item D</a>

    </x-slot>

</x-nav-link-parent>

...

<x-responsive-nav-link-parent :href="'#'" :active="request()->routeIs('padron.')">

    <x-slot name="name">Padrón</x-slot>

    <x-slot name="children">

        <a href="#">Buscador</a>

        <span class="separator"></span>

        <a href="#">Centros de votacion</a>

        <a href="#">Juntas</a>

        <span class="separator"></span>

        <a href="#">Cartografia</a>

    </x-slot>

</x-responsive-nav-link-parent>

Final Result

What should I learn, React Js or React Native?

Lavinia — Fri, 19 Jul 2019 11:15:21 +0000

Hi everyone! I'm willing to enter the mobile development world, I did some research and I was going to learn React but then I notice that React Native exists, now I don't know what path should I go?
I've been working as a web developer, I love BackEnd more than FrontEnd, but I don't mind to work both parts, I want to develop an app that can work flawless on mobiles but also on desktops.

Let's make our spotify playlist

Lavinia — Fri, 12 Jul 2019 10:37:33 +0000

Hey everyone, happy Friday!
Most of us need music to work, so what about make our own spotify playlist?
Here's the link to a collaborative playlist.

Also why don't you share some of your must have artists? Mine:

Juanes
Paramore
Muse
Twenty One Pilots
Kudai

Image by Foundry Co from Pixabay

Challenges

Lavinia — Tue, 05 Feb 2019 19:12:19 +0000

So ... we are starting February, what about the goals of the year? already saved them for the next one like me 😅?

Well, it's not about making you feel bad or demotivate you, is the opposite, I'm here to tell you about some challenges that maybe you didn't know.

Everyone or at least most of us know Codepen, that wonderful place where people share artworks in the form of code whether in HTML, CSS or Javascript and where we land in search of that extraordinary thing that the client wants in his site or that the designer, who is not a programmer, thought it would be nice.

Codepen publishes a challenge every week, I'm not really sure how long ago they started because until this year I paid attention of the messages that came to my notification tray😩. Each month has a specific theme and each week they give you elements and from there you let your imagination run, January was with colors and February with shapes.

Since I am not a creative person in visual terms, that is, design, I decided to get serious with these challenges, I really reaffirm how uncreative I am in these terms, but I will continue to try them with each challenge. You can enter my codepen profile, you will not find anything awesome, but I'm working on it and here is my collection of challenges of the year aaaand here is the first challenge for this month.

Enjoy!!

Puedes encontrar esta entrada en español aquí.

What do you think about "Black Mirror: Bandersnatch"?

Lavinia — Wed, 02 Jan 2019 21:36:24 +0000

Spoiler Alert
If you haven't seen Black Mirror: Bandersnatch try not to read this post, but is your decision... or not...

Well, I just saw this new "interactive movie" and I have to say is very unfair to show developers as people who can go crazy by the fact of using tons of if and else. And also, what about the fork** as demonic simbol?

**I'm not sure if this is the right word for the sign https://thepracticaldev.s3.amazonaws.com/i/470tecr2iggygx7ceutw.jpg

Starting to empower me of my role as a web developer

Lavinia — Tue, 06 Mar 2018 00:11:47 +0000

Hello everyone! I'm Lavinia from Nicaragua. I've been in this "industry" for about 5 years and I work as a web developer at Boombit. I basically work the backend of the websites, I really enjoy being behind the code that makes something work.

I recently made a small internal talk about my experience as a developer and how it has been difficult for me to learn something that seems so easy for men, and I was not talking about gender equality, but some people emphasized that in some cases it is about gender.

All this has made me think that I should push more my person, a woman, developer. Something that seemed normal to me, however as a result of this small talk I understood that it really isn't normal. We have many women hidden somewhere, waiting for the right moment to emerge and I want to take advantage of that moment.

It's the little things that together have made me see why I chose this path, most of the women are exposed to what society indicates, being wives and mothers, and when we are girls they buy us dolls, if you are children they give you a video game console. In my case I don't consider to have been overexposed to the traditional things of the girls, I liked to go to play videogames to the 3 houses of my house or the arcade that were in some grocery store. I liked math more than any girl and I competed with some boys to see who had the best grade, I think I've always been someone quite technical since then, so I see the problems as a flow chart that can be solved step by step.

I hope as many women as I am, will decide to go out and make known what we do every day.

P.S. I'm open to spelling corrections, English is not my native language
P.S. 2 Boombit Talks

Explain Blockchain and bitcoins Like I'm Five

Lavinia — Thu, 11 Jan 2018 16:44:00 +0000