refactor: extract navigation elements

apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss

@@ -1,107 +1,68 @@
-@use '../../../theme/mixins' as *;
-
-$menu-hover-bg: $gray-1350;
-$menu-focus-bg: $gray-1300;
-
-$button-size: 3rem;
-
-.fadeable {
-  opacity: 1;
-
-  transition-property: opacity;
-  transition-duration: 0.3s;
-
-  &.hidden {
-    opacity: 0;
-    pointer-events: none;
-  }
-}
-
-.lockIcon {
-  font-size: 1.5rem;
-  color: $active-indicator;
-  padding: 0.5em;
-
-  position: fixed;
-  left: 0;
-  top: 0;
-  z-index: 12;
-}
-
-.buttonContainer {
-  display: flex;
-  flex-direction: column;
-  row-gap: 1rem;
-  padding: 0.5em;
-
-  position: fixed;
-  left: 0;
-  top: 0;
-  z-index: 12;
-}
-
-.navButton {
-  font-size: 1.5rem;
-  height: $button-size;
-  width: $button-size;;
-}
-
-.link {
-  @include action-link;
-  padding: 0.75rem 1.5rem;
-  gap: 0.5rem;
-  width: 100%;
-  cursor: pointer;
-
-  &:hover {
-    background-color: $menu-hover-bg;
-  }
-
-  &:active {
-    background-color: $border-color-ondark;
-  }
-
-  &:focus {
-    outline: none;
-    background-color: $menu-focus-bg;
-    border-left: 2px solid $action-text-color;
-  }
-
-  &.current {
-    background-color: $menu-hover-bg;
-    border-left: 4px solid $action-text-color;
-  }
-}
-
-.linkIcon {
-  margin-left: auto;
-  @include rotate-fourty-five;
-}
-
 .separator {
   border-color: $border-color-ondark;
 }
 
-.sectionHeader {
-  font-size: calc(1rem - 2px);
-  margin-left: 1rem;
-  color: $gray-700;
+.backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: $zindex-backdrop;
+  background-color: $backdrop-color;
+  transition: opacity 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+  }
 }
 
-.bottom {
-  margin-top: auto;
-  margin-bottom: 1rem;
-}
+.drawer {
+  box-sizing: border-box;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  z-index: $zindex-dialog;
+
+  width: 22rem;
+  height: 100vh;
 
-.interfaces {
-  padding: 0.5rem 1rem;
   display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
+  flex-direction: column;
+  padding-block: 1rem;
+
+  background-color: $gray-1250;
+  color: $ui-white;
+  border-right: 1px solid $gray-1200;
+
+  &[data-open] {
+    transform: translateX(0%);
+    transition: transform 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
+  }
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    transform: translateX(-100%);
+    transition: transform 500ms cubic-bezier(0.45, 1.005, 0, 1.005);
+  }
+
+  // take the whole screen in mobile devices
+  @media (max-width: $min-tablet) {
+    width: 100vw;
+  }
 }
 
-.goIcon {
-  @include rotate-fourty-five;
-  margin-left: 0.25rem;
-  margin-bottom: 0.25rem;
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 3.5rem;
+  padding-inline: 1.5rem;
+
+  font-weight: 600;
+  font-size: 1.25rem;
+}
+
+.body {
+  flex: 1;
+  overflow-y: auto;
 }