如何将导航栏向右移动并应用背景颜色？

Posted 2023-03-06

【中文标题】如何将导航栏向右移动并应用背景颜色？

【英文标题】：How to move navbar to right and apply background color?

【发布时间】：2021-08-04 10:38:22

【问题描述】：

我正在使用 react + tailwind 制作一个简单的应用程序，我目前正在开发导航栏部分。

Navbar.js：

import React from "react";

export default function Navbar( fixed ) 
  const [navbarOpen, setNavbarOpen] = React.useState(false);
  return (
    <>
      <nav className="relative flex flex-wrap items-center justify-between px-2 py-3 bg-pink-500 mb-3">
        <div className="container px-4 mx-auto flex flex-wrap items-center justify-between">
          <div className="w-full relative flex justify-between lg:w-auto lg:static lg:block lg:justify-start">
            <a
              className="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white"
              href="#pablo"
            >
              Logo 1
            </a>
            <button
              className="text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none"
              type="button"
              onClick=() => setNavbarOpen(!navbarOpen)
            >
              <i className="fas fa-bars"></i>
            </button>
          </div>
          <div
            className=
              "lg:flex flex-grow items-center" +
              (navbarOpen ? " flex" : " hidden")
            
            id="example-navbar-danger"
            style= flexDirection: "column"  
          >
            <ul className="flex flex-col lg:flex-row list-none">
              <li className="nav-item">
                <a className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75">
                  Row 1 - Menu 1
                </a>
              </li>
              <li className="nav-item">
                <a className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75">
                  Row 1 - Menu 2
                </a>
              </li>
              <li className="nav-item">
                <a className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75">
                  Row 1 - Menu 3
                </a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </>
  );

在这里完成工作示例：

https://codesandbox.io/s/tailwind-css-and-react-forked-1y10y

问题和尝试的方法：

在当前场景中，背景色粉红色应用于整个标题布局。

我可以理解这是因为我已将 css 类名 bg-pink-500 应用于整个导航栏。

但是，如果我将此背景颜色移动到任何子 div，则它不会按预期工作。

要求：

要求是在响应式视图中，整个布局需要完全像这样，

|  -- Logo --  This bar needs to have bg-pink  -- Hamburger Icon -- |
|                                                                   |
                                   |     -- Row 1 - Menu 1 --       |
                                   |     -- Row 1 - Menu 2 --       | --> Only this area have bg-pink
                                   |     -- Row 1 - Menu 3 --       |
                                   |     -- Row 2 - Menu 1 --       |
                                   

Please click on this image to see the similar expectation

请帮助我实现仅顶部导航栏和右侧菜单项栏的bg-pink 颜色。

当前用户界面可在此链接查看：https://1y10y.csb.app/（请切换到响应模式）

【参考方案1】：

您可以通过在将用作侧边栏的 div 上使用 position 作为 fixed 来实现此目的。但是对于其他大屏幕，您需要删除位置属性，它将显示在导航栏的中间。

试试下面的方法：-

import React from "react";

export default function Navbar( fixed ) 
  const [navbarOpen, setNavbarOpen] = React.useState(false);
  return (
    <>
      <nav className="relative flex flex-wrap items-center justify-between px-2 py-3 bg-pink-500 mb-3">
        <div
          className="container px-4 mx-auto flex flex-wrap items-center justify-between"
          style= position: "relative" 
        >
          <div className="w-full relative flex justify-between lg:w-auto lg:static lg:block lg:justify-start">
            <a
              className="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white"
              href="#pablo"
            >
              Logo 1
            </a>
            <button
              className="text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none"
              type="button"
              onClick=() => setNavbarOpen(!navbarOpen)
            >
              <i className="fas fa-bars"></i>
            </button>
          </div>
          <div
            className=
              "lg:flex flex-grow items-center" +
              (navbarOpen ? " flex" : " hidden")
            
            id="example-navbar-danger"
            style=
              flexDirection: "column",
              position: "fixed",
              right: 0,
              top: "41px",
              zIndex: 99999,
              background: "#ed64a6",
              height: "100%",
              minWidth: "200px"
             // added flex direction column because I will have another navbar below this.
          >
            <ul className="flex flex-col lg:flex-row list-none">
              <li className="nav-item">
                <a className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75">
                  Row 1 - Menu 1
                </a>
              </li>
              <li className="nav-item">
                <a className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75">
                  Row 1 - Menu 2
                </a>
              </li>
              <li className="nav-item">
                <a className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75">
                  Row 1 - Menu 3
                </a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </>
  );