Can I add bottom navbar (client) in root layout file under body?

Unanswered

English Spot posted this in #help-forum

Open in Discord

English SpotOP

2023-10-09T10:32:45.000Z

Can I add bottom navbar (client) in root layout file under body?

77 Replies

@English Spot Can I add bottom navbar (client) in root layout file under body?

@ts-ignore

2023-10-09T10:35:36.000Z

Yes

English SpotOP

2023-10-09T10:36:51.000Z

import "./globals.css";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import BottomNav from "./BottomNav";
import "bootstrap/dist/css/bootstrap.min.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Appointments Hub",
  description: "Appointments booking app.",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
      <footer>
        <div className="row">
          <BottomNav />
        </div>
      </footer>
    </html>
  );
}

is this right way to do it? also where I can get best resources to learn next.js 13 faster? it would be helpful to me. Thanks @@ts-ignore

DirtyCajunRice | AppDir

2023-10-09T10:38:32.000Z

thats the right way.

@English Spot is this right way to do it? also where I can get best resources to learn next.js 13 faster? it would be helpful to me. Thanks <@510480545160101898>

@ts-ignore

2023-10-09T10:38:37.000Z

Yes and https://nextjs.org/docs

English SpotOP

2023-10-09T10:39:22.000Z

Since it has a lot of pages, is there any tutorials or study material for high level understanding?

@English Spot Since it has a lot of pages, is there any tutorials or study material for high level understanding?

@ts-ignore

2023-10-09T10:39:54.000Z

the only up-to-date resource is the docs

English SpotOP

2023-10-09T10:41:03.000Z

okayy thanks

I'm facing this error due to that layout file change

DirtyCajunRice | AppDir

2023-10-09T10:42:39.000Z

you are doing your client component wrong

show your client component

English SpotOP

2023-10-09T10:44:03.000Z

// SideNav.js
"use client"
import React, { useState }  from 'react';
import Link from '../../node_modules/next/link';

function BottomNav() {

  const [selectedItem, setSelectedItem] = useState(null);
  console.log(selectedItem)
  const handleNavItemClick = (item) => {
    setSelectedItem(item)
  };

  return (
            <div className="bootomNav">
                <div className="d-flex  justify-content-between">
                    <div className="text-center">

                        <Link href={'/#'}>
                            <div className="text-center">
                                <img src="../../home_ic.png" className='bottomIcH bottomIcAdj' />
                            </div>
                            <div className="primaryColorTxt">Home</div>
                        </Link>
                    </div>
                    <div>
                        <div className="text-center">
                        <Link href={'/offers'} >
                                <div className="">
                                    <img src="../../offer_ic.png" className='bottomIcH bottomIcAdj' />
                                </div>
                                <div className="">Offers</div>
                          </Link>
                        </div>
                    </div>
                    <div>
                        <div className="text-center">
                        <Link href={'/contact'}>
                                <div className="">
                                    <img src="../../contact_ic.png" className='bottomIcH bottomIcAdj' />
                                </div>
                                <div className="">Contact</div>
                           </Link>
                        </div>
                    </div>
                </div>
            </div>    
  );
}

export default BottomNav;

English SpotOP

2023-10-09T10:50:16.000Z

@@ts-ignore

@DirtyCajunRice | AppDir

DirtyCajunRice | AppDir

2023-10-09T10:53:15.000Z

theres so much wrong in this

why is your link import totally screwed up

why are your classnames completely unreadable

why are your image sources relative dot notation

@ts-ignore

2023-10-09T10:54:19.000Z

since when Link started supporting multiple children

DirtyCajunRice | AppDir

2023-10-09T10:55:26.000Z

you gotta clean up all of this before you can actually see if there is anything wrong

@DirtyCajunRice | AppDir theres so much wrong in this

English SpotOP

2023-10-09T11:01:23.000Z

Man you are great. I was helping someone. seems like I needed help. I will solve this issue. Thanks man. @DirtyCajunRice | AppDir and @@ts-ignore

                        <Link href={'/#'}><>
                            <div className="text-center">
                                <img src="../../home_ic.png" className='bottomIcH bottomIcAdj' />
                            </div>
                            <div className="primaryColorTxt">Home</div> </>
                        </Link>

@@ts-ignore is this right?

@DirtyCajunRice | AppDir why are your classnames completely unreadable

English SpotOP

2023-10-09T11:10:22.000Z

Tailwind class name they are using

@English Spot Tailwind class name they are using

DirtyCajunRice | AppDir

2023-10-09T11:14:17.000Z

there is no classname of bottomIcH

nor bottomIcAdj

nor primaryColorTxt

English SpotOP

2023-10-09T11:15:00.000Z

Sorry, They are using for external css

DirtyCajunRice | AppDir

2023-10-09T11:15:19.000Z

bootstrap

which you REALLY shouldnt mix with tailwind

English SpotOP

2023-10-09T11:16:23.000Z

no global css

DirtyCajunRice | AppDir

2023-10-09T11:17:15.000Z

those words without punctuation dont mean anything lol

@DirtyCajunRice | AppDir which you REALLY shouldnt mix with tailwind

English SpotOP

2023-10-09T11:17:21.000Z

I wanted to understand can you explain

@English Spot I wanted to understand can you explain<:meow_meow:763826941358374963>

DirtyCajunRice | AppDir

2023-10-09T11:17:50.000Z

bootstrap is a shitty old framework that is heavy and doesnt split imports

if you are using tailwind you dont need bootstrap at all

and your images should be imported at the top of your file

import MyImage from "@/mypath/image.png"

and src={MyImage}

not as relative paths in the src

@DirtyCajunRice | AppDir as import MyImage from "@/mypath/image.png"

English SpotOP

2023-10-09T11:20:17.000Z

Noted

@DirtyCajunRice | AppDir bootstrap is a shitty old framework that is heavy and doesnt split imports

English SpotOP

2023-10-09T11:20:40.000Z

Understood, will get rid of this

English SpotOP

2023-10-09T11:26:57.000Z

- error ./src/app/BottomNav.js:5:0
Module not found: Can't resolve '@/public/home_ic.png'
  3 | import React, { useState }  from 'react';
  4 | import Link from 'next/link';
> 5 | import HomeImage from '@/public/home_ic.png'

what am I doing wrong here?

@English Spot - error ./src/app/BottomNav.js:5:0 Module not found: Can't resolve '@/public/home_ic.png' 3 | import React, { useState } from 'react'; 4 | import Link from 'next/link'; > 5 | import HomeImage from '@/public/home_ic.png'

DirtyCajunRice | AppDir

2023-10-09T11:35:45.000Z

images dont need to be in public unless you are accessing them remotely

English SpotOP

2023-10-09T12:04:42.000Z

It is in local

Is this fine? @DirtyCajunRice | AppDir

@English Spot Is this fine? <@184479429404262410>

DirtyCajunRice | AppDir

2023-10-09T12:08:39.000Z

remove .src and use Image component

English SpotOP

2023-10-09T12:09:46.000Z

<HomeIcon /> like this right?

@English Spot <HomeIcon /> like this right?

DirtyCajunRice | AppDir

2023-10-09T12:20:41.000Z

nono

next/image

Image instead of img

English SpotOP

2023-10-09T12:21:23.000Z

I've tried that but screen getting white

will send the error

DirtyCajunRice | AppDir

2023-10-09T12:22:38.000Z

dont do .src

just the import name directly

English SpotOP

2023-10-09T14:55:11.000Z

How I can directly get it from public

Max

2023-10-09T16:38:55.000Z

Sorry didn't read the previous comments, but to answer shortly on : Can I add bottom navbar (client) in root layout file under body?, I would use Portals : https://react.dev/reference/react-dom/createPortal

{youCanAddCondition && createPortal(<YourComponent/>, document.body)} // This will append the component to the document body. You cannot render element outside of the body.

English SpotOP

2023-10-09T17:00:37.000Z

@European hornet I have some queries. can I use it like this

import DashboardPage from "./dashboard/page";

import { Provider } from "react-redux";
import store from "./redux/store";

export default function Home() {
  return (
    <Provider store={store}>
      <DashboardPage></DashboardPage>
    </Provider>
  );
}

in root file

@Max Sorry didn't read the previous comments, but to answer shortly on : *Can I add bottom navbar (client) in root layout file under body?*, I would use Portals : https://react.dev/reference/react-dom/createPortal tsx {youCanAddCondition && createPortal(<YourComponent/>, document.body)} // This will append the component to the document body. You cannot render element outside of the body.

DirtyCajunRice | AppDir

2023-10-09T21:44:16.000Z

this is absolutely unnecessary

@English Spot <@345205454600798209> I have some queries. can I use it like this import DashboardPage from "./dashboard/page"; import { Provider } from "react-redux"; import store from "./redux/store"; export default function Home() { return ( <Provider store={store}> <DashboardPage></DashboardPage> </Provider> ); } in root file

English SpotOP

2023-10-10T06:21:14.000Z

any thoughts? @DirtyCajunRice | AppDir

@English Spot any thoughts? <@184479429404262410>

DirtyCajunRice | AppDir

2023-10-10T06:23:28.000Z

about what

theres a few things you are doing weird

English SpotOP

2023-10-10T06:24:07.000Z

import DashboardPage from "./dashboard/page";

import { Provider } from "react-redux";
import store from "./redux/store";

export default function Home() {
  return (
    <Provider store={store}>
      <DashboardPage></DashboardPage>
    </Provider>
  );
}

is it a good way to use it

DirtyCajunRice | AppDir

2023-10-10T06:24:23.000Z

Provider should be in its own file as it needs use client

Dashboard page can just be self closed

@DirtyCajunRice | AppDir Provider should be in its own file as it needs use client

English SpotOP

2023-10-10T06:25:50.000Z

If it is in own file How we can wrap this?

@English Spot If it is in own file How we can wrap this?

DirtyCajunRice | AppDir

2023-10-10T06:28:53.000Z

huh?

you mean how do you use it?

English SpotOP

2023-10-10T06:29:18.000Z

Yes

DirtyCajunRice | AppDir

2023-10-10T06:29:19.000Z

with a children prop

English SpotOP

2023-10-10T06:30:00.000Z

<ReduxProvider prop={<Dashboard />} />

like this

DirtyCajunRice | AppDir

2023-10-10T06:30:05.000Z

nono

your redux provider would have a standard children prop

"use client";

import { Provider } from "react-redux";
import store from "./redux/store";
import { PropsWithChildren } from "react";

export default function ReduxProvider({ children }: PropsWithChildren) {
  return (
    <Provider store={store}>
      {children}
    </Provider>
  );
}

im on my phone so may have a typo but basically that

@DirtyCajunRice | AppDir this is absolutely unnecessary

Max

2023-10-10T10:32:59.000Z

Just my opinion though ðŸ˜„

@DirtyCajunRice | AppDir im on my phone so may have a typo but basically that

English SpotOP

2023-10-13T04:08:21.000Z

Cool thanks brotherðŸ–¤