feat: hide academy logo on mobile and mobile badge fix

Author: Markkos89

src/components/Topbar.tsx

@@ -14,6 +14,7 @@ import {
   useColorModeValue,
   useBreakpointValue,
   useDisclosure,
+  useMediaQuery,
 } from "@chakra-ui/react";
 import {
   HamburgerIcon,
@@ -51,8 +52,12 @@ const NAV_ITEMS: Array<NavItem> = [
 
 export default function Topbar() {
   const { isOpen, onToggle } = useDisclosure();
-  const router = useRouter();
+  const [isMobile] = useMediaQuery("(max-width: 768px)", {
+    ssr: true,
+    fallback: true, // return false on the server, and re-evaluate on the client side
+  });
 
+  const router = useRouter();
   return (
     <Box
       as="header"
@@ -96,12 +101,15 @@ export default function Topbar() {
             href={"/"}
             textAlign={useBreakpointValue({ base: "center", md: "left" })}
           >
-            {router.pathname.endsWith("/[slug]") ? (
-              <SchoolOfCodeLogo />
-            ) : (
-              <SchoolOfCodeLogo autoStart={true} loop={true} />
-            )}
+            {!isMobile ? (
+              router.pathname.endsWith("/[slug]") ? (
+                <SchoolOfCodeLogo />
+              ) : (
+                <SchoolOfCodeLogo autoStart={true} loop={true} />
+              )
+            ) : null}
           </Link>
+
           <Flex
             justify={"flex-end"}
             alignItems="center"

src/pages/getting-started.tsx

@@ -15,6 +15,7 @@ import {
   Divider,
   Box,
   Badge,
+  useMediaQuery,
 } from "@chakra-ui/react";
 import { type ReactElement } from "react";
 import Layout from "@/components/Layout";
@@ -24,7 +25,10 @@ import { useAppContext } from "@/contexts/AppContext";
 
 const GettingStartedPage: NextPageWithLayout<Lessons> = () => {
   const { projects, fundamentals } = useAppContext();
-
+  const [isMobile] = useMediaQuery("(max-width: 768px)", {
+    ssr: true,
+    fallback: true, // return false on the server, and re-evaluate on the client side
+  });
   return (
     <Flex
       py={5}
@@ -92,18 +96,26 @@ const GettingStartedPage: NextPageWithLayout<Lessons> = () => {
                       fontSize: "xl",
                     }}
                   >
-                    {lesson.frontMatter.title}
-                    {lesson && lesson.completed && lesson.completed === true ? (
-                      <Badge
-                        ml="1"
-                        alignItems={"flex-end"}
-                        colorScheme="green"
-                        position="absolute"
-                        right={3}
-                      >
-                        Completed
-                      </Badge>
-                    ) : null}
+                    <Flex direction={!isMobile ? "row" : "column"}>
+                      <Box>{lesson.frontMatter.title}</Box>
+                      <Box>
+                        {lesson &&
+                        lesson.completed &&
+                        lesson.completed === true ? (
+                          <>
+                            <Badge
+                              ml="1"
+                              alignItems={"flex-end"}
+                              colorScheme="green"
+                              position={!isMobile ? "absolute" : "relative"}
+                              right={3}
+                            >
+                              Completed
+                            </Badge>
+                          </>
+                        ) : null}
+                      </Box>
+                    </Flex>
                   </Button>
                 </Link>
               </ListItem>