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
yulkin
your book suggests to use Image.toByteData() to convert image to bytes, however I get the following error: "the getter ‘toByteData’ isn’t...
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
herminiotorres
Hi! I know not the intentions behind this narrative when called, on page XI: mount() |&gt; handle_event() |&gt; render() but the correc...
New
leonW
I ran this command after installing the sample application: $ cards add do something --owner Brian And got a file not found error: Fil...
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
brunogirin
When installing Cards as an editable package, I get the following error: ERROR: File “setup.py” not found. Directory cannot be installe...
New
brunogirin
When running tox for the first time, I got the following error: ERROR: InterpreterNotFound: python3.10 I realised that I was running ...
New
ggerico
I got this error when executing the plot files on macOS Ventura 13.0.1 with Python 3.10.8 and matplotlib 3.6.1: programming_ML/code/03_...
New
roadbike
From page 13: On Python 3.7, you can install the libraries with pip by running these commands inside a Python venv using Visual Studio ...
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
AstonJ
SpaceVim seems to be gaining in features and popularity and I just wondered how it compares with SpaceMacs in 2020 - anyone have any thou...
New
AstonJ
Just done a fresh install of macOS Big Sur and on installing Erlang I am getting: asdf install erlang 23.1.2 Configure failed. checking ...
New
AstonJ
I ended up cancelling my Moonlander order as I think it’s just going to be a bit too bulky for me. I think the Planck and the Preonic (o...
New
PragmaticBookshelf
Learn different ways of writing concurrent code in Elixir and increase your application's performance, without sacrificing scalability or...
New
First poster: joeb
The File System Access API with Origin Private File System. WebKit supports new API that makes it possible for web apps to create, open,...
New
Help
I am trying to crate a game for the Nintendo switch, I wanted to use Java as I am comfortable with that programming language. Can you use...
New
husaindevelop
Inside our android webview app, we are trying to paste the copied content from another app eg (notes) using navigator.clipboard.readtext ...
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
PragmaticBookshelf
Develop, deploy, and debug BEAM applications using BEAMOps: a new paradigm that focuses on scalability, fault tolerance, and owning each ...
New

Sub Categories: