2 files changed, 73 insertions, 38 deletions

diff --git a/apps/web-shared/src/styles/components/responsive-sidebar.scss b/apps/web-shared/src/styles/components/responsive-sidebar.scss
index 29a45f4..71c86da 100644
--- a/apps/web-shared/src/styles/components/responsive-sidebar.scss
+++ b/apps/web-shared/src/styles/components/responsive-sidebar.scss
@@ -1,15 +1,16 @@
 @use '../base' as *;
 
 /* -------------------------------- 
+
 File#: _1_responsive-sidebar
 Title: Responsive Sidebar
 Descr: Responsive sidebar container
 Usage: codyhouse.co/license
--------------------------------- */
 
-$maxwidth: 250px;
+-------------------------------- */
 
-.sidebar {
+/* mobile version only (--default) 👇 */
+.sidebar:not(.sidebar--static) {
   position: fixed;
   top: 0;
   left: 0;
@@ -17,6 +18,7 @@ $maxwidth: 250px;
   width: 100%;
   height: 100%;
   visibility: hidden;
+  transition: visibility 0s 0.3s;
 
   &::after { /* overlay layer */
     content: '';
@@ -26,36 +28,23 @@ $maxwidth: 250px;
     width: 100%;
     height: 100%;
     background-color: alpha(var(--color-black), 0);
+    transition: background-color .3s;
     z-index: 1;
   }
 
-  @include breakpoint(sm) {
-    visibility: visible;
-    position: relative;
-    z-index: 1;
-    width: 100%;
-    max-width: $maxwidth;
-    border-right: var(--border-width, 1px) var(--border-style, solid) hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), var(--border-o, 1));
-
-    .sidebar__header {
-      display: none;
-    }
-
-    .sidebar__panel {
-      position: relative !important;
-    }
-  }
-
-  .sidebar__panel {
+  .sidebar__panel { /* content */
     position: absolute;
     top: 0;
     left: 0;
     z-index: 2;
     width: 100%;
+    max-width: 380px;
     height: 100%;
     overflow: auto;
     -webkit-overflow-scrolling: touch;
     background-color: var(--color-bg);
+    transform: translateX(-100%);
+    transition: box-shadow 0.3s,transform 0.3s;
   }
 
   &.sidebar--right-on-mobile {
@@ -68,9 +57,10 @@ $maxwidth: 250px;
 
   &.sidebar--is-visible {
     visibility: visible;
-
+    transition: none;
+    
     &::after {
-      background-color: alpha(var(--color-black), 0.55);
+      background-color: alpha(var(--color-black), 0.85);
     }
 
     .sidebar__panel {
@@ -79,6 +69,7 @@ $maxwidth: 250px;
     }
   }
 }
+/* end mobile version */
 
 .sidebar__header {
   display: flex;
@@ -96,8 +87,9 @@ $maxwidth: 250px;
   border-radius: 50%;
   background-color: var(--color-bg-light);
   box-shadow: var(--inner-glow), var(--shadow-sm);
+  transition: .2s;
   flex-shrink: 0;
-
+  
   .icon {
     display: block;
     margin: auto;
@@ -108,3 +100,40 @@ $maxwidth: 250px;
     box-shadow: var(--inner-glow), var(--shadow-md);
   }
 }
+
+/* desktop version only (--static) 👇 */
+.sidebar--static {
+  flex-shrink: 0;
+  flex-grow: 1;
+
+  .sidebar__header {
+    display: none;
+  }
+}
+
+.sidebar--sticky-on-desktop {
+  position: sticky;
+  top: var(--space-sm);
+  max-height: calc(100vh - var(--space-sm));
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+/* end desktop version */
+
+.sidebar--loaded {
+  opacity: 1;
+}
+
+
+.sidebar--static::before {
+  content: 'static';
+}
+
+@each $breakpoint, $value in $breakpoints {
+  .sidebar--static\@#{$breakpoint}::before {
+    content: 'mobile';
+    @include breakpoint(#{$breakpoint}) {
+      content: 'static';
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web-shared/src/styles/components/side-navigation.scss b/apps/web-shared/src/styles/components/side-navigation-v4.scss
index 2e6597b..c2c13d2 100644
--- a/apps/web-shared/src/styles/components/side-navigation.scss
+++ b/apps/web-shared/src/styles/components/side-navigation-v4.scss
@@ -1,5 +1,5 @@
 @use '../base' as *;
-@use 'vanilla-responsive-sidebar' as *;
+@use 'responsive-sidebar.scss' as *;
 
 /* -------------------------------- 
 
@@ -19,7 +19,7 @@ Usage: codyhouse.co/license
   position: relative;
 }
 
-.sidenav-v4__link,
+.sidenav-v4__link, 
 .sidenav-v4__sub-link,
 .sidenav-v4__separator {
   padding: var(--space-sm);
@@ -28,10 +28,10 @@ Usage: codyhouse.co/license
 .sidenav-v4__link, .sidenav-v4__sub-link {
   display: flex;
   align-items: center;
-
+  
   width: 100%;
   border-radius: var(--radius-md);
-
+  
   text-decoration: none;
   color: inherit;
   line-height: 1;
@@ -52,7 +52,7 @@ Usage: codyhouse.co/license
 .sidenav-v4__sub-link {
   position: relative;
   color: var(--color-contrast-medium);
-
+  
   /* dot indicator */
   &::before {
     content: '';
@@ -79,7 +79,7 @@ Usage: codyhouse.co/license
   margin-left: auto;
   background-color: var(--color-accent);
   border-radius: var(--radius-md);
-
+  
   height: 16px;
   line-height: 16px;
   padding: 0 4px;
@@ -104,12 +104,14 @@ Usage: codyhouse.co/license
     will-change: transform;
     transform-origin: 50% 50%;
     transform: rotate(-90deg);
+    transition: transform .3s var(--ease-out);
 
     > * {
       transform-origin: 50% 50%;
       stroke-dasharray: 20;
       stroke-dashoffset: 0;
       transform: translateY(0px);
+      transition: transform .3s, stroke-dashoffset .3s;
       transition-timing-function: var(--ease-out);
     }
 
@@ -123,13 +125,17 @@ Usage: codyhouse.co/license
       > *:first-child {
         stroke-dashoffset: 10.15;
       }
-
+  
       > *:last-child {
         stroke-dashoffset: 10.15;
       }
     }
   }
-  
+
+  /* hide icon for links - show only for buttons created in JS */
+  .sidenav-v4__link--href & {
+    display: none;
+  }
 }
 
 /* current item */
@@ -168,15 +174,15 @@ Usage: codyhouse.co/license
     display: none;
   }
 
-  .sidenav-v4__link,
+  .sidenav-v4__link, 
   .sidenav-v4__sub-link,
   .sidenav-v4__separator {
     padding: var(--space-xs);
   }
 
-  .sidenav-v4__link,
+  .sidenav-v4__link, 
   .sidenav-v4__sub-link {
-    font-size: var(--text-base);
+    font-size: var(--text-sm);
   }
 
   .sidenav-v4__link--btn {
@@ -191,11 +197,11 @@ Usage: codyhouse.co/license
       z-index: var(--z-index-overlay);
       left: 100%;
       top: 0;
-
+  
       background-color: var(--color-bg-light);
       box-shadow: var(--inner-glow), var(--shadow-md);
       border-radius: var(--radius-md);
-
+  
       overflow: hidden;
     }
 
@@ -228,4 +234,4 @@ Usage: codyhouse.co/license
   .sidenav-v4__notification-marker {
     display: block;
   }
-}
+}
\ No newline at end of file