alifarooq9 · alifarooq9 · May 6, 2024 · May 5, 2024 · May 5, 2024 · May 6, 2024
diff --git a/starterkits/saas/src/app/(app)/(user)/dashboard/page.tsx b/starterkits/saas/src/app/(app)/(user)/dashboard/page.tsx
@@ -15,7 +15,7 @@ export default function DashboardPage() {
             description={dashboardPageConfig.description}
         >
             <div className="grid gap-6">
-                <div className="grid grid-cols-4 gap-4">
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4">
                     <Card>
                         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                             <CardTitle className="text-sm font-medium">

diff --git a/starterkits/saas/src/app/(app)/(user)/feedback/page.tsx b/starterkits/saas/src/app/(app)/(user)/feedback/page.tsx
@@ -11,6 +11,7 @@ import {
 import { format } from "date-fns";
 import { Badge } from "@/components/ui/badge";
 import { FeedbackDropdown } from "@/app/(app)/(user)/feedback/_components/feedback-dropdown";
+import Balancer from "react-wrap-balancer";
 
 export default async function UserFeedbackPage() {
     const feedbacks = await getUserFeedbacksQuery();
@@ -21,7 +22,7 @@ export default async function UserFeedbackPage() {
             description={userFeedbackPageConfig.description}
         >
             <div className="flex w-full items-start justify-between">
-                <h2 className="text-lg font-medium">
+                <h2 className="text-base font-medium sm:text-lg">
                     {feedbacks.length} feedbacks you have created.
                 </h2>
 
@@ -68,10 +69,13 @@ export default async function UserFeedbackPage() {
                         <p className="font-medium text-muted-foreground">
                             No feedbacks found.
                         </p>
-                        <p className="text-muted-foreground">
+                        <Balancer
+                            as="p"
+                            className="text-center text-muted-foreground"
+                        >
                             Create a feedback using the form above, your
                             feedback is important to us. 🚀
-                        </p>
+                        </Balancer>
                     </div>
                 )}
             </div>

diff --git a/starterkits/saas/src/app/(app)/(user)/org/billing/_components/available-plans.tsx b/starterkits/saas/src/app/(app)/(user)/org/billing/_components/available-plans.tsx
@@ -26,7 +26,7 @@ export function AvailablePlans({ subscription }: AvailablePlansProps) {
                 </CardDescription>
             </CardHeader>
             <CardContent>
-                <div className="grid grid-cols-2 gap-5">
+                <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
                     {pricingPlans.map((plan) => (
                         <div key={plan.id} className="space-y-4">
                             <CardTitle>{plan.title}</CardTitle>

diff --git a/starterkits/saas/src/app/(app)/(user)/org/billing/_components/current-plan.tsx b/starterkits/saas/src/app/(app)/(user)/org/billing/_components/current-plan.tsx
@@ -64,7 +64,7 @@ export function CurrentPlan({ subscription }: CurrentPlanProps) {
                     </p>
                 </div>
 
-                <div className="flex items-center justify-between">
+                <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                     <form
                         action={async () => {
                             "use server";

diff --git a/starterkits/saas/src/app/(app)/(user)/org/members/invite/_components/org-requests.tsx b/starterkits/saas/src/app/(app)/(user)/org/members/invite/_components/org-requests.tsx
@@ -134,7 +134,7 @@ function RequestItem({ request }: RequestItemProps) {
     };
 
     return (
-        <div className="flex items-center justify-between space-x-4">
+        <div className="flex flex-col items-start justify-start gap-4 sm:flex-row sm:items-center sm:justify-between">
             <div className="flex items-center space-x-4">
                 <Avatar>
                     <AvatarImage src={request.user.image!} />

diff --git a/starterkits/saas/src/app/(app)/(user)/org/settings/loading.tsx b/starterkits/saas/src/app/(app)/(user)/org/settings/loading.tsx
@@ -8,7 +8,7 @@ export default function OrgSettingsLoading() {
             title={orgSettingsPageConfig.title}
             description={orgSettingsPageConfig.description}
         >
-            <div className="grid grid-cols-2 gap-4">
+            <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2">
                 <Skeleton className="h-60 w-full" />
                 <Skeleton className="h-60 w-full" />
                 <Skeleton className="h-60 w-full" />

diff --git a/starterkits/saas/src/app/(app)/(user)/org/settings/page.tsx b/starterkits/saas/src/app/(app)/(user)/org/settings/page.tsx
@@ -13,7 +13,7 @@ export default async function OrgSettingsPage() {
             title={orgSettingsPageConfig.title}
             description={orgSettingsPageConfig.description}
         >
-            <div className="grid w-full grid-cols-2 gap-4">
+            <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2">
                 <OrgImageForm currentOrg={currentOrg} />
 
                 <OrgNameForm currentOrg={currentOrg} key={currentOrg.id} />

diff --git a/starterkits/saas/src/app/(app)/(user)/profile/settings/loading.tsx b/starterkits/saas/src/app/(app)/(user)/profile/settings/loading.tsx
@@ -8,7 +8,7 @@ export default function ProfileSettingsLoading() {
             title={profileSettingsPageConfig.title}
             description={profileSettingsPageConfig.description}
         >
-            <div className="grid grid-cols-2 gap-4">
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                 <Skeleton className="h-60 w-full" />
                 <Skeleton className="h-60 w-full" />
                 <Skeleton className="h-60 w-full" />

diff --git a/starterkits/saas/src/app/(app)/(user)/profile/settings/page.tsx b/starterkits/saas/src/app/(app)/(user)/profile/settings/page.tsx
@@ -20,7 +20,7 @@ export default async function SettingsPage() {
             title={profileSettingsPageConfig.title}
             description={profileSettingsPageConfig.description}
         >
-            <div className="mt-10 grid w-full grid-cols-2 gap-4">
+            <div className="mt-10 grid w-full grid-cols-1 gap-4 sm:grid-cols-2">
                 <UserImageForm user={user as User} />
 
                 <UserNameForm user={user as User} />

diff --git a/starterkits/saas/src/app/(app)/_components/app-header.tsx b/starterkits/saas/src/app/(app)/_components/app-header.tsx
@@ -0,0 +1,25 @@
+import { MobileSidenav } from "@/app/(app)/_components/mobile-sidenav";
+import { Icons } from "@/components/ui/icons";
+
+type AppHeaderProps = {
+    sidebarNavIncludeIds?: string[];
+    sidebarNavRemoveIds?: string[];
+    showOrgSwitcher?: boolean;
+};
+
+export function AppHeader({
+    sidebarNavIncludeIds,
+    sidebarNavRemoveIds,
+    showOrgSwitcher,
+}: AppHeaderProps) {
+    return (
+        <header className="flex h-14 items-center gap-4">
+            <MobileSidenav
+                showOrgSwitcher={showOrgSwitcher}
+                sidebarNavIncludeIds={sidebarNavIncludeIds}
+                sidebarNavRemoveIds={sidebarNavRemoveIds}
+            />
+            <Icons.logo hideTextOnMobile={false} />
+        </header>
+    );
+}
diff --git a/starterkits/saas/src/app/(app)/_components/data-table-pagination.tsx b/starterkits/saas/src/app/(app)/_components/data-table-pagination.tsx
@@ -30,7 +30,7 @@ export function DataTablePagination<TData>({
         <div className="flex w-full flex-col items-center justify-between gap-4 overflow-auto px-2 py-1 sm:flex-row sm:gap-8">
             <p className="flex-1 text-sm text-muted-foreground">
                 {totalRows}
-                <span className="hidden lg:inline">&nbsp;result(s) found</span>
+                <span className="inline">&nbsp;result(s) found</span>
             </p>
             <div className="flex flex-col items-center gap-4 sm:flex-row sm:gap-6 lg:gap-8">
                 <div className="flex items-center space-x-2">

diff --git a/starterkits/saas/src/app/(app)/_components/layout-shell.tsx b/starterkits/saas/src/app/(app)/_components/layout-shell.tsx
@@ -1,3 +1,4 @@
+import { AppHeader } from "@/app/(app)/_components/app-header";
 import { Sidebar, SidebarLoading } from "@/app/(app)/_components/sidebar";
 import { Suspense } from "react";
 
@@ -22,11 +23,11 @@ export function AppLayoutShell({
     children,
     sideNavIncludedIds,
     sideNavRemoveIds,
-    showOrgSwitcher
+    showOrgSwitcher,
 }: AppLayoutProps) {
     return (
-        <div className="container flex items-start ">
-            <div className="sticky left-0 top-0 h-screen w-60 flex-shrink-0 ">
+        <div className="container flex items-start gap-8">
+            <div className="sticky left-0 top-0 hidden h-screen w-52 flex-shrink-0 lg:block xl:w-60 ">
                 <Suspense fallback={<SidebarLoading />}>
                     <Sidebar
                         sidebarNavIncludeIds={sideNavIncludedIds}
@@ -36,6 +37,13 @@ export function AppLayoutShell({
                 </Suspense>
             </div>
             <section className="min-h-screen w-full flex-grow">
+                <div className="sticky left-0 right-0 top-0 z-50 block border-b border-border bg-background lg:hidden">
+                    <AppHeader
+                        showOrgSwitcher={showOrgSwitcher}
+                        sidebarNavIncludeIds={sideNavIncludedIds}
+                        sidebarNavRemoveIds={sideNavRemoveIds}
+                    />
+                </div>
                 {children}
             </section>
         </div>

diff --git a/starterkits/saas/src/app/(app)/_components/mobile-sidenav.tsx b/starterkits/saas/src/app/(app)/_components/mobile-sidenav.tsx
@@ -0,0 +1,35 @@
+import { Sidebar } from "@/app/(app)/_components/sidebar";
+import { Button } from "@/components/ui/button";
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import { MenuIcon } from "lucide-react";
+
+type MobileSideNavProps = {
+    sidebarNavIncludeIds?: string[];
+    sidebarNavRemoveIds?: string[];
+    showOrgSwitcher?: boolean;
+};
+
+export function MobileSidenav({
+    showOrgSwitcher,
+    sidebarNavIncludeIds,
+    sidebarNavRemoveIds,
+}: MobileSideNavProps) {
+    return (
+        <Sheet>
+            <SheetTrigger asChild>
+                <Button variant="outline" size="iconSmall">
+                    <MenuIcon className="h-4 w-4" />
+                    <p className="sr-only">Open menu</p>
+                </Button>
+            </SheetTrigger>
+            <SheetContent side="left" className="px-3 pb-20 pt-10">
+                <Sidebar
+                    showLogo={false}
+                    showOrgSwitcher={showOrgSwitcher}
+                    sidebarNavIncludeIds={sidebarNavIncludeIds}
+                    sidebarNavRemoveIds={sidebarNavRemoveIds}
+                />
+            </SheetContent>
+        </Sheet>
+    );
+}
diff --git a/starterkits/saas/src/app/(app)/_components/page-shell.tsx b/starterkits/saas/src/app/(app)/_components/page-shell.tsx
@@ -16,7 +16,7 @@ export function AppPageShell({
     const Container = as ?? "main";
 
     return (
-        <div className="w-full space-y-8 pl-8">
+        <div className="w-full space-y-8">
             <PageHeader title={title} description={description} />
             <Container className="space-y-8 pb-8">{children}</Container>
         </div>

diff --git a/starterkits/saas/src/app/(app)/_components/sidebar.tsx b/starterkits/saas/src/app/(app)/_components/sidebar.tsx
@@ -17,6 +17,7 @@ type SideNavProps = {
     sidebarNavIncludeIds?: string[];
     sidebarNavRemoveIds?: string[];
     showOrgSwitcher?: boolean;
+    showLogo?: boolean;
 };
 
 /**
@@ -31,6 +32,7 @@ export async function Sidebar({
     sidebarNavIncludeIds,
     sidebarNavRemoveIds,
     showOrgSwitcher = true,
+    showLogo = true,
 }: SideNavProps) {
     const user = await getUser();
 
@@ -52,17 +54,21 @@ export async function Sidebar({
 
     return (
         <aside className={cn("h-full w-full")}>
-            <div className={cn(" flex h-16 items-center justify-between")}>
-                <Link
-                    href={siteUrls.dashboard.home}
-                    className={cn("z-10 transition-transform hover:scale-90")}
-                >
-                    <Icons.logo
-                        className="text-xl"
-                        iconProps={{ className: "w-6 h-6 fill-primary" }}
-                    />
-                </Link>
-            </div>
+            {showLogo && (
+                <div className={cn("flex h-16 items-center justify-between")}>
+                    <Link
+                        href={siteUrls.dashboard.home}
+                        className={cn(
+                            "z-10 transition-transform hover:scale-90",
+                        )}
+                    >
+                        <Icons.logo
+                            className="text-xl"
+                            iconProps={{ className: "w-6 h-6 fill-primary" }}
+                        />
+                    </Link>
+                </div>
+            )}
 
             <div className="py-2">
                 <UserDropdown user={user} />
@@ -78,7 +84,7 @@ export async function Sidebar({
             )}
 
             <ScrollArea style={{ height: "calc(100vh - 10.5rem)" }}>
-                <div className="h-full w-full py-2">
+                <div className="h-full w-full py-2 pb-10">
                     <SidebarNav
                         sidebarNavIncludeIds={sidebarNavIncludeIds}
                         sidebarNavRemoveIds={sidebarNavRemoveIds}

diff --git a/starterkits/saas/src/app/(app)/admin/dashboard/page.tsx b/starterkits/saas/src/app/(app)/admin/dashboard/page.tsx
@@ -57,7 +57,7 @@ export default async function AdminDashPage() {
                     </Link>
                 </p>
 
-                <div className="grid grid-cols-4 gap-4">
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
                     <StatsCard
                         title="Users"
                         value={String(usersCountData.totalCount)}
@@ -87,7 +87,7 @@ export default async function AdminDashPage() {
                     />
                 </div>
 
-                <div className="grid grid-cols-2 gap-4">
+                <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                     <UsersChart data={usersChartData} />
 
                     <SubsChart data={subsChartData} />

diff --git a/starterkits/saas/src/app/(web)/_components/footer.tsx b/starterkits/saas/src/app/(web)/_components/footer.tsx
@@ -11,8 +11,8 @@ import Balancer from "react-wrap-balancer";
 
 export function WebFooter() {
     return (
-        <div className="py-8">
-            <footer className="container grid grid-cols-2 gap-8 rounded-lg border border-border bg-background p-8">
+        <div className="pb-0 sm:py-8">
+            <footer className="container grid grid-cols-1 gap-8 border border-border bg-background p-8 sm:grid-cols-2 sm:rounded-lg">
                 <div className="grid place-content-between gap-2">
                     <div className="grid gap-2">
                         <Link
@@ -55,7 +55,7 @@ export function WebFooter() {
                         <ThemeToggle />
                     </div>
                 </div>
-                <div className="grid grid-cols-3 gap-4">
+                <div className="grid grid-cols-2 gap-4 sm:grid-cols-3">
                     <div className="flex flex-col gap-2">
                         <h3 className="text-sm font-semibold">Resources</h3>
                         {navigation.map((item) => (

diff --git a/starterkits/saas/src/app/(web)/_components/mobile-nav.tsx b/starterkits/saas/src/app/(web)/_components/mobile-nav.tsx
@@ -29,7 +29,7 @@ export function MobileNav() {
             </SheetTrigger>
             <SheetContent side="left">
                 <SheetHeader>
-                    <Icons.logo />
+                    <Icons.logo hideTextOnMobile={false} />
                 </SheetHeader>
                 <ul className="space-y-3 py-8">
                     <li onClick={() => setIsOpen(false)}>

diff --git a/starterkits/saas/src/app/(web)/blog/page.tsx b/starterkits/saas/src/app/(web)/blog/page.tsx
@@ -28,7 +28,7 @@ export default async function BlogsPage() {
                         All the latest news and updates from our blog
                     </CardTitle>
                 </CardHeader>
-                <CardContent className="grid grid-cols-2 gap-8">
+                <CardContent className="grid grid-cols-1 gap-8 lg:grid-cols-2">
                     {blogs?.map((blog) => (
                         <Link
                             href={`${siteUrls.blog}/${blog.metaData.slug}`}

diff --git a/starterkits/saas/src/app/docs/[[...slug]]/page.tsx b/starterkits/saas/src/app/docs/[[...slug]]/page.tsx
@@ -47,10 +47,9 @@ export default async function DocsSlugPage({ params }: DocsSlugPageProps) {
                 {doc.content}
             </article>
 
-            <Toc
-                toc={doc.toc}
-                wrapperClassName="max-w-48 w-full py-4 sticky top-16"
-            />
+            <div className="sticky top-16 hidden w-full max-w-48 py-4 lg:block">
+                <Toc toc={doc.toc} wrapperClassName="w-full" />
+            </div>
         </>
     );
 }
diff --git a/starterkits/saas/src/app/docs/_components/docs-header.tsx b/starterkits/saas/src/app/docs/_components/docs-header.tsx
@@ -1,4 +1,5 @@
 import { CommandMenu } from "@/app/docs/_components/command-menu";
+import { DocsMobileSidenav } from "@/app/docs/_components/mobile-sidenav";
 import { ThemeToggle } from "@/components/theme-toggle";
 import { buttonVariants } from "@/components/ui/button";
 import { Icons } from "@/components/ui/icons";
@@ -7,15 +8,21 @@ import Link from "next/link";
 
 export function DocsHeader() {
     return (
-        <header className="sticky top-0 z-50 flex h-16 items-center justify-between bg-background/70 backdrop-blur">
-            <Link
-                href={siteUrls.home}
-                className="z-10 transition-transform  hover:scale-90"
-            >
-                <Icons.logo />
-            </Link>
+        <header className="sticky top-0 z-50 flex h-16 items-center justify-between gap-4 bg-background/70 backdrop-blur">
+            <div className="flex items-center gap-4">
+                <div className="block md:hidden">
+                    <DocsMobileSidenav />
+                </div>
 
-            <section className="flex items-center gap-2">
+                <Link
+                    href={siteUrls.home}
+                    className="z-10 transition-transform  hover:scale-90"
+                >
+                    <Icons.logo />
+                </Link>
+            </div>
+
+            <section className="flex flex-grow items-center justify-end gap-2">
                 <CommandMenu />
 
                 <ThemeToggle />
@@ -25,6 +32,7 @@ export function DocsHeader() {
                     className={buttonVariants({
                         variant: "outline",
                         size: "icon",
+                        className: "flex-shrink-0",
                     })}
                     target="_blank"
                 >