kentbull

kentbull

Ch 7 Responsive Design missing "hidden" on close button

Title: Modern CSS with Tailwind Second Edition: Menu Close Not Hiding when Should (pages 65-66)

After fixing the SVG icons to be ones that show up for me, since the code in the book did not work on my computer by default, it turned out that the close icon would display on first render even when the hamburger menu was displaying. When I would open the hamburger menu and then close for the first time then the menu icons would work as expected so this is due to hidden class not being on the “navbar-close” element. When I added the “hidden” class to it then everything worked perfectly.

I also had to run ./tailwindcss -o css/output.css to get everything to work right. I added this example to the test.html example in the code directory.

Here’s the HTML code that worked for me:

<!DOCTYPE html>
<!--
 ! Excerpted from "Modern CSS with Tailwind, Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material,
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose.
 ! Visit https://pragprog.com/titles/tailwind2 for more book information.
-->
<html>
<head>
    <title>TailwindCode</title>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <link rel="stylesheet" type="text/css" href="../css/output.css"/>
</head>

<body>

<nav class="flex items-center font-bold text-grey=600 ">
    <div class="block lg:hidden self-start">
        <button id="navbar-burger"
                class="px-3 py-2
                       border rounded border-grey-400
                       hover:border-black">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
            </svg>

        </button>
        <button id="navbar-close"
                class="px-3 py-2 hidden
                       border rounded border-grey-400
                       hover:border-black">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>

        </button>
    </div>
    <div class="w-full hidden
                lg:flex lg:flex-grow,
                lg:items-center lg:width-auto
                divide-black divide-y
                lg:divide-y-0"
         id="navbar-menu">
        <a class="block lg:mr-4 p-2 hover:bg-gray-200" id="blog">Blog</a>
        AND SO ON
    </div>
</nav>
<section class="py-12 px-6">
    <div class="container mx-auto">
        <div class="text-xl font-bold">CHEESE</div>
    </div>
</section>
<h1 class="text-4xl font-bold">First Floor</h1>
<h2 class="text-2xl font-semibold">Second Floor</h2>
<h3 class="text-lg font-medium italic">Third Floor</h3>
</body>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const $navbarBurger = document.querySelector('#navbar-burger')
        const $navbarClose = document.querySelector('#navbar-close')
        const $navbarMenu = document.querySelector('#navbar-menu')
        const $blog = document.querySelector('#blog')
        $navbarBurger.addEventListener('click', () => {
            $navbarMenu.classList.remove("hidden")
            $navbarBurger.classList.add("hidden")
            $navbarClose.classList.remove("hidden")
        });
        $navbarClose.addEventListener('click', () => {
            $navbarMenu.classList.add("hidden")
            $navbarBurger.classList.remove("hidden")
            $navbarClose.classList.add("hidden")
        });
        $blog.addEventListener('click', () => console.log("Go to blog"))
    })
</script>
</html>

Where Next?

Popular Pragmatic Bookshelf topics Top

abtin
page 20: … protoc command… I had to additionally run the following go get commands in order to be able to compile protobuf code using go...
New
jimmykiang
This test is broken right out of the box… — FAIL: TestAgent (7.82s) agent_test.go:77: Error Trace: agent_test.go:77 agent_test.go:...
New
johnp
Running the examples in chapter 5 c under pytest 5.4.1 causes an AttributeError: ‘module’ object has no attribute ‘config’. In particula...
New
simonpeter
When I try the command to create a pair of migration files I get an error. user=&gt; (create-migration "guestbook") Execution error (Ill...
New
lirux
Hi Jamis, I think there’s an issue with a test on chapter 6. I own the ebook, version P1.0 Feb. 2019. This test doesn’t pass for me: ...
New
JohnS
I can’t setup the Rails source code. This happens in a working directory containing multiple (postgres) Rails apps. With: ruby-3.0.0 s...
New
jskubick
I’m running Android Studio “Arctic Fox” 2020.3.1 Patch 2, and I’m embarrassed to admit that I only made it to page 8 before running into ...
New
brunogirin
When trying to run tox in parallel as explained on page 151, I got the following error: tox: error: argument -p/–parallel: expected one...
New
dtonhofer
@parrt In the context of Chapter 4.3, the grammar Java.g4, meant to parse Java 6 compilation units, no longer passes ANTLR (currently 4....
New
dachristenson
I’ve got to the end of Ch. 11, and the app runs, with all tabs displaying what they should – at first. After switching around between St...
New

Other popular topics Top

AstonJ
If it’s a mechanical keyboard, which switches do you have? Would you recommend it? Why? What will your next keyboard be? Pics always w...
New
New
AstonJ
There’s a whole world of custom keycaps out there that I didn’t know existed! Check out all of our Keycaps threads here: https://forum....
New
AstonJ
I’ve been hearing quite a lot of comments relating to the sound of a keyboard, with one of the most desirable of these called ‘thock’, he...
New
AstonJ
This looks like a stunning keycap set :orange_heart: A LEGENDARY KEYBOARD LIVES ON When you bought an Apple Macintosh computer in the e...
New
mafinar
Crystal recently reached version 1. I had been following it for awhile but never got to really learn it. Most languages I picked up out o...
New
Margaret
Hello everyone! This thread is to tell you about what authors from The Pragmatic Bookshelf are writing on Medium.
1147 28379 760
New
PragmaticBookshelf
Create efficient, elegant software tests in pytest, Python's most powerful testing framework. Brian Okken @brianokken Edited by Kat...
New
New
RobertRichards
Hair Salon Games for Girls Fun Girls Hair Saloon game is mainly developed for kids. This game allows users to select virtual avatars to ...
New

Sub Categories: