## 🛠️ From NavBar Mess to React Router Success! 😂

Hello **Hive Community** 👋,

- [📚 Day before yesterday](https://peakd.com/hive-139531/@sagarkothari88/integrate-aioha-with-your-react-app-from-scratch-vite--tailwind--daisyui), we built a fresh React app and integrated AIOHA.
- [🧭 Yesterday](https://peakd.com/hive-139531/@sagarkothari88/integrating-react-router-my-routing-adventures-with-react), 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

![buggy nav bar](https://images.hive.blog/0x0/https://files.peakd.com/file/peakd-hive/sagarkothari88/23t84fBJnhHbWnCfya6nxJh9zHd4NMiBkw97D1MszjncZ6r5RkUUd1wGwmULReru1eCyZ.png)

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 ☕...

![one little silly mistake](https://files.peakd.com/file/peakd-hive/sagarkothari88/23tGZrHMcMCrBoSeoqPHumYHFTAbocL5ie9piAJPvMWEhgAjpnHXeGSuwX313p4HtHijm.png)

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

---

### 🧩 Updated NavBar Component

```jsx
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

![Regular Login Primary Button](https://files.peakd.com/file/peakd-hive/sagarkothari88/EoGpiNib6in7UWVXVHSdYdXqjnaXyNY6JA7fTQVdXt1dn3H5SJbmGsDtJmiN2nCrirb.png)

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 ✅

```jsx
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) 😅

```jsx
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

```jsx
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!

![Daisy Documentation](https://files.peakd.com/file/peakd-hive/sagarkothari88/23tGXZByKwCtXgcMfSxMoATLjpDCyYy21degWVtQqGhpMPYyaj2pNETr82ibpzVN9H7ub.png)

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

![Update NavBar](https://files.peakd.com/file/peakd-hive/sagarkothari88/23t74ySHw58E3P7LKNGHf68od5SpQpkyYunWo4DJRJZiG7zXtkMkeybGdhtRhiwJk3CUS.png)

---

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

![react router link](https://files.peakd.com/file/peakd-hive/sagarkothari88/23tGZmVSmhE4gC9L71vnoP2x2TVYZrV8HDLoU8a8stbZYnYtbaRzb6wYQHV4ePYDzbZyK.png)

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

| Contribution | To | Hive | Ecosystem |
|--------------|----|------|-----------|
| Hive Witness Node | Hive API Node (in progress) | 3Speak Video Encoder Node Operator (highest number of nodes) | 3Speak Mobile App Developer |
| 3Speak Podcast App Developer | 3Speak Shorts App Developer | 3Speak Support & Maintenance Team | [Distriator Developer](https://distriator.com/) |
| [CheckinWithXYZ](https://checkinwith.xyz/) | [Hive Inbox](https://hive-inbox.the-hive-mobile.app/) | [HiFind](https://hifind.the-hive-mobile.app/) | [Hive Donate App](https://donate.the-hive-mobile.app/) |
| Contributed to HiveAuth Mobile App | Ecency ↔ 3Speak Integration | Ecency ↔ InLeo Integration | Ecency ↔ Actifit Integration |
| [Hive Stats App](https://stats.the-hive-mobile.app/) | [Vote for Witness App](https://witness.the-hive-mobile.app/) | [HiveFlutterKit](https://hiveflutterkit.sagarkothari88.one/docs/intro) | [New 3Speak App](https://3speak.sagarkothari88.one/#/?tab=home) |

---



### 🙌 Support Back

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

| Vote | For | Witness |
|------|-----|---------|
| [![](https://images.hive.blog/u/sagarkothari88/avatar)](https://witness.the-hive-mobile.app/#/witnesses/@sagarkothari88) | [sagarkothari88](https://witness.the-hive-mobile.app/#/witnesses/@sagarkothari88) | @sagarkothari88 |
| [![](https://images.hive.blog/u/threespeak/avatar)](https://witness.the-hive-mobile.app/#/witnesses/@threespeak) | [threespeak](https://witness.the-hive-mobile.app/#/witnesses/@threespeak) | @threespeak |

---