Fixed - Responsive UI for Sidebar and App Bar, videoduration positioning and Sync Course Button

package.json

@@ -41,7 +41,7 @@
     "@prisma/client": "^5.6.0",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-avatar": "^1.0.4",
-    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-navigation-menu": "^1.1.4",

src/app/(main)/(pages)/my-courses/page.tsx

@@ -1,5 +1,6 @@
 import { MyCourses } from '@/components/MyCourses';
 import { Redirect } from '@/components/Redirect';
+import { RefreshDb } from '@/components/RefreshDb';
 import { getServerSession } from 'next-auth';
 
 export default async function MyCoursesPage() {
@@ -11,9 +12,12 @@ export default async function MyCoursesPage() {
 
   return (
     <div className="flex h-screen flex-col">
-      <h1 className="bg-background/6 top-0 flex items-center p-5 text-3xl backdrop-blur-lg">
-        My Courses
-      </h1>
+      <div className="flex w-full items-center justify-between p-4">
+        <h1 className="bg-background/6 top-0 flex items-center text-3xl backdrop-blur-lg">
+          My Courses
+        </h1>
+        <RefreshDb />
+      </div>
       <main className="no-scrollbar mb-10 flex h-full flex-col overflow-y-scroll text-lg">
         <MyCourses />
       </main>

src/components/Appbar.tsx

@@ -1,21 +1,22 @@
 'use client';
 
+import { useSession } from 'next-auth/react';
 import Link from 'next/link';
 import { AppbarAuth } from './AppbarAuth';
-import { useSession } from 'next-auth/react';
 /* import { useRecoilState } from 'recoil'; */
 /* import { sidebarOpen as sidebarOpenAtom } from '../store/atoms/sidebar'; */
 /* import { usePathname } from 'next/navigation'; */
 import clsx from 'clsx';
-import Logo from './landing/logo/logo';
-import { Button } from './ui/button';
 import { Sparkles } from 'lucide-react';
 import { NavigationMenu } from './landing/appbar/nav-menu';
-import SearchBar from './search/SearchBar';
-import MobileScreenSearch from './search/MobileScreenSearch';
+import Logo from './landing/logo/logo';
 import ProfileDropdown from './profile-menu/ProfileDropdown';
-import { ThemeToggler } from './ThemeToggler';
 import { SelectTheme } from './profile-menu/SelectTheme';
+import MobileScreenSearch from './search/MobileScreenSearch';
+import SearchBar from './search/SearchBar';
+import { ThemeToggler } from './ThemeToggler';
+import { Button } from './ui/button';
+import MobileNav from './sidebar/MobileNav';
 
 export const Appbar = ({
   className,
@@ -38,6 +39,11 @@ export const Appbar = ({
           {session?.user ? (
             !isLoading && (
               <>
+                <div className="flex items-center gap-2 md:hidden">
+                  <MobileNav />
+                  <Logo onFooter={false} label="" />
+                </div>
+
                 <div className="hidden md:block">
                   <SearchBar />
                 </div>

src/components/ContentCard.tsx

@@ -40,11 +40,6 @@ export const ContentCard = ({
           <CheckCircle2 color="green" size={30} fill="lightgreen" />
         </div>
       )}
-      {type === 'video' && (
-        <div className="text-blue-900g absolute bottom-12 right-2 z-10 rounded-md bg-zinc-900 p-1 px-2 font-semibold text-white">
-          {contentDuration && formatTime(contentDuration)}
-        </div>
-      )}
       {type !== 'video' && (
         <div className="relative overflow-hidden rounded-md">
           <CardComponent
@@ -72,6 +67,9 @@ export const ContentCard = ({
             //   'https://d2szwvl7yo497w.cloudfront.net/courseThumbnails/video.png'
             // }
           />
+          <div className="text-blue-900g absolute bottom-4 right-4 z-10 rounded-md bg-zinc-900 p-1 px-2 font-semibold text-white">
+            {contentDuration && formatTime(contentDuration)}
+          </div>
         </div>
       )}
 

src/components/CourseCard.tsx

@@ -27,7 +27,7 @@ export const CourseCard = ({
   const router = useRouter();
   return (
     <div
-      className={`flex max-w-sm flex-col border border-gray-200 bg-white ${roundedClassName} w-full shadow transition-colors duration-300 ease-in-out hover:bg-[#E2E8F0] dark:border dark:border-gray-700/50 dark:bg-[#020817] hover:dark:bg-[#1E293B]`}
+      className={`flex max-w-sm flex-col border border-gray-200 bg-white max-sm:max-w-full ${roundedClassName} w-full shadow transition-colors duration-300 ease-in-out hover:bg-[#E2E8F0] dark:border dark:border-gray-700/50 dark:bg-[#020817] hover:dark:bg-[#1E293B]`}
       onClick={onClick}
     >
       <img

src/components/RefreshDb.tsx

@@ -1,10 +1,12 @@
 'use client';
-import { Button } from './ui/button';
-import { toast } from 'sonner';
+import { refreshDb } from '@/actions/refresh-db';
+import { RefreshCw } from 'lucide-react';
 import { useSession } from 'next-auth/react';
+import { toast } from 'sonner';
+import { Button } from './ui/button';
 
 //@ts-ignore
-export function RefreshDb({ refreshDb }) {
+export function RefreshDb() {
   const session = useSession();
 
   const handleClick = async () => {
@@ -20,11 +22,14 @@ export function RefreshDb({ refreshDb }) {
   if (session.status === 'loading') return <>Loading...</>;
 
   return (
-    <div className="mx-auto flex flex-col gap-2">
-      <h1>Don't see all your courses?</h1>
-      <Button className="dark:text-white" onClick={handleClick}>
-        Refresh Database
-      </Button>
-    </div>
+    <Button
+      variant={'outline'}
+      className="flex items-center gap-2 text-[#64748B] dark:text-[#94A3B8]"
+    >
+      <RefreshCw size={16} />
+      <span className="dark:text-white" onClick={handleClick}>
+        Sync Courses
+      </span>
+    </Button>
   );
 }

src/components/landing/logo/logo.tsx

@@ -1,12 +1,18 @@
-import Link from 'next/link';
-import localFont from 'next/font/local';
 import { cn } from '@/lib/utils';
+import localFont from 'next/font/local';
+import Link from 'next/link';
 
 const headingFont = localFont({
   src: '../../../../public/fonts/font.woff2',
 });
 
-const Logo = ({ onFooter = false }: { onFooter: boolean }) => {
+const Logo = ({
+  onFooter = false,
+  label = '100xdevs',
+}: {
+  onFooter: boolean;
+  label?: string;
+}) => {
   return (
     <Link href={'/'}>
       <div className="flex items-center gap-x-2 transition hover:opacity-90">
@@ -18,15 +24,17 @@ const Logo = ({ onFooter = false }: { onFooter: boolean }) => {
           height={30}
           width={30}
         />
-        <p
-          className={cn(
-            'text-neutral-700 dark:text-neutral-100',
-            onFooter ? 'text-3xl text-neutral-200' : 'text-xl',
-            headingFont.className,
-          )}
-        >
-          100xdevs
-        </p>
+        {label && (
+          <p
+            className={cn(
+              'text-neutral-700 dark:text-neutral-100',
+              onFooter ? 'text-3xl text-neutral-200' : 'text-xl',
+              headingFont.className,
+            )}
+          >
+            {label}
+          </p>
+        )}
       </div>
     </Link>
   );

src/components/search/MobileScreenSearch.tsx

@@ -1,6 +1,7 @@
 import { SearchIcon, XIcon } from 'lucide-react';
 import { useState } from 'react';
 import SearchBar from './SearchBar';
+import { Button } from '../ui/button';
 
 const MobileScreenSearch = () => {
   const [showSearchBar, setShowSearchBar] = useState(false);
@@ -16,7 +17,9 @@ const MobileScreenSearch = () => {
           <XIcon onClick={toggleSearchBar} />
         </div>
       ) : (
-        <SearchIcon onClick={toggleSearchBar} size={20} className="mx-2" />
+        <Button variant={'outline'} size={'icon'}>
+          <SearchIcon onClick={toggleSearchBar} size={20} className="mx-2" />
+        </Button>
       )}
     </div>
   );

src/components/sidebar/MobileNav.tsx

@@ -0,0 +1,71 @@
+import { AnimatedTooltip } from '@/components/ui/animated-tooltip';
+import { LogOut, PanelLeftOpen, PanelRightOpen } from 'lucide-react';
+import { signOut } from 'next-auth/react';
+import React from 'react';
+import Logo from '../landing/logo/logo';
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetTrigger,
+} from '../ui/sheet';
+import { menuOptions } from './index';
+
+const MobileNav = () => {
+  const expanded = true;
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <div className="cursor-pointer p-2">
+          <PanelLeftOpen size={24} />
+        </div>
+      </SheetTrigger>
+
+      <SheetContent
+        side="left"
+        className="background-light900_dark200 !max-w-[260px] border-none p-0"
+      >
+        <nav className="flex h-full flex-col bg-white shadow-sm dark:bg-[#020817]">
+          {/* Header with logo and expand/collapse button */}
+          <SheetHeader>
+            <div className="flex items-center justify-between border-b p-4">
+              <div className="h-30 w-30">
+                <Logo onFooter={false} />
+              </div>
+              <SheetClose asChild>
+                <div className="cursor-pointer">
+                  <div className="p-2">
+                    <PanelRightOpen size={24} />
+                  </div>
+                </div>
+              </SheetClose>
+            </div>
+          </SheetHeader>
+
+          <div className="boarder border-gray flex flex-1 flex-col gap-6 p-4">
+            <AnimatedTooltip expanded={expanded} items={menuOptions} />
+          </div>
+
+          <div className="border-t p-4">
+            <div className="flex rounded-md bg-[#DC26261A] p-2 dark:bg-[#DC26261A]">
+              <LogOut size={24} color="#DD503F" />
+              <button
+                onClick={() => {
+                  signOut();
+                }}
+                className={`flex items-center justify-between overflow-hidden transition-all ${
+                  expanded ? 'ml-3 w-52' : 'w-0'
+                }`}
+              >
+                <h4 className="font-semibold text-[#DD503F]">Logout</h4>
+              </button>
+            </div>
+          </div>
+        </nav>
+      </SheetContent>
+    </Sheet>
+  );
+};
+
+export default MobileNav;

src/components/sidebar/index.tsx

@@ -24,7 +24,7 @@ export const MenuOptions = () => {
   const [expanded, setExpanded] = useState(true);
 
   return (
-    <aside className="h-screen">
+    <aside className="h-screen max-md:hidden">
       <nav className="flex h-full flex-col border-r bg-white shadow-sm dark:bg-[#020817]">
         {/* Header with logo and expand/collapse button */}
         <div className="flex items-center justify-between border-b p-4 pb-2">
@@ -48,7 +48,7 @@ export const MenuOptions = () => {
         </div>
 
         <div className="border-t p-4">
-          <div className="flex rounded-md p-2">
+          <div className="flex rounded-md bg-[#DC26261A] p-2 dark:bg-[#DC26261A]">
             <LogOut size={24} color="#DD503F" />
             <button
               onClick={() => {

src/components/ui/animated-tooltip.tsx

@@ -1,13 +1,14 @@
 'use client';
-import React, { useState } from 'react';
-import Link from 'next/link';
 import {
-  motion,
-  useTransform,
   AnimatePresence,
+  motion,
   useMotionValue,
   useSpring,
+  useTransform,
 } from 'framer-motion';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import React, { useState } from 'react';
 
 export const AnimatedTooltip = ({
   items,
@@ -21,6 +22,7 @@ export const AnimatedTooltip = ({
   }[];
   expanded: any;
 }) => {
+  const pathName = usePathname();
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
   const springConfig = { stiffness: 100, damping: 5 };
   const x = useMotionValue(0); // going to set this value on mouse move
@@ -34,6 +36,7 @@ export const AnimatedTooltip = ({
     useTransform(x, [-100, 100], [-50, 50]),
     springConfig,
   );
+
   return (
     <>
       {items.map((item) => (
@@ -77,7 +80,7 @@ export const AnimatedTooltip = ({
           )}
           <Link
             href={item.href}
-            className={`flex flex-row ${hoveredIndex === item.id && 'rounded-md bg-gray-700/50'} items-center space-x-6 p-2`}
+            className={`flex flex-row ${(hoveredIndex === item.id || pathName === item.href) && 'rounded-md bg-[#F1F5F9] dark:bg-[#1E293B]'} items-center space-x-6 p-2`}
           >
             <item.Component selected={hoveredIndex === item.id} size={25} />
             {expanded && <h4 className="font-semibold">{item.name}</h4>}