Kevin Powell - Community•2mo ago

Need a curve on top of app bar when selected

I am creating one mobile appbar. I am trying to create a curve above when user selects it.i created another curve div. but that is separate div. so it hasn't worked out. I tried but I don't how to implement it. Can anyone help me with that. I need a curve above when the user clicked on the item Here's the code:

import { AiFillBell } from "react-icons/ai";
import { GoHomeFill } from "react-icons/go";
import { IoMdSettings } from "react-icons/io";
import { FaUser } from "react-icons/fa";
import { useState } from "react";

export default function App() {
  const [selectedItem, setSelectedItem] = useState("home");

  const menuItems = [
    {
      name: "notification",
      icon: <AiFillBell style={{ height: "24px", width: "24px" }} />,
    },
    {
      name: "home",
      icon: <GoHomeFill style={{ height: "24px", width: "24px" }} />,
    },
    {
      name: "settings",
      icon: <IoMdSettings style={{ height: "24px", width: "24px" }} />,
    },
    {
      name: "user",
      icon: <FaUser style={{ height: "24px", width: "24px" }} />,
    },
  ];

  return (
    <div style={{ background: "black", height: "100vh", padding: "50px" }}>
      <div
        style={{
          background: "#0a0e18",
          height: "58px",
          borderRadius: "20px",
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          padding: "0px 30px",
          border: "1px solid #2e3239",
        }}
      >
        {menuItems.map((item, index) => (
          <div
            key={index}
            onClick={() => setSelectedItem(item.name)}
            style={{
              opacity: selectedItem === item.name ? 1 : 0.2,
              cursor: "pointer",
              color: "#fff",
            }}
          >
            {item.icon}
          </div>
        ))}
      </div>
    </div>
  );
}

import { AiFillBell } from "react-icons/ai";
import { GoHomeFill } from "react-icons/go";
import { IoMdSettings } from "react-icons/io";
import { FaUser } from "react-icons/fa";
import { useState } from "react";

export default function App() {
  const [selectedItem, setSelectedItem] = useState("home");

  const menuItems = [
    {
      name: "notification",
      icon: <AiFillBell style={{ height: "24px", width: "24px" }} />,
    },
    {
      name: "home",
      icon: <GoHomeFill style={{ height: "24px", width: "24px" }} />,
    },
    {
      name: "settings",
      icon: <IoMdSettings style={{ height: "24px", width: "24px" }} />,
    },
    {
      name: "user",
      icon: <FaUser style={{ height: "24px", width: "24px" }} />,
    },
  ];

  return (
    <div style={{ background: "black", height: "100vh", padding: "50px" }}>
      <div
        style={{
          background: "#0a0e18",
          height: "58px",
          borderRadius: "20px",
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          padding: "0px 30px",
          border: "1px solid #2e3239",
        }}
      >
        {menuItems.map((item, index) => (
          <div
            key={index}
            onClick={() => setSelectedItem(item.name)}
            style={{
              opacity: selectedItem === item.name ? 1 : 0.2,
              cursor: "pointer",
              color: "#fff",
            }}
          >
            {item.icon}
          </div>
        ))}
      </div>
    </div>
  );
}

2 Replies

Chris Bolson•2mo ago

I suspect that the main issue you would have with a design like this is the inverse rounded borders. There are several ways that these can be achieved using radial gradients etc however this is further complicated by the need to have a border. I suspect that the simplest way would be to use an SVG image made specifically for your design. I have put together a quick demo of how it could be done using an SVG https://codepen.io/cbolson/pen/mdZEENy Note - the SVG itself could be better but serves for the purpose of the demo. I didn't look too closely at your code so didn't really look at how you wanted to hide/display/animate the top cuve. In my demo I opted to slide it along the top based on the nav item with the "active" class.

Chris Bolson

CodePen

https://discord.com/channels/436251713830125568/1264903962252021760...

...

smackalpha•2mo ago

@Chris Thank u so much.. I will use this code in my react

Gaming

Programming

Need a curve on top of app bar when selected