style: figure out responsive issues

2023-09-12 23:12:12 -05:00
parent b441b781a0
commit 272a74cf5d
10 changed files with 191 additions and 89 deletions
@@ -8,8 +8,9 @@ export default function AccountPage() {
      <UserProfile
        appearance={{
          elements: {
-            card: 'shadow-md dark:bg-secondary-gray [&_*:not(button):not(a)]:dark:text-white',
-            navbar: 'dark:bg-secondary-gray [&_*]:dark:text-white',
+            card: 'sm:pb-4 shadow-md dark:bg-secondary-gray [&_*:not(button):not(a)]:dark:text-white [&_.cl-internal-b3fm6y]:hidden',
+            navbar: 'hidden',
+            navbarMobileMenuRow: 'hidden',
            formFieldInput: 'dark:bg-primary-gray dark:text-white',
            profileSectionTitle: 'dark:border-white dark:border-opacity-10',
            breadcrumbsItem: 'dark:text-white',
@@ -25,7 +25,7 @@ export default function RootLayout({
      suppressHydrationWarning
    >
      <body
-        className={`w-full h-full flex flex-col bg-white text-primary-gray dark:bg-primary-gray dark:text-white ${inter.className} overflow-auto`}
+        className={`w-full h-full flex flex-col bg-white text-primary-gray dark:bg-primary-gray dark:text-white ${inter.className}`}
      >
        <ClerkProvider
          publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}
@@ -37,7 +37,7 @@ export default function RootLayout({
                showSpinner={false}
              />
              <Navbar />
-              <div className='p-4 w-full h-full flex flex-col'>
+              <div className='flex flex-col p-4 w-full h-full overflow-y-auto'>
                {children}
                <Footer />
              </div>
@@ -4,11 +4,11 @@ import { SignIn } from '@clerk/nextjs';

 export default function LoginPage() {
  return (
-    <main className='flex flex-col items-center'>
+    <main className='flex flex-col flex-1 items-center'>
      <SignIn
        appearance={{
          elements: {
-            card: 'shadow-md dark:bg-secondary-gray [&_*:not(button):not(a)]:dark:text-white',
+            card: 'shadow-md dark:bg-secondary-gray [&_*:not(button):not(a)]:dark:text-white [&_.cl-internal-b3fm6y]:hidden',
            socialButtonsIconButton__github:
              'hover:bg-gradient-to-br from-blue-600 via-purple-600 to-red-600 dark:border-white dark:border-opacity-10',
            socialButtonsIconButton__google:
@@ -28,14 +28,14 @@ export default function PostPage({

  return (
    <main className='flex flex-col flex-1 w-full items-center'>
-      <div className='flex flex-col items-center w-full max-w-4xl gap-4'>
+      <div className='flex flex-col w-full max-w-4xl gap-4'>
        {post === undefined ? (
          <div className='flex items-center gap-2'>
            <SpinningLoader className='animate-spin w-5 h-5' /> Loading post...
          </div>
        ) : (
          <>
-            <div className='p-1 rounded-md border border-gray-600'>
+            <div className='flex flex-col min-w-0 p-1 rounded-md border border-gray-600'>
              <Post
                post={post}
                limit={false}
@@ -54,7 +54,9 @@ export default function PostPage({
                  />
                </div>
              )}
-              <Editor />
+              <div className='flex w-full'>
+                <Editor parentPostId={post._id} />
+              </div>
            </div>
          </>
        )}
@@ -4,11 +4,11 @@ import { SignUp } from '@clerk/nextjs';

 export default function SignUpPage() {
  return (
-    <main className='flex flex-col items-center'>
+    <main className='flex flex-col flex-1 items-center'>
      <SignUp
        appearance={{
          elements: {
-            card: 'shadow-md dark:bg-secondary-gray [&_*:not(button):not(a):not(svg)]:dark:text-white',
+            card: 'shadow-md dark:bg-secondary-gray [&_*:not(button):not(a):not(svg)]:dark:text-white [&_.cl-internal-b3fm6y]:hidden',
            socialButtonsIconButton__github:
              'hover:bg-gradient-to-br from-blue-600 via-purple-600 to-red-600 dark:border-white dark:border-opacity-10',
            socialButtonsIconButton__google:
@@ -12,10 +12,16 @@ import { basicSetup } from 'codemirror';
 import { useMutation } from 'convex/react';
 import { FormEvent, useState } from 'react';
 import { api } from '../../convex/_generated/api';
-import { Doc } from '../../convex/_generated/dataModel';
+import { Doc, Id } from '../../convex/_generated/dataModel';
 import PostContent from './PostContent';

-export default function Editor({ post }: { post?: Doc<'posts'> }) {
+export default function Editor({
+  parentPostId,
+  post,
+}: {
+  parentPostId?: Id<'posts'>;
+  post?: Doc<'posts'>;
+}) {
  const { user, isSignedIn } = useUser();
  const editorTheme = new Compartment();
  const [currentDoc, setCurrentDoc] = useState(post?.content ?? ['']);
@@ -52,6 +58,7 @@ export default function Editor({ post }: { post?: Doc<'posts'> }) {
      setCreatingOrUpdating(true);

      const result = await createOrUpdatePost({
+        parentPostId: parentPostId,
        id: post?._id,
        clerkUserId: user.id,
        content: currentDoc,
@@ -1,16 +1,39 @@
-import { SignedIn, SignedOut, currentUser } from '@clerk/nextjs';
+'use client';
+
+import { SignedIn, SignedOut, useUser } from '@clerk/nextjs';
 import Link from 'next/link';
-import { BiPlus, BiSolidMessageSquare } from 'react-icons/bi';
+import { useEffect, useState } from 'react';
+import { BiLogIn, BiPlus } from 'react-icons/bi';
+import { BsPersonPlusFill } from 'react-icons/bs';
+import { ImProfile } from 'react-icons/im';
+import {
+  RiMenuFoldLine,
+  RiMenuUnfoldLine,
+  RiUserFollowFill,
+} from 'react-icons/ri';
 import ThemeButton from './ThemeButton';
 import UserButton from './UserButton';

-export default async function Navbar() {
-  const user = await currentUser();
+export default function Navbar() {
+  const { user } = useUser();
+  const [navOpen, setNavOpen] = useState(false);
+
+  useEffect(() => {
+    function handler() {
+      if (navOpen) {
+        setNavOpen(false);
+      }
+    }
+
+    window.addEventListener('resize', handler);
+
+    return () => window.removeEventListener('resize', handler);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);

  return (
-    <nav className='flex items-center justify-between p-5 shadow-md dark:bg-secondary-gray'>
-      <ul className='flex items-center gap-4'>
-        <li>
+    <nav className='flex flex-col items-center gap-4 p-5 shadow-md dark:bg-secondary-gray md:flex-row md:justify-between'>
+      <div className='flex items-center justify-between w-full md:max-w-min'>
        <Link
          href='/'
          className='italic'
@@ -18,54 +41,111 @@ export default async function Navbar() {
          conve
          <span className='font-bold text-4xl text-primary-accent'>X</span>
        </Link>
-        </li>
+        <button
+          onClick={() => setNavOpen(!navOpen)}
+          type='button'
+          className='flex items-center justify-center md:hidden'
+        >
+          {navOpen ? <RiMenuUnfoldLine /> : <RiMenuFoldLine />}
+        </button>
+      </div>
+      <div
+        className='hidden flex-1 flex-col gap-4 w-full items-center md:flex md:flex-row md:justify-between'
+        style={{ display: navOpen ? 'flex' : '' }}
+      >
+        <ul className='flex flex-col w-full items-start gap-4 md:flex-row md:items-center md:max-w-min'>
          <SignedIn>
-          <li>
-            {/* TODO: Style this */}
-            <div>
+            <li className='flex w-full'>
+              <div className='flex w-full'>
                <input
                  type='text'
                  placeholder='Search'
+                  className='w-full md:w-[unset] py-1 px-2 rounded-md border border-gray-600 dark:bg-primary-gray dark:border-0'
                />
              </div>
            </li>
            <li>
-            <Link href='#'>Following</Link>
-          </li>
-          <li>
-            <Link href={`/profile/${user?.id}`}>Profile</Link>
-          </li>
-          <li>
-            <div className='mx-4'>
+              <div className='flex items-center gap-2'>
+                <div className='p-1 md:hidden'>
+                  <RiUserFollowFill className='w-6 h-6' />
+                </div>
                <Link
-                href='/posts/add'
-                className='relative'
+                  onClick={() => setNavOpen(false)}
+                  href='#'
                >
-                <BiSolidMessageSquare className='absolute w-10 h-10 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-primary-accent' />
-                <BiPlus className='absolute w-5 h-5 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white' />
+                  Following
                </Link>
              </div>
            </li>
+            <li>
+              <div className='flex items-center gap-2'>
+                <div className='p-1 md:hidden'>
+                  <ImProfile className='w-6 h-6' />
+                </div>
+                <Link
+                  onClick={() => setNavOpen(false)}
+                  href={`/profile/${user?.id}`}
+                >
+                  Profile
+                </Link>
+              </div>
+            </li>
+            <li className='flex items-center gap-2 max-w-min whitespace-nowrap'>
+              <div className='p-1 bg-primary-accent rounded-md rounded-bl-none'>
+                <Link
+                  onClick={() => setNavOpen(false)}
+                  href='/posts/add'
+                >
+                  <BiPlus className='w-6 h-6 text-white' />
+                </Link>
+              </div>
+              <span className='md:hidden'>Add Post</span>
+            </li>
          </SignedIn>
        </ul>
-      <ul className='flex items-center gap-4'>
-        <li>
+        <ul className='flex flex-col w-full items-start gap-4 md:flex-row md:items-center md:max-w-min'>
+          <li className='flex items-center gap-2'>
+            <div className='p-1'>
              <ThemeButton />
+            </div>
+            <span className='md:hidden'>Change Theme</span>
          </li>
          <SignedIn>
-          <li>
+            <li className='flex items-center gap-2'>
              <UserButton />
+              <span className='md:hidden'>Manage Account</span>
            </li>
          </SignedIn>
          <SignedOut>
            <li>
-            <Link href='/login'>Sign in</Link>
+              <div className='flex items-center gap-2'>
+                <div className='p-1 md:hidden'>
+                  <BiLogIn className='w-6 h-6' />
+                </div>
+                <Link
+                  href='/login'
+                  className='whitespace-nowrap'
+                >
+                  Sign in
+                </Link>
+              </div>
            </li>
            <li>
-            <Link href='/signup'>Sign up</Link>
+              <div className='flex items-center gap-2'>
+                <div className='p-1 md:hidden'>
+                  <BsPersonPlusFill className='w-6 h-6' />
+                </div>
+                <Link
+                  href='/signup'
+                  className='whitespace-nowrap'
+                >
+                  Sign up
+                </Link>
+              </div>
            </li>
          </SignedOut>
        </ul>
+      </div>
    </nav>
  );
 }
@@ -63,8 +63,8 @@ export default function Post({
  }

  return (
-    <div className='flex w-full gap-4 p-8 bg-white dark:bg-secondary-gray'>
-      <div>
+    <div className='flex w-full gap-4 p-8 bg-white dark:bg-secondary-gray flex-wrap'>
+      <div className='flex-shrink-0'>
        <Image
          alt='user profile image'
          src={post.user.clerkImageUrl}
@@ -73,15 +73,22 @@ export default function Post({
          className='rounded-full object-cover border-4 border-primary-accent'
        />
      </div>
-      <div className='flex flex-1 flex-col gap-2'>
+      <div className='flex flex-1 flex-col gap-2 min-w-0'>
        <div className='flex items-center justify-between gap-2'>
+          <div className='flex items-center gap-2 flex-wrap min-w-0'>
+            <div
+              className='overflow-hidden text-ellipsis'
+              title={username}
+            >
+              {username}
+            </div>
            <div className='flex items-center gap-2'>
-            <div>{username}</div>
              <GoDotFill className='w-3 h-3' />
              <div className='text-xs'>
                {`${postMonth} ${dayOfMonth}, ${postYear}`}
              </div>
            </div>
+          </div>
          <div className='relative'>
            <button onClick={() => setModalOpen(!modalOpen)}>
              <BiDotsHorizontalRounded />
@@ -114,7 +121,7 @@ export default function Post({
          </div>
        </div>
        <div
-          className={`${limit ? 'max-h-80' : ''} overflow-hidden text-ellipsis`}
+          className={`${limit ? 'max-h-80' : ''} flex flex-col overflow-hidden`}
        >
          <PostContent content={Text.of(content).toString()} />
        </div>
@@ -17,11 +17,11 @@ export default function ThemeButton() {
      onClick={() => setTheme(isDark ? 'light' : 'dark')}
    >
      {mounted === false ? (
-        <Loader className='animate-spin w-5 h-5' />
+        <Loader className='animate-spin w-6 h-6' />
      ) : isDark ? (
-        <BsMoonStarsFill className='w-5 h-5' />
+        <BsMoonStarsFill className='w-6 h-6' />
      ) : (
-        <BsSunFill className='w-5 h-5' />
+        <BsSunFill className='w-6 h-6' />
      )}
    </button>
  );
@@ -12,9 +12,9 @@ export default function UserProfile({ user }: { user: UserDto }) {

  return (
    <div className='w-full'>
-      <div className='shadow-md bg-gradient-to-r from-violet-600 via-violet-600 to-indigo-600 rounded-t-md pt-20 pl-5 pr-40'>
+      <div className='shadow-md bg-gradient-to-r from-violet-600 via-violet-600 to-indigo-600 rounded-t-md pt-20 px-5'>
        <div className='flex items-center gap-4 -mb-[25px]'>
-          <div>
+          <div className='flex-shrink-0'>
            <Image
              alt='user profile image'
              src={user.clerkImageUrl}
@@ -23,8 +23,13 @@ export default function UserProfile({ user }: { user: UserDto }) {
              className='rounded-full object-cover border-4 border-primary-accent'
            />
          </div>
-          <div className='text-white'>
-            <h1 className='font-bold'>{username}</h1>
+          <div className='flex flex-col flex-1 min-w-0 text-white'>
+            <h1
+              className='font-bold overflow-hidden text-ellipsis'
+              title={username}
+            >
+              {username}
+            </h1>
            <div className='flex gap-2 items-center text-sm'>
              <AiFillCalendar className='w-4 h-4' />
              {`Joined ${monthJoined} ${yearJoined}`}