From NavBar Mess to React Router Success! Fixing Layouts, Routing & AIOHA in One Go 🚀

🛠️ From NavBar Mess to React Router Success! 😂

Hello Hive Community 👋,

• 📚 Day before yesterday, we built a fresh React app and integrated AIOHA.
• 🧭 Yesterday, we explored routing... but yeah, our NavBar decided to rebel. 😤

---

🎯 Today’s Mission (Impossible?)

1. Fix the broken NavBar 😵
2. Integrate navigation using react-router-dom’s <Link>
3. Create a layout to avoid repeating NavBar on every page

---

🪛 Fixing the NavBar Bug

See this monstrosity above? 😱 That’s what we got even though we copied the beautiful DaisyUI navbar. 🤔
After a LOT of head-scratching and a few cups of chai ☕...

Boom! Found it — I forgot to import daisyui in app.css 🤦
One small import for me, one giant leap for NavBar!

---

🧩 Updated NavBar Component

import React from "react";
import HiveUserAvatarButton from "./HiveUserAvatarButton";

const NavBar = () => {
  return (
    <div className="navbar bg-base-100 shadow-sm">
      <div className="flex-1">
        <a className="btn btn-ghost text-xl">Distriator</a>
      </div>
      <div className="flex-none">
        <HiveUserAvatarButton />
      </div>
    </div>
  );
};

export default NavBar;

Notice we’re using a fancy new HiveUserAvatarButton component 👇

---

🧑‍🚀 Custom AIOHA Login Button

Time to ditch that boring default button.
Let’s use our custom-built login avatar button that:

• Shows a Login button if user is not logged in
• Displays avatar if logged in ✅

import { useState } from "react";
import { useAioha, AiohaModal } from "@aioha/react-ui";
import { KeyTypes } from "@aioha/aioha";
import "@aioha/react-ui/dist/build.css";

const HiveUserAvatarButton = () => {
  const [modalDisplayed, setModalDisplayed] = useState(false);
  const { user } = useAioha();

  function userAvatarBasedButton() {
    return (
      <div className="avatar" onClick={() => setModalDisplayed(true)}>
        <div className="w-10 rounded-full overflow-hidden">
          <img src={`https://images.hive.blog/u/${user}/avatar`} />
        </div>
      </div>
    );
  }

  function loginButton() {
    return (<button className="btn btn-primary" onClick={() => setModalDisplayed(true)}>Login</button>);
  }

  function aiohaModel() {
    return (
      <div>
        <AiohaModal
          displayed={modalDisplayed}
          loginOptions={{
            msg: "Login",
            keyType: KeyTypes.Posting,
          }}
          onLogin={console.log}
          onClose={setModalDisplayed}
        />
      </div>
    );
  }

  return (
    <>
      {user ? userAvatarBasedButton() : loginButton()}
      {aiohaModel()}
    </>
  );
};

export default HiveUserAvatarButton;

---

🧱 Let’s Build a Common Layout

Because... DRY (Don’t Repeat Yourself) 😅

import React from 'react'
import NavBar from './NavBar'

const CommonLayout = ({children}) => {
  return (
    <>
      <div>
        <NavBar />
      </div>
      <main>{children}</main>
    </>
  );
}

export default CommonLayout;

🎉 Now every page can reuse this layout with the NavBar already baked in.

---

📄 Using the Common Layout on a Page

import React from 'react'
import CommonLayout from '../../Components/CommonLayout'

const AboutUsPage = () => {
  return (
    <CommonLayout>
      <div>AboutUsPage</div>
    </CommonLayout>
  )
}

export default AboutUsPage;

---

🧭 Add Nav Links for Navigation

Time to give our NavBar a promotion by adding About Us & Contact Us links!

Thank you DaisyUI for making this super easy. Just ✂️ copy & paste...

---

🔗 Use React Router’s <Link> — No More <a>

Replace all old-school <a href> with <Link to> from react-router-dom —
That way, no page refreshes and smooth routing FTW ⚡

---

🧑‍💻 Final Words

Today’s work may look small but helped build strong foundation for the app.

• ✅ NavBar fixed
• ✅ AIOHA integrated smartly
• ✅ Routing UX improved
• ✅ Codebase looks cleaner

Thanks for following along! See you in the next post 🚀

---

Happy Building! 💻❤️

---

📝 Final Note

• I asked ChatGPT/AI to help optimize this post to make it more readable and viewer-friendly.
• Here is the link where you can find both original content & improvements made by AI
• https://chatgpt.com/share/688771b9-0c28-8000-aef5-24976fe84278

---

🚀 My Contributions to ♦️ Hive Ecosystem

---

🙌 Support Back

❤️ Appreciate my work? Consider supporting @threespeak & @sagarkothari88! ❤️

---