summaryrefslogtreecommitdiffstats
path: root/apps/web-shared
diff options
context:
space:
mode:
Diffstat (limited to 'apps/web-shared')
-rw-r--r--apps/web-shared/src/assets/logos/projects.pngbin0 -> 7951 bytes
-rw-r--r--apps/web-shared/src/styles/components/side-navigation.scss233
-rw-r--r--apps/web-shared/src/styles/components/vanilla-responsive-sidebar.scss146
3 files changed, 379 insertions, 0 deletions
diff --git a/apps/web-shared/src/assets/logos/projects.png b/apps/web-shared/src/assets/logos/projects.png
new file mode 100644
index 0000000..e49191f
--- /dev/null
+++ b/apps/web-shared/src/assets/logos/projects.png
Binary files differ
diff --git a/apps/web-shared/src/styles/components/side-navigation.scss b/apps/web-shared/src/styles/components/side-navigation.scss
new file mode 100644
index 0000000..0b30c7b
--- /dev/null
+++ b/apps/web-shared/src/styles/components/side-navigation.scss
@@ -0,0 +1,233 @@
+@use '../base' as *;
+@use 'vanilla-responsive-sidebar' as *;
+
+/* --------------------------------
+
+File#: _2_side-navigation-v4
+Title: Side Navigation v4
+Descr: Main, side navigation
+Usage: codyhouse.co/license
+
+-------------------------------- */
+
+.sidenav-v4 {
+ --sidenav-v4-icon-size: 20px;
+ --sidenav-v4-icon-margin-right: var(--space-xxs);
+}
+
+.sidenav-v4__item {
+ position: relative;
+}
+
+.sidenav-v4__link,
+.sidenav-v4__sub-link,
+.sidenav-v4__separator {
+ padding: var(--space-sm);
+}
+
+.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;
+ font-size: var(--text-md);
+
+ transition: .2s;
+
+ &:hover {
+ color: var(--color-primary);
+ background-color: alpha(var(--color-contrast-higher), 0.075);
+ }
+
+ &[aria-current="page"] {
+ color: var(--color-primary);
+ }
+}
+
+.sidenav-v4__sub-link {
+ position: relative;
+ color: var(--color-contrast-medium);
+
+ /* dot indicator */
+ &::before {
+ content: '';
+ display: block;
+ --size: 6px;
+ width: var(--size);
+ height: var(--size);
+ background: currentColor;
+ border-radius: 50%;
+ margin-left: calc(var(--sidenav-v4-icon-size)/2 - var(--size)/2);
+ margin-right: calc(var(--sidenav-v4-icon-size)/2 - var(--size)/2 + var(--sidenav-v4-icon-margin-right));
+
+ opacity: 0; /* visible only if current */
+ }
+
+ &[aria-current="page"] {
+ &::before { /* show dot indicator */
+ opacity: 1;
+ }
+ }
+}
+
+.sidenav-v4__notification-marker {
+ margin-left: auto;
+ background-color: var(--color-accent);
+ border-radius: var(--radius-md);
+
+ height: 16px;
+ line-height: 16px;
+ padding: 0 4px;
+ color: var(--color-white);
+ font-size: 12px;
+
+ /* hide - visible only on desktop */
+ display: none;
+}
+
+/* label icon */
+.sidenav-v4__icon {
+ --size: var(--sidenav-v4-icon-size);
+ margin-right: var(--sidenav-v4-icon-margin-right);
+}
+
+/* arrow icon - visible on mobile if item is expandable */
+.sidenav-v4__arrow-icon {
+ --size: 20px;
+
+ .icon__group {
+ 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);
+ }
+
+ .sidenav-v4__item--collapsed & {
+ transform: rotate(0deg);
+
+ > * {
+ transform: translateY(4px);
+ }
+
+ > *:first-child {
+ stroke-dashoffset: 10.15;
+ }
+
+ > *:last-child {
+ stroke-dashoffset: 10.15;
+ }
+ }
+ }
+
+}
+
+/* current item */
+.sidenav-v4__item--current {
+ .sidenav-v4__sub-list {
+ display: block; /* show sublist */
+ }
+}
+
+/* separator */
+.sidenav-v4__separator {
+ span {
+ display: block;
+ width: var(--sidenav-v4-icon-size);
+ height: 1px;
+ background-color: var(--color-contrast-lower);
+ }
+}
+
+/* mobile only */
+@include breakpoint(md, "not all") {
+ .sidenav-v4__item--collapsed {
+ .sidenav-v4__sub-list {
+ display: none;
+ }
+ }
+
+ .sidenav-v4__link--href {
+ display: none; /* hide link -> show button */
+ }
+}
+
+/* desktop */
+@include breakpoint(md) {
+ .sidenav-v4__sub-list {
+ display: none;
+ }
+
+ .sidenav-v4__link,
+ .sidenav-v4__sub-link,
+ .sidenav-v4__separator {
+ padding: var(--space-xs);
+ }
+
+ .sidenav-v4__link,
+ .sidenav-v4__sub-link {
+ font-size: var(--text-base);
+ }
+
+ .sidenav-v4__link--btn {
+ display: none; /* hide button -> show link */
+ }
+
+ /* tooltip */
+ .sidenav-v4__item:not(.sidenav-v4__item--current) {
+ .sidenav-v4__sub-list {
+ width: 220px;
+ position: absolute;
+ 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;
+ }
+
+ .sidenav-v4__sub-link {
+ border-radius: 0;
+ color: var(--color-contrast-high);
+
+ &::before {
+ display: none; /* remove dot indicator */
+ }
+
+ &:hover {
+ color: var(--color-primary);
+ }
+ }
+
+ &.sidenav-v4__item--hover, &:focus-within {
+ .sidenav-v4__sub-list {
+ display: block;
+ }
+ }
+
+ &:hover .sidenav-v4__link { /* highlight main link if tooltip is visible */
+ color: var(--color-primary);
+ background-color: alpha(var(--color-contrast-higher), 0.075);
+ }
+ }
+
+ /* notification marker */
+ .sidenav-v4__notification-marker {
+ display: block;
+ }
+}
diff --git a/apps/web-shared/src/styles/components/vanilla-responsive-sidebar.scss b/apps/web-shared/src/styles/components/vanilla-responsive-sidebar.scss
new file mode 100644
index 0000000..735cc1e
--- /dev/null
+++ b/apps/web-shared/src/styles/components/vanilla-responsive-sidebar.scss
@@ -0,0 +1,146 @@
+@use '../base' as *;
+
+/* --------------------------------
+
+File#: _1_responsive-sidebar
+Title: Responsive Sidebar
+Descr: Responsive sidebar container
+Usage: codyhouse.co/license
+
+-------------------------------- */
+
+/* mobile version only (--default) 👇 */
+.sidebar:not(.sidebar--static) {
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: var(--z-index-fixed-element, 10);
+ width: 100%;
+ height: 100%;
+ visibility: hidden;
+ transition: visibility 0s 0.3s;
+
+ &::after { /* overlay layer */
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: alpha(var(--color-black), 0);
+ transition: background-color .3s;
+ z-index: 1;
+ }
+
+ .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 {
+ .sidebar__panel {
+ left: auto;
+ right: 0;
+ transform: translateX(100%);
+ }
+ }
+
+ &.sidebar--is-visible {
+ visibility: visible;
+ transition: none;
+
+ &::after {
+ background-color: alpha(var(--color-black), 0.85);
+ }
+
+ .sidebar__panel {
+ transform: translateX(0);
+ box-shadow: var(--shadow-md);
+ }
+ }
+}
+
+/* end mobile version */
+
+.sidebar__header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ position: sticky;
+ top: 0;
+}
+
+.sidebar__close-btn {
+ --size: 32px;
+ width: var(--size);
+ height: var(--size);
+ display: flex;
+ 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;
+ }
+
+ &:hover {
+ background-color: var(--color-bg-lighter);
+ box-shadow: var(--inner-glow), var(--shadow-md);
+ }
+}
+
+.sidebar__footer {
+ background-color: var(--color-bg);
+}
+
+/* desktop version only (--static) 👇 */
+.sidebar--static {
+ flex-shrink: 0;
+ flex-grow: 1;
+ width: 100%;
+ max-width: 320px;
+
+ .sidebar__header {
+ display: none;
+ }
+
+ .sidebar__footer {
+ background-color: var(--color-bg-dark);
+ }
+}
+
+.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--static::before {
+ content: 'static';
+}
+
+@each $breakpoint, $value in $breakpoints {
+ .sidebar--static\@#{$breakpoint}::before {
+ content: 'mobile';
+ @include breakpoint(#{$breakpoint}) {
+ content: 'static';
+ }
+ }
+}
generated by cgit v1.3 (git 2.53.0) at 2026-03-07 15:48:25 +0100