create sticky footer

2 Replies

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•2w ago

<@465923409973477386> kapa.ai is still learning and improving, please let us know how it did by reacting below