小编Mag*_*gma的帖子

所以我正在开发一个项目，但我的侧边栏组件的行为有点奇怪：

• 我（重新）启动服务器，组件看起来像这样
• 我点击一个链接项/我访问另一个 URL，它看起来像这样

我对组件了解不多，更不用说样式组件了，所以我不知道从哪里开始。

组件/Sidebar.ts

import React, { useState } from 'react';
import { SidebarData } from './SidebarData';
import styled from 'styled-components';
import * as Remix from 'react-icons/ri';
import Submenu from './Submenu';
import { useSession } from 'next-auth/react';


/* 
   --text-color: #ffffff;
  --text-secondary: #fefefe;
  --background-color: #091540;
  --background-secondary: #262c49;
  --background-third: #1a254d;
  --blue: #256EFF;
  --red: #FF495C;
  --green: #3DDC97;
*/

const Nav = styled.div`
   background: #091540;
   height: 8vh;
   display: flex;
   justify-content: flex-start;
   align-items: center;
   color: #ffffff;
`

const NavIcon = styled.div` …