Refactor CSS to add utility classes for flex center and flex between

prakharsingh-74 · prakharsingh-74 · commit b7844a64e2e3 · 2024-09-15T17:19:37.000+05:30
diff --git a/app/globals.css b/app/globals.css
@@ -2,6 +2,16 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer utilities{
+  .flex-center{
+    @apply flex justify-center items-center;
+  }
+
+  .flex-between{
+    @apply flex justify-between items-center;
+   }
+}
+
 :root {
   --background: #ffffff;
   --foreground: #171717;
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import "./globals.css";
 import { Inter } from "next/font/google";
+import { ClerkProvider } from "@clerk/nextjs";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -17,9 +18,11 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
+      <ClerkProvider>
       <body className={`${inter.className} bg-dark-2`}>
         {children}
       </body>
+      </ClerkProvider>
     </html>
   );
 }
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -21,7 +21,7 @@ const Navbar = () => {
       </Link>
       <div className="flex-between gap-5">
         <SignedIn>
-          <UserButton afterSignOutUrl="/sign-in" />
+          <UserButton/>
         </SignedIn>
 
         <MobileNav />
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
@@ -12,7 +12,7 @@ const Sidebar = () => {
     <section className="sticky left-0 top-0 flex h-screen w-fit flex-col justify-between bg-dark-1 p-6 pt-28 text-white max-sm:hidden lg:w-[264px]">
       <div className="flex flex-1 flex-col gap-6">
         {sidebarLinks.map((link) => {
-          const isActive = pathname === link.route || pathname.startsWith(link.route);
+          const isActive = pathname === link.route || pathname.startsWith(`$(link.route)/`);
           
           return (
             <Link
diff --git a/middleware.ts b/middleware.ts
@@ -0,0 +1,23 @@
+import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'
+
+const protectedRoutes = createRouteMatcher([
+    '/',
+    '/upcoming',
+    '/previous',
+    '/recordings',
+    '/personal-room',
+    '/meeting(.*)'
+])
+
+export default clerkMiddleware((auth, req) => {
+    if(protectedRoutes(req)) auth().protect();
+})
+
+export const config = {
+  matcher: [
+    // Skip Next.js internals and all static files, unless found in search params
+    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
+    // Always run for API routes
+    '/(api|trpc)(.*)',
+  ],
+}
