ReturnButton are now displayed on mobile and desktop are different places

src/components/PanelComponents/ReturnButton.tsx

@@ -1,4 +1,5 @@
 import Button from "components/Button";
+import HorizontalLine from "components/HorizontalLine";
 import { useAppLayout } from "contexts/AppLayoutContext";
 import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
 
@@ -6,14 +7,37 @@ type ReturnButtonProps = {
   href: string;
   title: string;
   langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"];
+  displayOn: ReturnButtonType;
+  horizontalLine?: boolean;
+  className?: string;
 };
 
+export enum ReturnButtonType {
+  Mobile,
+  Desktop,
+  Both,
+}
+
 export default function ReturnButton(props: ReturnButtonProps): JSX.Element {
   const appLayout = useAppLayout();
 
   return (
-    <Button onClick={() => appLayout.setSubPanelOpen(false)} href={props.href}>
+    <div
-      ❮&emsp;{props.langui.return_to} {props.title}
+      className={`${
-    </Button>
+        props.displayOn === ReturnButtonType.Mobile
+          ? "desktop:hidden"
+          : props.displayOn === ReturnButtonType.Desktop
+          ? "mobile:hidden"
+          : ""
+      } ${props.className}`}
+    >
+      <Button
+        onClick={() => appLayout.setSubPanelOpen(false)}
+        href={props.href}
+      >
+        ❮&emsp;{props.langui.return_to} {props.title}
+      </Button>
+      {props.horizontalLine && <HorizontalLine />}
+    </div>
   );
 }

src/pages/404.tsx

@@ -4,7 +4,9 @@ import { getWebsiteInterface } from "graphql/operations";
 import { GetStaticProps } from "next";
 import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
 import AppLayout from "components/AppLayout";
-import ReturnButton from "components/PanelComponents/ReturnButton";
+import ReturnButton, {
+  ReturnButtonType,
+} from "components/PanelComponents/ReturnButton";
 
 type FourOhFourProps = {
   langui: GetWebsiteInterfaceQuery;
@@ -15,7 +17,12 @@ export default function FourOhFour(props: FourOhFourProps): JSX.Element {
   const contentPanel = (
     <ContentPanel>
       <h1>404 - {langui.page_not_found}</h1>
-      <ReturnButton href="/" title="Home" langui={langui} />
+      <ReturnButton
+        href="/"
+        title="Home"
+        langui={langui}
+        displayOn={ReturnButtonType.Both}
+      />
     </ContentPanel>
   );
   return (

src/pages/contents/[slug]/index.tsx

@@ -14,7 +14,9 @@ import HorizontalLine from "components/HorizontalLine";
 import ThumbnailHeader from "components/Content/ThumbnailHeader";
 import AppLayout from "components/AppLayout";
 import SubPanel from "components/Panels/SubPanel";
-import ReturnButton from "components/PanelComponents/ReturnButton";
+import ReturnButton, {
+  ReturnButtonType,
+} from "components/PanelComponents/ReturnButton";
 import { prettyinlineTitle, prettySlug } from "queries/helpers";
 
 type ContentIndexProps = {
@@ -27,12 +29,25 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element {
   const langui = props.langui.websiteInterfaces.data[0].attributes;
   const subPanel = (
     <SubPanel>
-      <ReturnButton href="/contents" title={"Contents"} langui={langui} />
+      <ReturnButton
-      <HorizontalLine />
+        href="/contents"
+        title={"Contents"}
+        langui={langui}
+        displayOn={ReturnButtonType.Desktop}
+        horizontalLine
+      />
+      
     </SubPanel>
   );
   const contentPanel = (
     <ContentPanel>
+      <ReturnButton
+        href="/contents"
+        title={"Contents"}
+        langui={langui}
+        displayOn={ReturnButtonType.Mobile}
+        className="mb-10"
+      />
       <div className="grid place-items-center">
         <ThumbnailHeader content={content} langui={langui} />
 

src/pages/contents/[slug]/read.tsx

@@ -12,7 +12,9 @@ import {
 import ContentPanel from "components/Panels/ContentPanel";
 import HorizontalLine from "components/HorizontalLine";
 import SubPanel from "components/Panels/SubPanel";
-import ReturnButton from "components/PanelComponents/ReturnButton";
+import ReturnButton, {
+  ReturnButtonType,
+} from "components/PanelComponents/ReturnButton";
 import ThumbnailHeader from "components/Content/ThumbnailHeader";
 import AppLayout from "components/AppLayout";
 import Markdawn from "components/Markdown/Markdawn";
@@ -46,10 +48,10 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
         href={`/contents/${content.slug}`}
         title={"Content"}
         langui={langui}
+        displayOn={ReturnButtonType.Desktop}
+        horizontalLine
       />
 
-      <HorizontalLine />
-
       {content.text_set.length > 0 ? (
         <div className="grid gap-5">
           <h2 className="text-xl">
@@ -138,6 +140,13 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
   );
   const contentPanel = (
     <ContentPanel>
+      <ReturnButton
+        href={`/contents/${content.slug}`}
+        title={"Content"}
+        langui={langui}
+        displayOn={ReturnButtonType.Mobile}
+        className="mb-10"
+      />
       <div className="grid place-items-center">
         <ThumbnailHeader content={content} langui={langui} />
 

src/pages/library/[slug].tsx

@@ -26,7 +26,9 @@ import {
   sortContent,
 } from "queries/helpers";
 import SubPanel from "components/Panels/SubPanel";
-import ReturnButton from "components/PanelComponents/ReturnButton";
+import ReturnButton, {
+  ReturnButtonType,
+} from "components/PanelComponents/ReturnButton";
 import NavOption from "components/PanelComponents/NavOption";
 import Chip from "components/Chip";
 import Button from "components/Button";
@@ -59,8 +61,13 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
 
   const subPanel = (
     <SubPanel>
-      <ReturnButton href="/library/" title={langui.library} langui={langui} />
+      <ReturnButton
-      <HorizontalLine />
+        href="/library/"
+        title={langui.library}
+        langui={langui}
+        displayOn={ReturnButtonType.Desktop}
+        horizontalLine
+      />
 
       <div className="grid gap-4">
         <NavOption
@@ -110,8 +117,15 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
 
   const contentPanel = (
     <ContentPanel width={ContentPanelWidthSizes.large}>
+      <ReturnButton
+        href="/library/"
+        title={langui.library}
+        langui={langui}
+        displayOn={ReturnButtonType.Mobile}
+        className="mb-10"
+      />
       <div className="grid place-items-center gap-12">
-        <div className="drop-shadow-shade-xl w-full h-[50vh] mobile:h-[60vh] mb-16 relative cursor-pointer">
+        <div className="drop-shadow-shade-xl w-full h-[50vh] mobile:h-[60vh] desktop:mb-16 relative cursor-pointer">
           {item.thumbnail.data ? (
             <Img
               image={item.thumbnail.data.attributes}

src/pages/wiki/chronology.tsx

@@ -13,7 +13,9 @@ import {
   getWebsiteInterface,
 } from "graphql/operations";
 import NavOption from "components/PanelComponents/NavOption";
-import ReturnButton from "components/PanelComponents/ReturnButton";
+import ReturnButton, {
+  ReturnButtonType,
+} from "components/PanelComponents/ReturnButton";
 import HorizontalLine from "components/HorizontalLine";
 import AppLayout from "components/AppLayout";
 import {
@@ -72,9 +74,6 @@ export default function DataChronology(
 
   const subPanel = (
     <SubPanel>
-      <ReturnButton href="/data" title="Data" langui={langui} />
-      <HorizontalLine />
-
       {props.chronologyEras.chronologyEras.data.map((era) => (
         <NavOption
           key={era.id}