Skip to content

TypeError: Cannot read properties of null (reading 'registered') #15

@TOcvfan

Description

@TOcvfan

I'm getting this error: ⨯ [TypeError: Cannot read properties of null (reading 'registered')] { digest: '768085109' }
and the menu is not showing correctly
I have changed the to this:

<Logo
    component={Link}
    href="/"
>
    <span style={{ marginRight: 8 }}>🎪</span> Citræf
</Logo>

and I didn't add any title or user profile
this is my code:

"use client"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { Sidebar, Menu, MenuItem, Logo } from "react-mui-sidebar";
import HomeIcon from "@mui/icons-material/Home"
import StarIcon from "@mui/icons-material/Star"
import InfoIcon from "@mui/icons-material/Info"
import CalendarMonthIcon from "@mui/icons-material/CalendarMonth"
import { FaCoins } from "react-icons/fa";
import GroupIcon from "@mui/icons-material/Group"
import { Container } from "@mui/material";

export default function NavMenu() {
  const pathname = usePathname() || "/"

  const navLinks = [
    { text: "Hjem", href: "/", icon: <HomeIcon /> },
    { text: "Forslag", href: "/forslag", icon: <img src="/billeder/op.png" alt="Forslag" style={{ height: 18 }} /> },
    { text: "Bedøm træffet 2025", href: "/bedoem", icon: <StarIcon /> },
    { text: "Information", href: "/information", icon: <InfoIcon /> },
    { text: "Program", href: "/program", icon: <CalendarMonthIcon /> },
    { text: "Prisliste", href: "/prisliste", icon: <FaCoins /> },
    { text: "Citræfgruppen", href: "/citraefgruppen", icon: <GroupIcon /> },
    {
      text: "Dansk Citroën Klub",
      href: "https://danskcitroenklub.dk",
      external: true,
      icon: <img src="/billeder/dcklogo.png" alt="DCK" style={{ height: 18 }} />,
    },
  ]

  return (
    <Container>
    <Sidebar
      width={"270px"}
    >
      <Logo
        component={Link}
        href="/"
      >
        <span style={{ marginRight: 8 }}>🎪</span> Citræf
      </Logo>
        
        
      <Menu>
        {navLinks.map((link) => {
          const isActive = !link.external && pathname === link.href
          return (
            <MenuItem
              key={link.text}
              component={Link}
              link={link.href}
              target={link.external ? "_blank" : undefined}
              rel={link.external ? "noopener noreferrer" : undefined}
              icon={link.icon}
              isSelected={isActive}
            >
              {link.text}
            </MenuItem>
          )
        })}
      </Menu>
      </Sidebar>
    </Container>
  )
}

my result: https://i.postimg.cc/SxxfCVjJ/menu.png

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions