extended-salmon
extended-salmon•2w ago

create sticky footer

create sticky footer
2 Replies
kapa.ai
kapa.ai•2w ago
Hi @japope. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To create a sticky footer in a refine application, you can follow these steps. Below is an example of how to create a sticky footer using the Footer component and integrating it into a layout. Step 1: Create the Footer Component First, create a Footer component in the src/components/footer/index.tsx directory with the following code:
import React, { useState } from "react";
import { useLogout, useNavigation } from "@refinedev/core";
import { AppBar, Toolbar, Button, MenuList, MenuListItem } from "react95";

export const Footer: React.FC = () => {
const [open, setOpen] = useState(false);

const { mutate: logout } = useLogout();
const { push } = useNavigation();

return (
<AppBar style={{ top: "unset", bottom: 0, position: "sticky" }}>
<Toolbar style={{ justifyContent: "space-between" }}>
<div style={{ position: "relative", display: "inline-block" }}>
<Button
onClick={() => setOpen(!open)}
active={open}
style={{ fontWeight: "bold" }}
>
<img
src="<https://raw.githubusercontent.com/refinedev/refine/master/logo.png">
alt="refine logo"
style={{ height: "20px", marginRight: 4 }}
/>
</Button>
{open && (
<MenuList
style={{
position: "absolute",
left: "0",
bottom: "100%",
}}
onClick={() => setOpen(false)}
>
<MenuListItem
onClick={() => {
push("posts");
}}
>
Posts
</MenuListItem>
<MenuListItem
onClick={() => {
logout();
}}
>
<span role="img" aria-label="🔙">
🔙
</span>
</MenuListItem>
</MenuList>
)}
</div>
</Toolbar>
</AppBar>
);
};
import React, { useState } from "react";
import { useLogout, useNavigation } from "@refinedev/core";
import { AppBar, Toolbar, Button, MenuList, MenuListItem } from "react95";

export const Footer: React.FC = () => {
const [open, setOpen] = useState(false);

const { mutate: logout } = useLogout();
const { push } = useNavigation();

return (
<AppBar style={{ top: "unset", bottom: 0, position: "sticky" }}>
<Toolbar style={{ justifyContent: "space-between" }}>
<div style={{ position: "relative", display: "inline-block" }}>
<Button
onClick={() => setOpen(!open)}
active={open}
style={{ fontWeight: "bold" }}
>
<img
src="<https://raw.githubusercontent.com/refinedev/refine/master/logo.png">
alt="refine logo"
style={{ height: "20px", marginRight: 4 }}
/>
</Button>
{open && (
<MenuList
style={{
position: "absolute",
left: "0",
bottom: "100%",
}}
onClick={() => setOpen(false)}
>
<MenuListItem
onClick={() => {
push("posts");
}}
>
Posts
</MenuListItem>
<MenuListItem
onClick={() => {
logout();
}}
>
<span role="img" aria-label="🔙">
🔙
</span>
</MenuListItem>
</MenuList>
)}
</div>
</Toolbar>
</AppBar>
);
};
Step 2: Create the Layout Component Next, create a Layout component that uses the Footer component. Update the src/components/layout/index.tsx file with the following code:
import { PropsWithChildren } from "react";
import { Footer } from "../footer";
import { Header } from "../header";

export const Layout: React.FC<PropsWithChildren> = ({ children }) => {
return (
<div style={{ display: "flex", flexDirection: "column", minHeight: "100vh" }}>
<Header />
<div
style={{
flex: "1",
padding: "72px 24px 24px 24px",
backgroundColor: "rgb(0, 128, 128)",
}}
>
{children}
</div>
<Footer />
</div>
);
};
import { PropsWithChildren } from "react";
import { Footer } from "../footer";
import { Header } from "../header";

export const Layout: React.FC<PropsWithChildren> = ({ children }) => {
return (
<div style={{ display: "flex", flexDirection: "column", minHeight: "100vh" }}>
<Header />
<div
style={{
flex: "1",
padding: "72px 24px 24px 24px",
backgroundColor: "rgb(0, 128, 128)",
}}
>
{children}
</div>
<Footer />
</div>
);
};
Step 3: Use the Layout Component Finally, use the Layout component when adding routes to your application. This ensures that the footer remains sticky at the bottom of the page. By following these steps, you will have a sticky footer in your refine application. For more details, you can refer to the [Adding a ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2w ago
<@465923409973477386> kapa.ai is still learning and improving, please let us know how it did by reacting below