style: make website look better on mobile

aamirazad · Jun 23, 2024 · c13125a · c13125a
1 parent 30419aa
commit c13125a
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 36 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -34,9 +34,11 @@ export default function RootLayout({
       >
         <body className="">
           <ThemeProvider attribute="class" defaultTheme="dark">
-            <TopNav />
-            <div className="flex flex-col items-center justify-center p-4 px-6">
-              {children}
+            <div className="flex flex-col gap-12 md:gap-0">
+              <TopNav />
+              <div className="flex flex-col items-center justify-center p-4 px-6">
+                {children}
+              </div>
             </div>
           </ThemeProvider>
         </body>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -2,8 +2,8 @@ import OpenLinkInNewPage from "@/components/open-link-in-new-page";
 
 export default async function HomePage() {
   return (
-    <main className="">
-      <div className="">
+    <main>
+      <div>
         <div>Welcome to Homelab Connector</div>
         <div>
           Check out the

diff --git a/src/components/topnav.tsx b/src/components/topnav.tsx
@@ -16,7 +16,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import Image from "next/image";
 import { useUser } from "@clerk/nextjs";
-import { User } from "lucide-react";
+import { AlignJustify, User } from "lucide-react";
 import { useRouter } from "next/navigation";
 import {
   AlertDialog,
@@ -32,7 +32,6 @@ import {
 function UserSettings() {
   const { user } = useUser();
   const { openUserProfile, signOut } = useClerk();
-  const router = useRouter();
 
   return (
     <AlertDialog>
@@ -45,20 +44,22 @@ function UserSettings() {
               height={32}
               priority={true}
               alt="Avatar"
-              className="mt-1 overflow-hidden rounded-full"
+              className="overflow-hidden rounded-full"
             />
           ) : (
             <User className="h-6 w-8" />
           )}
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end">
-          <DropdownMenuLabel>My Account</DropdownMenuLabel>
+          <DropdownMenuLabel>
+            {user?.fullName ? user.fullName : <>My Account</>}{" "}
+          </DropdownMenuLabel>
           <DropdownMenuSeparator />
           <DropdownMenuItem onClick={() => openUserProfile()}>
             Manage Account
           </DropdownMenuItem>
-          <DropdownMenuItem onClick={() => router.push("/settings")}>
-            Settings
+          <DropdownMenuItem asChild>
+            <Link href="settings">Settings</Link>
           </DropdownMenuItem>
           <DropdownMenuSeparator />
           <AlertDialogTrigger>
@@ -89,50 +90,79 @@ function UserSettings() {
 
 export function TopNav() {
   return (
-    <nav className="flex justify-center">
-      <div className="m-4 flex h-10 w-3/4 flex-wrap items-center justify-between rounded-bl-md rounded-tl-md bg-slate-200 text-xl dark:bg-slate-900">
-        <div className="flex w-64">
+    <nav className="flex w-full justify-center">
+      <div className="mt-4 flex h-10 w-56 flex-wrap items-center justify-center text-xl md:w-1/2 md:flex-nowrap md:justify-between md:rounded-l md:bg-slate-200 md:dark:bg-slate-900">
+        <div className="flex-col rounded bg-slate-200 dark:bg-slate-900 md:flex md:flex-none md:rounded-l">
           <Link
             href="/"
             className={`${buttonVariants({ variant: "link" })} text-xl font-bold`}
           >
             Homelab Connector
           </Link>
         </div>
-        <div className="flex h-full items-center rounded-br-md rounded-tr-md bg-slate-300 dark:bg-slate-700">
+        {/* Desktop links */}
+        <div className="hidden h-full items-center rounded-l rounded-r bg-slate-300 dark:bg-slate-700 md:flex md:rounded-l-none">
           <Link
             href="paperless"
             className={buttonVariants({ variant: "link" })}
           >
             Paperless-ngx
           </Link>
           <Separator orientation="vertical" />
-          <div>
-            <Tooltip text="Comming soon!">
-              <Button
-                variant="link"
-                className="pointer-events-none opacity-50"
-                aria-disabled="true"
-                tabIndex={-1}
-              >
-                Immich
-              </Button>
-            </Tooltip>
-          </div>
+          <Tooltip text="Comming soon!">
+            <Button
+              variant="link"
+              className="pointer-events-none opacity-50"
+              aria-disabled="true"
+              tabIndex={-1}
+            >
+              Immich
+            </Button>
+          </Tooltip>
           <Separator orientation="vertical" />
-          <div>
-            <div className={buttonVariants({ variant: "link" })}>
-              <SignedOut>
-                <SignInButton />
-              </SignedOut>
-              <SignedIn>
-                <UserSettings />
-              </SignedIn>
-            </div>
+          <div className={buttonVariants({ variant: "link" })}>
+            <SignedOut>
+              <SignInButton />
+            </SignedOut>
+            <SignedIn>
+              <UserSettings />
+            </SignedIn>
           </div>
           <Separator orientation="vertical" />
           <ModeToggle />
         </div>
+        {/* Mobile dropdown */}
+        <div className="flex h-full items-center rounded-l rounded-r bg-slate-300 dark:bg-slate-700 md:hidden md:rounded-l-none">
+          <DropdownMenu>
+            <DropdownMenuTrigger>
+              <AlignJustify />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuLabel>Links</DropdownMenuLabel>
+              <DropdownMenuItem asChild>
+                <Link
+                  href="paperless"
+                  className={buttonVariants({ variant: "link" })}
+                >
+                  Paperless-ngx
+                </Link>
+              </DropdownMenuItem>
+              <DropdownMenuItem asChild>
+                <Tooltip text="Comming soon!">
+                  <Button
+                    variant="link"
+                    className="pointer-events-none opacity-50"
+                    aria-disabled="true"
+                    tabIndex={-1}
+                  >
+                    Immich
+                  </Button>
+                </Tooltip>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <UserSettings />
+        </div>
       </div>
     </nav>
   );