I made a mistake and designed desktop first, without consideration to mobile ui, In my navbar I've currently implemented a popover for a user inbox where they can see notifications and friend requests,

<div className="flex gap-12 w-full">
  <nav className="hidden w-full md:flex justify-between">
    ...
    <div className="flex gap-8 items-center">
      {signedIn ? <>
        <InboxPopover notifications={notifications} friends={friends} />
        <ProfileDropdown profile={profile!} friends={friends} />
      </>
        : <LoginDialog><Button>Login</Button></LoginDialog>}
    </div>
  </nav>
</div>

for mobile ui I've added a shadcn sheet :

<Sheet>
  <SheetTrigger asChild>
    <Button className="md:hidden" size="icon" variant="outline">
      <MenuIcon className="h-6 w-6" />
    </Button>
  </SheetTrigger>
  <SheetContent side={"right"} className="flex flex-col justify-between">
    <div className="grid gap-6 p-6">
      <Link className="font-medium hover:underline">
        Inbox
      </Link>
      <Separator />
      ...
      <Link className="font-medium hover:underline flex items-center">
        <User className="mr-2 h-4 w-4" />
        <span>Profile</span>
      </Link>
     ...
    </div>
  </SheetContent>
</Sheet>

this is all currently in a RSC, my question is:
should I design the navbar in a way to reduce as much component duplication as possible (this would involve turning the navbar component into a client component and using swr to do client side data fetching I believe)