fix(sidebar): remove double borders from sidebar menus

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

frontend/src/components/editor-page/sidebar/sidebar-button/sidebar-button.module.scss

@@ -1,5 +1,5 @@
 /*!
- * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -10,8 +10,8 @@
   width: 100%;
   display: flex;
   align-items: center;
-  border: solid 1px var(--sidebar-separator-color);
+  border: none;
-  border-left: none;
+  border-bottom: solid 1px var(--sidebar-separator-color);
   user-select: none;
   cursor: pointer;
   background: transparent;
@@ -20,6 +20,11 @@
   overflow: hidden;
   color: var(--bs-emphasis-color);
 
+  &.main {
+    border-top: solid 1px var(--sidebar-separator-color);
+    border-bottom-width: 2px;
+  }
+
   &.hide {
     flex-basis: 0;
     height: 0;

frontend/src/components/editor-page/sidebar/sidebar-menu-info-entry/sidebar-menu-info-entry.module.css

@@ -1,10 +1,10 @@
 /*
- * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 .entry {
-    border: solid 1px var(--sidebar-separator-color);
+    border-bottom: solid 1px var(--sidebar-separator-color);
 }
 
 .title {

frontend/src/components/editor-page/sidebar/specific-sidebar-entries/export-menu-sidebar-menu.tsx

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -18,6 +18,8 @@ import {
   Github as IconGithub
 } from 'react-bootstrap-icons'
 import { Trans, useTranslation } from 'react-i18next'
+import { concatCssClasses } from '../../../../utils/concat-css-classes'
+import styles from '../sidebar-button/sidebar-button.module.scss'
 
 /**
  * Renders the export menu for the sidebar.
@@ -46,7 +48,7 @@ export const ExportMenuSidebarMenu: React.FC<SpecificSidebarMenuProps> = ({
         {...cypressId('menu-export')}
         hide={hide}
         icon={expand ? IconArrowLeft : IconCloudDownload}
-        className={className}
+        className={concatCssClasses(className, { [styles.main]: expand })}
         onClick={onClickHandler}>
         <Trans i18nKey={'editor.documentBar.export'} />
       </SidebarButton>

frontend/src/components/editor-page/sidebar/specific-sidebar-entries/import-menu-sidebar-menu.tsx

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -18,6 +18,8 @@ import {
   Github as IconGithub
 } from 'react-bootstrap-icons'
 import { Trans, useTranslation } from 'react-i18next'
+import styles from '../sidebar-button/sidebar-button.module.scss'
+import { concatCssClasses } from '../../../../utils/concat-css-classes'
 
 /**
  * Renders the import menu for the sidebar.
@@ -46,7 +48,7 @@ export const ImportMenuSidebarMenu: React.FC<SpecificSidebarMenuProps> = ({
         {...cypressId('menu-import')}
         hide={hide}
         icon={expand ? IconArrowLeft : IconCloudUpload}
-        className={className}
+        className={concatCssClasses(className, { [styles.main]: expand })}
         onClick={onClickHandler}>
         <Trans i18nKey={'editor.documentBar.import'} />
       </SidebarButton>

frontend/src/components/editor-page/sidebar/specific-sidebar-entries/note-info-sidebar-menu/note-info-sidebar-menu.tsx

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -16,6 +16,8 @@ import { NoteInfoLineWordCount } from './note-info-line/note-info-line-word-coun
 import React, { Fragment, useCallback } from 'react'
 import { ArrowLeft as IconArrowLeft, GraphUp as IconGraphUp } from 'react-bootstrap-icons'
 import { Trans, useTranslation } from 'react-i18next'
+import styles from '../../sidebar-button/sidebar-button.module.scss'
+import { concatCssClasses } from '../../../../../utils/concat-css-classes'
 
 /**
  * Renders the note info menu for the sidebar.
@@ -44,7 +46,7 @@ export const NoteInfoSidebarMenu: React.FC<SpecificSidebarMenuProps> = ({
         {...cypressId('sidebar-menu-info')}
         hide={hide}
         icon={expand ? IconArrowLeft : IconGraphUp}
-        className={className}
+        className={concatCssClasses(className, { [styles.main]: expand })}
         onClick={onClickHandler}>
         <Trans i18nKey={'editor.noteInfo.title'} />
       </SidebarButton>

frontend/src/components/editor-page/sidebar/specific-sidebar-entries/users-online-sidebar-menu/users-online-sidebar-menu.tsx

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -15,6 +15,7 @@ import { UserLine } from './user-line/user-line'
 import React, { Fragment, useCallback, useEffect, useMemo, useRef } from 'react'
 import { ArrowLeft as IconArrowLeft, People as IconPeople } from 'react-bootstrap-icons'
 import { Trans, useTranslation } from 'react-i18next'
+import buttonStyles from '../../sidebar-button/sidebar-button.module.scss'
 
 /**
  * Sidebar menu that contains the list of currently online users in the current note session.
@@ -69,7 +70,7 @@ export const UsersOnlineSidebarMenu: React.FC<SpecificSidebarMenuProps> = ({
         buttonRef={buttonRef}
         onClick={onClickHandler}
         icon={expand ? IconArrowLeft : IconPeople}
-        className={concatCssClasses(styles.entry, className)}>
+        className={concatCssClasses(styles.entry, buttonStyles.main, className)}>
         <Trans i18nKey={'editor.onlineStatus.online'} />
       </SidebarButton>
       <SidebarMenu expand={expand}>