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

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
edruder
I thought that there might be interest in using the book with Rails 6.1 and Ruby 2.7.2. I’ll note what I needed to do differently here. ...
New
AleksandrKudashkin
On the page xv there is an instruction to run bin/setup from the main folder. I downloaded the source code today (12/03/21) and can’t see...
New
cro
I am working on the “Your Turn” for chapter one and building out the restart button talked about on page 27. It recommends looking into ...
New
jeremyhuiskamp
Title: Web Development with Clojure, Third Edition, vB17.0 (p9) The create table guestbook syntax suggested doesn’t seem to be accepted ...
New
AndyDavis3416
@noelrappin Running the webpack dev server, I receive the following warning: ERROR in tsconfig.json TS18003: No inputs were found in c...
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
dsmith42
Hey there, I’m enjoying this book and have learned a few things alredayd. However, in Chapter 4 I believe we are meant to see the “&gt;...
New
jwandekoken
Book: Programming Phoenix LiveView, page 142 (157/378), file lib/pento_web/live/product_live/form_component.ex, in the function below: d...
New
Keton
When running the program in chapter 8, “Implementing Combat”, the printout Health before attack was never printed so I assumed something ...
New

Other popular topics Top

AstonJ
A thread that every forum needs! Simply post a link to a track on YouTube (or SoundCloud or Vimeo amongst others!) on a separate line an...
New
Exadra37
I am thinking in building or buy a desktop computer for programing, both professionally and on my free time, and my choice of OS is Linux...
New
Exadra37
Please tell us what is your preferred monitor setup for programming(not gaming) and why you have chosen it. Does your monitor have eye p...
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
Exadra37
I am asking for any distro that only has the bare-bones to be able to get a shell in the server and then just install the packages as we ...
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
AstonJ
Was just curious to see if any were around, found this one: I got 51/100: Not sure if it was meant to buy I am sure at times the b...
New
hilfordjames
There appears to have been an update that has changed the terminology for what has previously been known as the Taskbar Overflow - this h...
New
PragmaticBookshelf
Author Spotlight: Peter Ullrich @PJUllrich Data is at the core of every business, but it is useless if nobody can access and analyze ...
New

Sub Categories: