Can I add bottom navbar (client) in root layout file under body?
#Can I add bottom navbar (client) in root layout file under body?
onyx bolt
devout furnaceBOT
onyx bolt
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 @viral fern
balmy osprey
thats the right way.
viral fern
is this right way to do it? also where I can get best resources to learn next.js...
Yes and https://nextjs.org/docs
onyx bolt
Since it has a lot of pages, is there any tutorials or study material for high level understanding?
viral fern
Since it has a lot of pages, is there any tutorials or study material for high l...
the only up-to-date resource is the docs
onyx bolt
"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;
@viral fern
@balmy osprey
balmy osprey
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
viral fern
since when Link started supporting multiple children 
balmy osprey
you gotta clean up all of this before you can actually see if there is anything wrong
onyx bolt
theres so much wrong in this
Man you are great. I was helping someone. seems like I needed help. I will solve this issue. Thanks man. @balmy osprey and @viral fern
<Link href={'/#'}><>
<div className="text-center">
<img src="../../home_ic.png" className='bottomIcH bottomIcAdj' />
</div>
<div className="primaryColorTxt">Home</div> </>
</Link>``` @viral fern is this right?Tailwind class name they are using
balmy osprey
Tailwind class name they are using
there is no classname of bottomIcH
nor bottomIcAdj
nor primaryColorTxt
onyx bolt
Sorry, They are using for external css
onyx bolt
no global css
balmy osprey
those words without punctuation dont mean anything lol
onyx bolt
which you REALLY shouldnt mix with tailwind
I wanted to understand can you explain
balmy osprey
I wanted to understand can you explain<:meow_meow:763826941358374963>
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
as
import MyImage from "@/mypath/image.png"
and src={MyImage}
not as relative paths in the src
onyx bolt
as
```
import MyImage from "@/mypath/image.png"
```
Noted
onyx bolt
bootstrap is a shitty old framework that is heavy and doesnt split imports
Understood, will get rid of this
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?
balmy osprey
```- error ./src/app/BottomNav.js:5:0
Module not found: Can't resolve '@/public/...
images dont need to be in public unless you are accessing them remotely
balmy osprey
Is this fine? <@184479429404262410>
remove .src and use Image component
onyx bolt
<HomeIcon /> like this right?
onyx bolt
How I can directly get it from public
lilac prawn
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.
onyx bolt
@buoyant slate 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
balmy osprey
Sorry didn't read the previous comments, but to answer shortly on : *Can I add b...
this is absolutely unnecessary
onyx bolt
<@345205454600798209> I have some queries. can I use it like this ```import Dash...
any thoughts? @balmy osprey
balmy osprey
any thoughts? <@184479429404262410>
about what
theres a few things you are doing weird
onyx bolt
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 itProvider should be in its own file as it needs use client
Dashboard page can just be self closed
onyx bolt
Provider should be in its own file as it needs use client
If it is in own file How we can wrap this?
onyx bolt
Yes
balmy osprey
with a children prop
onyx bolt
So <ReduxProvider prop={<Dashboard />} /> like this
balmy osprey
nono
<ReduxProvider><Dashboard /></ReduxProvider>
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
lilac prawn
this is absolutely unnecessary
Just my opinion though 😄
onyx bolt
im on my phone so may have a typo but basically that
Cool thanks brother🖤