From 31daec60cf1dae897116c1b9512745826ff847c7 Mon Sep 17 00:00:00 2001
From: Aaron Contreras <aaronlcaq@gmail.com>
Date: Wed, 19 Jul 2023 09:07:54 -0500
Subject: [PATCH] Move sidemenu css styles up to the sidebar styles global css
 file

Given this is css that is no longer specific to the sidemenu component
itself and is in itself to be used nested within an `.op-sidebar` element, it
makes sense to extract this out and make it globally available to other sections
of the application.
---
 .../sidemenu/sidemenu.component.sass          | 62 ------------------
 .../components/sidemenu/sidemenu.component.ts |  1 -
 .../src/global_styles/content/_sidebar.sass   | 63 ++++++++++++++++++-
 3 files changed, 62 insertions(+), 64 deletions(-)
 delete mode 100644 frontend/src/app/shared/components/sidemenu/sidemenu.component.sass

diff --git a/frontend/src/app/shared/components/sidemenu/sidemenu.component.sass b/frontend/src/app/shared/components/sidemenu/sidemenu.component.sass
deleted file mode 100644
index 4d7ad6b3aab5..000000000000
--- a/frontend/src/app/shared/components/sidemenu/sidemenu.component.sass
+++ /dev/null
@@ -1,62 +0,0 @@
-.op-sidemenu
-  display: flex
-  flex-direction: column
-  font-size: 14px
-
-  &--title
-    display: flex
-    background: transparent
-    color: var(--main-menu-fieldset-header-color)
-    border: 0
-    text-transform: uppercase
-    padding: 8px 12px
-    margin-top: 12px
-    font-size: 12px
-    cursor: pointer
-
-    &.-spread
-      justify-content: space-between
-
-    &:hover
-      background: var(--main-menu-bg-hover-background)
-      color: var(--main-menu-hover-font-color)
-
-  &--items
-    list-style: none
-
-    &_collapsed
-      display: none
-
-  &--item-action
-    display: flex
-    align-items: center
-    color: var(--main-menu-font-color)
-    padding: 8px 12px 8px 32px
-
-    &:hover
-      background: var(--main-menu-bg-hover-background)
-      color: var(--main-menu-hover-font-color)
-
-    &_active
-      background: var(--main-menu-bg-selected-background)
-      color: var(--main-menu-selected-font-color)
-
-    &_active-child
-      background: var(--main-menu-bg-selected-background)
-      color: var(--main-menu-selected-font-color)
-
-    &_with_icon
-      padding-left: 12px
-
-  &--item-title
-    margin-right: auto
-    overflow: hidden
-    text-overflow: ellipsis
-    white-space: nowrap
-    line-height: 30px
-    text-decoration: none
-    width: 100%
-
-  &--item-icon
-    font-size: 24px
-    margin-right: 8px
diff --git a/frontend/src/app/shared/components/sidemenu/sidemenu.component.ts b/frontend/src/app/shared/components/sidemenu/sidemenu.component.ts
index 71f9ff3b4284..b42124895637 100644
--- a/frontend/src/app/shared/components/sidemenu/sidemenu.component.ts
+++ b/frontend/src/app/shared/components/sidemenu/sidemenu.component.ts
@@ -27,7 +27,6 @@ export const sidemenuSelector = 'op-sidemenu';
 @Component({
   selector: sidemenuSelector,
   templateUrl: './sidemenu.component.html',
-  styleUrls: ['./sidemenu.component.sass'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class OpSidemenuComponent {
diff --git a/frontend/src/global_styles/content/_sidebar.sass b/frontend/src/global_styles/content/_sidebar.sass
index e6dc7793ddb1..7bdeb7c9798a 100644
--- a/frontend/src/global_styles/content/_sidebar.sass
+++ b/frontend/src/global_styles/content/_sidebar.sass
@@ -23,4 +23,65 @@
     .button .spot-icon
       margin-right: 0.5rem
 
-@import 'app/shared/components/sidemenu/sidemenu.component'
+  .op-sidemenu
+    display: flex
+    flex-direction: column
+    font-size: 14px
+
+    &--title
+      display: flex
+      background: transparent
+      color: var(--main-menu-fieldset-header-color)
+      border: 0
+      text-transform: uppercase
+      padding: 8px 12px
+      margin-top: 12px
+      font-size: 12px
+      cursor: pointer
+
+      &.-spread
+        justify-content: space-between
+
+      &:hover
+        background: var(--main-menu-bg-hover-background)
+        color: var(--main-menu-hover-font-color)
+
+    &--items
+      list-style: none
+
+      &_collapsed
+        display: none
+
+    &--item-action
+      display: flex
+      align-items: center
+      color: var(--main-menu-font-color)
+      padding: 8px 12px 8px 32px
+
+      &:hover
+        background: var(--main-menu-bg-hover-background)
+        color: var(--main-menu-hover-font-color)
+
+      &_active
+        background: var(--main-menu-bg-selected-background)
+        color: var(--main-menu-selected-font-color)
+
+      &_active-child
+        background: var(--main-menu-bg-selected-background)
+        color: var(--main-menu-selected-font-color)
+
+      &_with_icon
+        padding-left: 12px
+
+    &--item-title
+      margin-right: auto
+      overflow: hidden
+      text-overflow: ellipsis
+      white-space: nowrap
+      line-height: 30px
+      text-decoration: none
+      width: 100%
+
+    &--item-icon
+      font-size: 24px
+      margin-right: 8px