adjust sidenav styles

Author: christiansamaniego-okta

src/features/introduction/components/introduction-article/introduction-article.module.scss

@@ -1,10 +1,9 @@
 @use "@/libs/theme/styles/variables" as *;
+@use "@/libs/theme/styles/mixins" as *;
 
 .container {
-  display: flex;
-}
-
-.content {
+  @include InnerContentFlex;
+  justify-content: start;
 }
 
 .title {

src/features/introduction/components/introduction-hero/introduction-hero.module.scss

@@ -3,7 +3,7 @@
 
 .container {
   @include Container;
-  margin-bottom: 1.5rem;
+  margin: 1.5rem 0rem;
 }
 
 .content {

src/features/introduction/components/sidebar-nav/sidebar-nav.module.scss

@@ -2,32 +2,34 @@
 
 .container {
   display: none;
+
   @media #{$breakpoint-dimension-sm} {
-    display: inline-block;
-    height: 100vh;
+    display: block;
+    flex-shrink: 1;
     position: sticky;
     color: var(--color_fg_link);
-    flex-shrink: 0;
-    top: 0;
-    padding: 160px 30px 0px;
-    margin-bottom: 100px;
+    margin: 2rem 0rem;;
+    padding: 0rem 1rem;
+    top: $main-nav-height + 2rem; // additional value must be equal to top margin + top padding
     border-right: 1px solid var(--color_border_bold);
-    max-width: 250px;
-    overflow-y: auto;
+    font-size: 0.875rem;
+    max-width: 20rem;
+    height: fit-content;
   }
 }
 
 .title {
-  margin-bottom: 36px;
-  padding-right: 8px;
   cursor: pointer;
 }
 
 .title__active {
   color: var(--color_fg_selected);
-  border-bottom: 1px solid var(--color_border_selected);
+  text-decoration: underline;
 }
 
 .list {
   list-style-type: none;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
 }