fix: align sidebar toggle bottom border with navbar (#1864)

package.json

@@ -103,6 +103,7 @@
     "eslint": "^8.56.0",
     "jsdom": "^24.0.0",
     "prettier": "^3.2.4",
+    "prettier-plugin-tailwindcss": "^0.6.14",
     "prisma": "^5.18.0",
     "tailwindcss": "^3.3.0",
     "ts-node": "^10.9.2",

prisma/seed.ts

@@ -211,11 +211,11 @@ async function seedVideoMetadata() {
         video_360p_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
         slides:
           'https://appx-recordings.s3.ap-south-1.amazonaws.com/drm/100x/slides/Loops%2C+callbacks.pdf',
-          segments: [
-            { title: "Introduction", start: 0, end: 3 },
-            { title: "Chapter 1", start: 3, end: 7 },
-            { title: "Conclusion", start: 7, end: 10 }
-          ]
+        segments: [
+          { title: 'Introduction', start: 0, end: 3 },
+          { title: 'Chapter 1', start: 3, end: 7 },
+          { title: 'Conclusion', start: 7, end: 10 },
+        ],
       },
     });
   } catch (error) {

public/footer-logos/logos-svg/insta-logo.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 const InstaLogo = () => (
-    <svg
+  <svg
     viewBox="-0.5 -0.5 16 16"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"

src/actions/payoutMethods/schema.ts

@@ -3,13 +3,13 @@ import { z } from 'zod';
 export const payoutMethodSchema = z.object({
   upiId: z
     .string()
-    .refine((value) => (/^[0-9A-Za-z._-]{2,256}@[A-Za-z]{2,64}$/).test(value), {
+    .refine((value) => /^[0-9A-Za-z._-]{2,256}@[A-Za-z]{2,64}$/.test(value), {
       message: 'Enter a valid UPI address',
     })
     .optional(),
   solanaAddress: z
     .string()
-    .refine((value) => (/^[A-Za-z0-9]{44}$/).test(value), {
+    .refine((value) => /^[A-Za-z0-9]{44}$/.test(value), {
       message: 'Enter a valid Solana address',
     })
     .optional(),
@@ -18,13 +18,13 @@ export const payoutMethodSchema = z.object({
 export const upiIdInsertSchema = z.object({
   upiId: z
     .string()
-    .refine((value) => (/^[0-9A_Za-z._-]{2,256}@[A_Za-z]{2,64}$/).test(value), {
+    .refine((value) => /^[0-9A_Za-z._-]{2,256}@[A_Za-z]{2,64}$/.test(value), {
       message: 'Invalid UPI address',
     }),
 });
 
 export const solanaAddressInsertSchema = z.object({
-  solanaAddress: z.string().refine((value) => (/^[A-Za-z0-9]{44}$/).test(value), {
+  solanaAddress: z.string().refine((value) => /^[A-Za-z0-9]{44}$/.test(value), {
     message: 'Invalid Solana address',
   }),
 });

src/actions/user/index.ts

@@ -34,11 +34,11 @@ type GetAppxAuthTokenResponse = {
   email: string | null;
   appxAuthToken: string | null;
   appxUserId: string | null;
-}
+};
 
 export const GetAppxAuthToken = async (): Promise<GetAppxAuthTokenResponse> => {
   const session = await getServerSession(authOptions);
-  if (!session || !session.user) throw new Error("User is not logged in");
+  if (!session || !session.user) throw new Error('User is not logged in');
 
   const user = await db.user.findFirst({
     where: {
@@ -48,15 +48,18 @@ export const GetAppxAuthToken = async (): Promise<GetAppxAuthTokenResponse> => {
       name: true,
       email: true,
       appxAuthToken: true,
-      appxUserId: true
-    }
+      appxUserId: true,
+    },
   });
 
-  if (!user || !user.appxAuthToken) throw new Error("User not found");
+  if (!user || !user.appxAuthToken) throw new Error('User not found');
   return user;
 };
 
-export const GetAppxVideoPlayerUrl = async (courseId: string, videoId: string): Promise<string> => {
+export const GetAppxVideoPlayerUrl = async (
+  courseId: string,
+  videoId: string,
+): Promise<string> => {
   const { name, email, appxAuthToken, appxUserId } = await GetAppxAuthToken();
   const url = `${process.env.APPX_BASE_API}/get/fetchVideoDetailsById?course_id=${courseId}&video_id=${videoId}&ytflag=${1}&folder_wise_course=${1}`;
 

src/app/api/admin/content/route.ts

@@ -150,7 +150,10 @@ export const POST = async (req: NextRequest) => {
       });
     }
   }
-  if (discordChecked && (type === 'notion' || type === 'video' || type === 'appx')) {
+  if (
+    discordChecked &&
+    (type === 'notion' || type === 'video' || type === 'appx')
+  ) {
     if (!process.env.NEXT_PUBLIC_DISCORD_WEBHOOK_URL) {
       return NextResponse.json(
         { message: 'Environment variable for discord webhook is not set' },
@@ -174,7 +177,8 @@ export const POST = async (req: NextRequest) => {
   return NextResponse.json(
     {
       message:
-        discordChecked && (type === 'notion' || type === 'video' || type === 'appx')
+        discordChecked &&
+        (type === 'notion' || type === 'video' || type === 'appx')
           ? 'Content Added and Discord notification has been sent'
           : 'Content has been added',
     },

src/app/bounty/page.tsx

@@ -67,8 +67,8 @@ export default function Page() {
 
   return (
     <>
-      <div className="h-max pb-4 transition-colors duration-500 md:p-8 flex flex-col items-center justify-center w-full">
-        <div className="mb-6 flex flex-col items-start justify-center px-4 pt-3 sm:px-8 max-w-[90rem] w-full">
+      <div className="flex h-max w-full flex-col items-center justify-center pb-4 transition-colors duration-500 md:p-8">
+        <div className="mb-6 flex w-full max-w-[90rem] flex-col items-start justify-center px-4 pt-3 sm:px-8">
           <div className="text-2xl text-black transition-colors duration-500 dark:text-white sm:text-3xl">
             <h1 className="mt-20 text-black dark:text-white sm:mt-16">
               Your Bounties

src/app/certificate/page.tsx

@@ -5,7 +5,7 @@ const CertificatePage = async () => {
   const certificates = await getCertificates();
 
   return (
-    <section className="flex w-full flex-wrap mt-20 items-center justify-center">
+    <section className="mt-20 flex w-full flex-wrap items-center justify-center">
       {certificates?.map(({ cert, course, user }) => (
         <CertificateComponent
           certificateId={cert.id}

src/app/courses/[courseId]/layout.tsx

@@ -49,7 +49,7 @@ const Layout = async ({
   const fullCourseContent = await getFullCourseContent(parseInt(courseId, 10));
   return (
     <div className="relative flex min-h-screen flex-col py-24">
-      <div className="flex justify-between items-center">
+      <div className="flex items-center justify-between">
         <div className="2/3">
           <Sidebar fullCourseContent={fullCourseContent} courseId={courseId} />
         </div>

src/app/layout.tsx

@@ -34,9 +34,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
         )}
       >
         <GoogleAnalytics />
-        <NextTopLoader
-          showSpinner={false}
-        />
+        <NextTopLoader showSpinner={false} />
         <Providers>
           <Navbar />
           <OfflineNotification />

src/components/Appbar.tsx

@@ -18,7 +18,7 @@ export const menuOptions = [
   { id: 5, name: 'Watch History', Component: History, href: '/watch-history' },
 ];
 
-//Added Eventlistener 
+//Added Eventlistener
 const useMediaQuery = (query: string): boolean => {
   const [matches, setMatches] = useState<boolean>(false);
 
@@ -27,14 +27,14 @@ const useMediaQuery = (query: string): boolean => {
     const listener = (e: MediaQueryListEvent) => setMatches(e.matches);
 
     // Use addEventListener instead of addListener
-    media.addEventListener("change", listener);
-    
+    media.addEventListener('change', listener);
+
     // Set the initial match state
     setMatches(media.matches);
 
     // Cleanup function to remove the event listener
     return () => {
-      media.removeEventListener("change", listener);
+      media.removeEventListener('change', listener);
     };
   }, [query]);
 
@@ -54,14 +54,17 @@ export const Appbar = () => {
   useEffect(() => {
     setIsMounted(true);
     const handleClickOutside = (event: MouseEvent) => {
-      if (sidebarRef.current && !sidebarRef.current.contains(event.target as Node)) {
+      if (
+        sidebarRef.current &&
+        !sidebarRef.current.contains(event.target as Node)
+      ) {
         setIsCollapsed(true);
       }
     };
     document.addEventListener('mousedown', handleClickOutside);
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
-    };   
+    };
   }, []);
 
   const toggleCollapse = () => setIsCollapsed(!isCollapsed);
@@ -85,10 +88,10 @@ export const Appbar = () => {
           stiffness: 200,
           damping: 20,
         }}
-        className="fixed left-0 top-0 z-[999] hidden h-full flex-col border-r border-primary/10 bg-background dark:bg-background lg:flex min-w-16"
+        className="fixed left-0 top-0 z-[999] hidden h-full min-w-16 flex-col border-r border-primary/10 bg-background dark:bg-background lg:flex"
       >
         <div className="flex h-full flex-col gap-4">
-          <div className="flex w-full items-center border-b border-primary/10 px-2 py-4">
+          <div className="flex w-full items-center border-b border-primary/10 px-2 py-3">
             <div>
               <motion.button
                 onClick={toggleCollapse}
@@ -106,7 +109,11 @@ export const Appbar = () => {
             </div>
           </div>
           <div className="flex flex-col gap-8 p-2">
-            <SidebarItems items={menuOptions} isCollapsed={isCollapsed} setIsCollapsed={setIsCollapsed}/>
+            <SidebarItems
+              items={menuOptions}
+              isCollapsed={isCollapsed}
+              setIsCollapsed={setIsCollapsed}
+            />
           </div>
         </div>
       </motion.nav>
@@ -119,7 +126,11 @@ export const Appbar = () => {
         className="fixed bottom-0 left-0 right-0 z-[999] lg:hidden"
       >
         <div className="flex items-center justify-around border-t border-primary/10 bg-background p-4 shadow-xl">
-          <SidebarItems items={menuOptions} isCollapsed={!isMediumToXL} setIsCollapsed={setIsCollapsed} />
+          <SidebarItems
+            items={menuOptions}
+            isCollapsed={!isMediumToXL}
+            setIsCollapsed={setIsCollapsed}
+          />
         </div>
       </motion.nav>
     </>

src/components/AppxVideoPlayer.tsx

@@ -36,9 +36,11 @@ export const AppxVideoPlayer = ({
   if (!url.length) {
     return <p>Loading...</p>;
   }
-  return <iframe
-    src={url}
-    className="w-full rounded-lg aspect-video"
-    allowFullScreen
-  ></iframe >;
+  return (
+    <iframe
+      src={url}
+      className="aspect-video w-full rounded-lg"
+      allowFullScreen
+    ></iframe>
+  );
 };