spaces appear after I add a sidebar #6773

DayuanJiang · 2025-02-26T03:43:11Z

DayuanJiang
Feb 26, 2025

After adding a sidebar to my app, a space appears on the right. Could anyone tell me how to solve this?

Here are screenshots in dev mode.

components/app-sidebar.tsx

"use client";

import { useSession } from "next-auth/react";
import { useState, useEffect } from "react";
import { fetchHistory } from "@/app/db";
import { useRouter } from "next/navigation";

import {
    Sidebar,
    SidebarContent,
    SidebarGroup,
    SidebarGroupContent,
    SidebarGroupLabel,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarHeader,
    SidebarTrigger,
} from "@/components/ui/sidebar";

export function AppSidebar() {
    const { data: session } = useSession();
    const [history, setHistory] = useState<any[]>([]);
    const router = useRouter();

    useEffect(() => {
        async function loadHistory() {
            if (session?.user?.email) {
                const historyData = await fetchHistory(session.user.email);
                setHistory(historyData);
            }
        }
        loadHistory();
    }, [session?.user?.email]);

    return (
        <Sidebar>
            <SidebarHeader>
                <SidebarTrigger />
            </SidebarHeader>
            <SidebarContent>
                <SidebarGroup>
                    <SidebarGroupLabel>History</SidebarGroupLabel>
                    <SidebarGroupContent>
                        <SidebarMenu>
                            {history.map((item) => (
                                <SidebarMenuItem key={item.input_text}>
                                    <SidebarMenuButton asChild>
                                        <button
                                            onClick={() =>
                                                router.push(
                                                    `/?historyId=${item.id}`
                                                )
                                            }
                                        >
                                            <span>{item.input_text}</span>
                                        </button>
                                    </SidebarMenuButton>
                                </SidebarMenuItem>
                            ))}
                        </SidebarMenu>
                    </SidebarGroupContent>
                </SidebarGroup>
            </SidebarContent>
        </Sidebar>
    );
}

app/layout.tsx

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { Providers } from "./providers";
import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
import { AppSidebar } from "@/components/app-sidebar";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
    title: "GPT Grammar Checker",
    description: "Grammar Checker using GPT",
};

export default function RootLayout({
    children,
}: Readonly<{
    children: React.ReactNode;
}>) {
    return (
        <html lang="en">
            <head>
                <meta
                    name="viewport"
                    content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
                />
            </head>
            <body className={inter.className}>
                <Providers>
                    <SidebarProvider>
                        <AppSidebar />
                        <main>
                            {children}
                        </main>
                    </SidebarProvider>
                </Providers>
            </body>
        </html>
    );
}

DayuanJiang · 2025-02-26T03:51:06Z

DayuanJiang
Feb 26, 2025
Author

The space magically gone..

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

spaces appear after I add a sidebar #6773

{{title}}

Replies: 1 comment

{{title}}

Select a reply

spaces appear after I add a sidebar #6773

DayuanJiang Feb 26, 2025

Replies: 1 comment

DayuanJiang Feb 26, 2025 Author

DayuanJiang
Feb 26, 2025

DayuanJiang
Feb 26, 2025
Author