Added a navbar for blog pages in small screens...

components/Docs.tsx

@@ -4,14 +4,16 @@ import React from "react";
 import Container from "./Container";
 import HeadingText from "./HeadingText";
 
-type Props = {};
+type Props = {
+  headingText: string;
+};
 
-export default function Docs({}: Props) {
+export default function Docs({ headingText }: Props) {
   return (
     <div className="px-4 pb-24 md:px-8">
       <Container>
         <HeadingText className="text-3xl md:text-4xl font-bold leading-[1.5] md:leading-[1.4] my-3">
-          We have docs for learning 😀
+          {headingText}
         </HeadingText>
         <div className="flex flex-wrap justify-center gap-5 pt-12 lg:gap-0 lg:justify-start lg:-space-x-52 pb-28">
           {DOCS.map((doc) => (

components/Navbar.tsx

@@ -107,6 +107,11 @@ const NavbarSmall = ({ setIsOpen, onClickHandler }: INavbarSmall) => {
         >
           Start Watching
         </button>
+        <p className="mt-auto text-sm opacity-80">
+          Visual videos are a highly engaging way to learn. They can hold your
+          attention, increase your focus and make learning more interesting and
+          enjoyable.
+        </p>
       </motion.ul>
     </>
   );

components/blog-styles/Navbar.tsx

@@ -1,35 +1,71 @@
 import React from "react";
 import Link from "next/link";
 
+import { AiOutlineMenu } from "react-icons/ai";
+
 import { NavProps } from "@/types/Blogs";
 
-export default function Navbar({ links, technology, slug }: NavProps) {
+export default function Navbar({
+  links,
+  technology,
+  slug,
+  isOpen,
+  setIsOpen,
+}: NavProps) {
   return (
-    <nav
-      className={`fixed bg-white md:bg-transparent md:sticky top-0 md:top-24 left-0 h-screen md:h-auto z-50  duration-200`}
-    >
-      <div className="w-64 px-4 mt-4">
-        <h1 className="font-medium">{technology}</h1>
-        {links.map((d) => (
-          <Link
-            key={d.frontmatter.title}
-            href={`${
-              slug
-                ? d.slug.replace(".mdx", "")
-                : `${technology.toLowerCase()}/${d.slug.replace(".mdx", "")}`
-            }`}
-          >
-            <p
-              className={`px-4 py-1 mt-2 border-l-2 hover:border-primary capitalize ${
-                slug == d.slug.replace(".mdx", "") &&
-                "text-primary border-primary"
+    <>
+      <nav
+        className={`fixed bg-white md:bg-transparent md:sticky top-0 md:top-24 left-0 h-screen md:h-auto z-[60] duration-200 ${
+          isOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"
+        }`}
+      >
+        <div className="w-64 px-4 mt-4">
+          <h1 className="mb-4 text-2xl font-medium">{technology}</h1>
+          {links.map((d) => (
+            <Link
+              key={d.frontmatter.title}
+              href={`${
+                slug
+                  ? d.slug.replace(".mdx", "")
+                  : `${technology.toLowerCase()}/${d.slug.replace(".mdx", "")}`
               }`}
             >
-              {d.slug.replace(".mdx", "").replaceAll("-", " ")}
-            </p>
-          </Link>
-        ))}
-      </div>
-    </nav>
+              <p
+                className={`px-4 py-1 mt-2 border-l-2 hover:border-primary capitalize ${
+                  slug == d.slug.replace(".mdx", "") &&
+                  "text-primary border-primary"
+                }`}
+              >
+                {d.slug.replace(".mdx", "").replaceAll("-", " ")}
+              </p>
+            </Link>
+          ))}
+        </div>
+      </nav>
+      {isOpen && (
+        <div
+          className="md:hidden fixed left-0 w-[100vw] h-screen bg-white bg-opacity-80 backdrop-blur-sm top-0 z-50"
+          onClick={() => setIsOpen(false)}
+        ></div>
+      )}
+    </>
   );
 }
+
+type NavbarSmallProps = {
+  setIsOpen: (a: boolean) => void;
+};
+
+export const NavbarSmall = ({ setIsOpen }: NavbarSmallProps) => {
+  return (
+    <div className="fixed z-20 flex items-center w-full gap-3 px-4 bg-white border-b-2 opacity-95 backdrop-blur-md md:hidden h-14 top-16 md:px-8">
+      <AiOutlineMenu className="text-xl" onClick={() => setIsOpen(true)} />
+      <Link
+        href={"/docs"}
+        className="px-3 py-1 text-sm rounded-full bg-opacity-30 bg-primary"
+      >
+        Home
+      </Link>
+    </div>
+  );
+};

pages/docs/css/[slug].tsx

@@ -12,9 +12,9 @@ import "highlight.js/styles/atom-one-dark.css";
 
 import Container from "@/components/Container";
 import { cssPathFiles, cssFileNames } from "@/utils/mdxFies";
-import { AiOutlineMenu, AiFillEdit } from "react-icons/ai";
+import { AiFillEdit } from "react-icons/ai";
 
-import Navbar from "@/components/blog-styles/Navbar";
+import Navbar, { NavbarSmall } from "@/components/blog-styles/Navbar";
 import { MDXComponents } from "@/components/blog-styles/MDXComponents";
 import Link from "next/link";
 
@@ -57,19 +57,19 @@ export default function Slug({ data, mdxSource }: Props) {
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" href="/favicon.svg" />
       </Head>
-      <Container className="flex items-start gap-8 px-4 mt-24 md:px-8">
-        <Navbar links={sortingArray} slug={slug} technology="CSS" />
 
-        <div
-          className={`md:hidden bg-black text-white p-3 rounded-full fixed bottom-4 left-4 ${
-            isOpen && "translate-x-64"
-          } duration-200 z-50`}
-          onClick={() => setIsOpen(!isOpen)}
-        >
-          <AiOutlineMenu />
-        </div>
+      <NavbarSmall setIsOpen={setIsOpen} />
+
+      <Container className="flex items-start gap-8 px-4 mt-24 md:px-8">
+        <Navbar
+          links={sortingArray}
+          slug={slug}
+          technology="CSS"
+          isOpen={isOpen}
+          setIsOpen={setIsOpen}
+        />
 
-        <div className="w-full pb-24" id="content">
+        <div className="w-full pb-24 mt-12 md:mt-0" id="content">
           <MDXRemote {...mdxSource} components={MDXComponents}></MDXRemote>
           <Link
             href={`https://github.com/AliReza1083/AniLearn.dev/tree/main/blog/css/${slug}.mdx`}

pages/docs/index.tsx

@@ -6,7 +6,7 @@ type Props = {};
 export default function Index() {
   return (
     <div className="mt-32">
-      <Docs />
+      <Docs headingText="Documentations" />
     </div>
   );
 }

pages/index.tsx

@@ -79,7 +79,7 @@ doesn't get easier than this"
         <Hero />
         <Information />
         <Reason />
-        <Docs />
+        <Docs headingText="We have docs for learning 😀" />
         <Buying />
         <Container className="relative px-4 py-24 md:px-8">
           <HeadingText className="text-3xl md:text-4xl font-bold leading-[1.5] md:leading-[1.4] my-3 mb-8">

styles/globals.css

@@ -46,14 +46,11 @@ body {
 }
 
 pre {
-  @apply w-full sm:w-full;
-  /* background-color: red;
-  padding: 1em; */
-  /* overflow-x: hidden; */
+  @apply w-full sm:w-full max-w-[500px] lg:max-w-full;
 }
 
 .hljs {
-  @apply text-sm md:text-base;
+  @apply w-full text-sm md:text-base;
   background: #000a1e !important;
   padding: 1em !important;
   border-radius: 0.5em;

types/Blogs.ts

@@ -38,4 +38,6 @@ export type NavProps = {
   }[];
   technology: string;
   slug?: string | string[] | undefined;
+  isOpen?: boolean;
+  setIsOpen?: any;
 };