✨ Templates button in the sidebar (#802)

next/src/layout/sidebar.tsx

@@ -3,7 +3,7 @@ import { Fragment, useEffect, useState } from "react";
 import { Transition } from "@headlessui/react";
 import { useAuth } from "../hooks/useAuth";
 import { useRouter } from "next/router";
-import { FaBars, FaCog, FaHome } from "react-icons/fa";
+import { FaBars, FaCog, FaFileCode, FaHome } from "react-icons/fa";
 import clsx from "clsx";
 import Image from "next/image";
 import DottedGridBackground from "../components/DottedGridBackground";
@@ -113,6 +113,26 @@ const SidebarLayout = (props: PropsWithChildren) => {
                     <li className="mb-2">
                       <div className="ml-2 text-xs font-semibold text-neutral-400">Pages</div>
                       <ul role="list" className="mt-2 space-y-1">
+                        {router.route !== "/templates" ? (
+                          <LinkItem
+                            title="Templates"
+                            icon={
+                              <FaFileCode className="transition-transform group-hover:scale-110" />
+                            }
+                            onClick={() => {
+                              router.push("/templates").catch(console.error);
+                            }}
+                          />
+                        ) : (
+                          <LinkItem
+                            title="Home"
+                            icon={<FaHome />}
+                            onClick={() => {
+                              void router.push("/");
+                            }}
+                          />
+                        )}
+
                         {router.route !== "/settings" ? (
                           <LinkItem
                             title="Settings"