mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-10-27 07:52:24 +00:00
Merge pull request #649 from PR0M3TH3AN/codex/align-mobile-sidebar-with-desktop-version
Align sidebar behavior across desktop and mobile
This commit is contained in:
6 files changed
+216
-338
No files matched your search
@@ -1,2 +1,2 @@
|
||||
:root{--surface-base:var(--color-surface);--surface-alt:var(--color-surface-alt);--surface-raised:var(--color-card);--surface-raised-private:var(--color-card-private);--surface-raised-critical:var(--color-card-critical);--surface-panel:var(--color-panel);--surface-panel-hover:var(--color-panel-hover);--surface-sunken:var(--color-surface-sunken);--surface-muted:var(--color-surface-muted);--surface-veil:var(--color-overlay-veil);--surface-inverse:var(--color-page);--surface-overlay:var(--color-overlay);--surface-overlay-muted:var(--color-overlay-muted);--surface-overlay-strong:var(--color-overlay-strong);--surface-overlay-darker:var(--color-overlay-darker);--surface-overlay-black:var(--color-overlay-black);--surface-overlay-banner:var(--surface-overlay-banner-bottom);--surface-overlay-banner-bottom:var(--color-overlay-banner-bottom);--surface-overlay-banner-transparent:var(--color-overlay-banner-transparent);--surface-overlay-banner-gradient:linear-gradient(to top,var(--surface-overlay-banner-bottom) 0%,var(--surface-overlay-banner-transparent) 60%,var(--surface-overlay-banner-transparent) 100%);--surface-overlay-panel:var(--color-overlay-panel);--surface-overlay-panel-soft:var(--color-overlay-panel-soft);--surface-overlay-panel-tint:var(--color-overlay-panel-tint);--surface-overlay-panel-glass:var(--color-overlay-panel-glass);--surface-overlay-panel-glass-soft:var(--color-overlay-panel-glass-soft);--surface-modal-backdrop:var(--color-modal-backdrop);--surface-modal:var(--color-modal-surface);--blur-modal-backdrop:18px;--blur-modal-alert:14px;--blur-thumbnail-blur:18px;--modal-nav-backdrop-blur:6px;--border-default:var(--color-border);--border-subtle:var(--color-border-subtle);--border-strong:var(--color-border-translucent-stronger);--border-overlay:var(--color-border-translucent);--border-overlay-strong:var(--color-border-translucent-strongest);--border-overlay-glow:var(--color-border-translucent-glow);--border-neutral-soft:var(--color-border-neutral-soft);--border-info-soft:var(--color-border-info-soft);--border-sidebar-strong:var(--color-border-sidebar-strong);--border-width-hairline:1px;--border-width-fine:0.5px;--text-primary:var(--color-text);--text-inverse:var(--color-text-inverse);--text-muted:var(--color-text-muted);--text-muted-strong:var(--color-muted-strong);--text-subtle:var(--color-subtle-text);--text-frosted-primary:var(--color-text-frosted);--text-frosted-strong:var(--color-text-frosted-strong);--text-frosted-soft:var(--color-text-frosted-soft);--status-info:var(--color-info);--status-info-strong:var(--color-info-strong);--status-info-surface:var(--color-info-glass);--status-info-border:var(--color-info-border);--status-info-on:var(--color-info-on);--status-success:var(--color-success);--status-success-strong:var(--color-success-strong);--status-success-surface:var(--color-success-surface);--status-success-border:var(--color-success-border);--status-success-on:var(--color-success-on);--status-warning:var(--color-warning);--status-warning-strong:var(--color-warning-strong);--status-warning-surface:var(--color-warning-surface);--status-warning-border:var(--color-warning-border);--status-warning-on:var(--color-warning-on);--status-danger:var(--color-critical);--status-danger-strong:var(--color-critical-strong);--status-danger-surface:var(--color-danger-surface);--status-danger-border:var(--color-danger-border);--status-danger-on:var(--color-danger-on);--status-private:var(--color-private);--status-private-strong:var(--color-private-strong);--status-private-surface:var(--color-private-surface);--status-private-border:var(--color-private-border);--status-private-on:var(--color-private-on);--status-neutral:var(--color-muted);--status-neutral-strong:var(--color-muted-strong);--status-neutral-surface:var(--color-neutral-surface);--status-neutral-border:var(--color-neutral-border);--status-neutral-on:var(--color-neutral-on);--scrollbar-width:0.5rem;--scrollbar-track:var(--color-white-soft);--scrollbar-thumb:var(--color-white-softer);--scrollbar-thumb-hover:var(--color-white-softest);--z-overlay-nav:60;--z-overlay-floating:70;--z-overlay-popover:140;--z-overlay-toast:180;--z-sidebar-overlay:10;--z-sidebar:20;--z-modal-root:100;--z-modal-overlay:110;--z-modal-content:120;--z-modal-player:130;--overlay-backdrop-color:var(--color-overlay-backdrop);--overlay-backdrop-blur:12px;--sidebar-width-expanded:16rem;--sidebar-width-collapsed:4rem;--sidebar-width:var(--sidebar-width-expanded);--sidebar-control-size:2.75rem;--sidebar-content-gap:1rem;--space-sidebar-shell-inline:var(--space-lg);--space-sidebar-shell-block-start:var(--space-lg);--space-sidebar-shell-block-end:1.75rem;--space-sidebar-scroll-gap:1.75rem;--space-sidebar-panel-gap:1.35rem;--space-sidebar-panel-padding-block:1.35rem;--space-sidebar-panel-padding-inline:1.1rem;--space-sidebar-footer-gap:0.85rem;--space-sidebar-trigger-padding-block:0.78rem;--space-sidebar-popover-offset:0.85rem;--space-sidebar-popover-padding-block:0.85rem;--space-sidebar-pLine truncated
|
||||
/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:var(--font-family-sans);font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--font-family-mono);font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}html{font-size:100%}@media (min-width:1024px){html{font-size:75%}}*,:after,:before{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent}::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-width)}::-webkit-scrollbar-track{background:var(--scrollbar-track)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}body{font-family:var(--font-family-sans);background-color:var(--color-page);color:var(--color-text-strong);line-height:1.5;margin:0;padding:0;overflow-x:hidden}#uiOverlay{position:fixed;inset:0;pointer-events:none;z-index:var(--z-overlay-popover)}#uiOverlay>*{pointer-events:auto}#editNip71TagsFieldset>legend,#nip71TagsFieldset>legend{margin-left:0;padding:0}#app{background-color:var(--color-page);color:inherit}body.modal-open,html.modal-open{overflow:hidden;height:100%}body.modal-open #app{overflow:hidden}body.modal-open #sidebar,body.modal-open #sidebarOverlay{pointer-events:none;opacity:0;visibility:hidden}body.modal-open #sidebar{z-index:var(--z-sidebar-overlay)}body.modal-open #sidebarOverlay{z-index:calc(var(--z-sidebar-overlay) - 1)}.ng-cloak,.ng-hide:not(.ng-hide-animate),.x-ng-cloak,[data-ng-cloak],[ng-cloak],[ng\:cloak],[x-ng-cloak]{display:none!important}ng\:form{display:block}.\!container{width:100%!important}.container{width:100%}@media (min-width:25rem){.\!container{max-width:25rem!important}.container{max-width:25rem}}@media (min-width:30rem){.\!container{max-width:30rem!important}.container{max-width:30rem}}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}#playerModal.ds-header{display:flex}.ds-header{display:flex;align-items:center;justify-content:flex-start;padding-top:var(--space-sm);padding-bottom:var(--space-sm)}.ds-metric-probe{position:absolute;top:0;left:0;visibility:hidden;pointer-events:none;contain:layout size style;inline-size:0;block-size:var(--ds-metric-probe-length,0);overflow:hidden}.ds-header__logo{height:var(--space-2xl-plus);width:auto;max-width:none}.focus-ring{outline:2px solid transparent;outline-offset:2px}.focus-ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0Line truncated
|
||||
/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:var(--font-family-sans);font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--font-family-mono);font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}html{font-size:100%}@media (min-width:1024px){html{font-size:75%}}*,:after,:before{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent}::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-width)}::-webkit-scrollbar-track{background:var(--scrollbar-track)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}body{font-family:var(--font-family-sans);background-color:var(--color-page);color:var(--color-text-strong);line-height:1.5;margin:0;padding:0;overflow-x:hidden}#uiOverlay{position:fixed;inset:0;pointer-events:none;z-index:var(--z-overlay-popover)}#uiOverlay>*{pointer-events:auto}#editNip71TagsFieldset>legend,#nip71TagsFieldset>legend{margin-left:0;padding:0}#app{background-color:var(--color-page);color:inherit}body.modal-open,html.modal-open{overflow:hidden;height:100%}body.modal-open #app{overflow:hidden}body.modal-open #sidebar{pointer-events:none;opacity:0;visibility:hidden;z-index:var(--z-sidebar-overlay)}.ng-cloak,.ng-hide:not(.ng-hide-animate),.x-ng-cloak,[data-ng-cloak],[ng-cloak],[ng\:cloak],[x-ng-cloak]{display:none!important}ng\:form{display:block}.\!container{width:100%!important}.container{width:100%}@media (min-width:25rem){.\!container{max-width:25rem!important}.container{max-width:25rem}}@media (min-width:30rem){.\!container{max-width:30rem!important}.container{max-width:30rem}}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}#playerModal.ds-header{display:flex}.ds-header{display:flex;align-items:center;justify-content:flex-start;padding-top:var(--space-sm);padding-bottom:var(--space-sm)}.ds-metric-probe{position:absolute;top:0;left:0;visibility:hidden;pointer-events:none;contain:layout size style;inline-size:0;block-size:var(--ds-metric-probe-length,0);overflow:hidden}.ds-header__logo{height:var(--space-2xl-plus);width:auto;max-width:none}.focus-ring{outline:2px solid transparent;outline-offset:2px}.focus-ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offsLine truncated
|
||||
+111
-158
@@ -82,8 +82,7 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body.modal-open #sidebar,
|
||||
body.modal-open #sidebarOverlay {
|
||||
body.modal-open #sidebar {
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
@@ -93,12 +92,7 @@
|
||||
z-index: var(--z-sidebar-overlay);
|
||||
}
|
||||
|
||||
body.modal-open #sidebarOverlay {
|
||||
z-index: calc(var(--z-sidebar-overlay) - 1);
|
||||
}
|
||||
|
||||
#sidebar.is-modal-hidden,
|
||||
#sidebarOverlay.is-modal-hidden {
|
||||
#sidebar.is-modal-hidden {
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
@@ -2528,6 +2522,20 @@
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
body.sidebar-collapsed,
|
||||
#sidebar.sidebar-collapsed,
|
||||
#sidebar[data-state="collapsed"],
|
||||
#app.sidebar-collapsed {
|
||||
--sidebar-width: var(--sidebar-width-collapsed);
|
||||
}
|
||||
|
||||
body.sidebar-expanded,
|
||||
#sidebar.sidebar-expanded,
|
||||
#sidebar[data-state="expanded"],
|
||||
#app.sidebar-expanded {
|
||||
--sidebar-width: var(--sidebar-width-expanded);
|
||||
}
|
||||
|
||||
#sidebar .sidebar__inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -2583,13 +2591,13 @@
|
||||
}
|
||||
|
||||
.sidebar-panel__header {
|
||||
display: none;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.sidebar-collapse-toggle {
|
||||
display: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--sidebar-control-size);
|
||||
@@ -2906,26 +2914,6 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#sidebar.sidebar-open {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#sidebarOverlay {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 300ms ease;
|
||||
z-index: var(--z-sidebar-overlay);
|
||||
--sidebar-overlay-open-opacity: 1;
|
||||
--sidebar-overlay-backdrop-blur: var(--overlay-backdrop-blur);
|
||||
backdrop-filter: blur(var(--sidebar-overlay-backdrop-blur));
|
||||
-webkit-backdrop-filter: blur(var(--sidebar-overlay-backdrop-blur));
|
||||
}
|
||||
|
||||
body.sidebar-open:not(.modal-open) #sidebarOverlay {
|
||||
opacity: var(--sidebar-overlay-open-opacity);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.sidebar-loading-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -2949,31 +2937,102 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (
|
||||
max-width: calc(theme('screens.md') - theme('borderWidth.DEFAULT'))
|
||||
) {
|
||||
#sidebar {
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
width: min(
|
||||
var(--sidebar-width-expanded),
|
||||
calc(100vw - var(--sidebar-mobile-gutter))
|
||||
);
|
||||
}
|
||||
#app {
|
||||
box-sizing: border-box;
|
||||
transition: margin-left 200ms ease, width 200ms ease, max-width 200ms ease;
|
||||
}
|
||||
|
||||
#sidebar.sidebar-open {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
#app[data-sidebar-state="collapsed"] {
|
||||
margin-left: var(--sidebar-width-collapsed);
|
||||
width: calc(100vw - var(--sidebar-width-collapsed));
|
||||
max-width: calc(100vw - var(--sidebar-width-collapsed));
|
||||
}
|
||||
|
||||
body.sidebar-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
#app[data-sidebar-state="expanded"] {
|
||||
margin-left: var(--sidebar-width-expanded);
|
||||
width: calc(100vw - var(--sidebar-width-expanded));
|
||||
max-width: calc(100vw - var(--sidebar-width-expanded));
|
||||
}
|
||||
|
||||
body.sidebar-open:not(.modal-open) #sidebarOverlay {
|
||||
--sidebar-overlay-open-opacity: 0.85;
|
||||
--sidebar-overlay-backdrop-blur: calc(
|
||||
var(--overlay-backdrop-blur) * 0.75
|
||||
);
|
||||
}
|
||||
body.sidebar-collapsed #sidebar .sidebar-nav-link,
|
||||
#sidebar.sidebar-collapsed .sidebar-nav-link {
|
||||
justify-content: center;
|
||||
width: var(--sidebar-control-size);
|
||||
padding: 0;
|
||||
margin-inline: auto;
|
||||
border-radius: var(--radius-full);
|
||||
--sidebar-nav-translate-x: 0;
|
||||
--sidebar-nav-link-highlight-scale: 1;
|
||||
}
|
||||
|
||||
body.sidebar-expanded #sidebar .sidebar-nav-link,
|
||||
#sidebar.sidebar-expanded .sidebar-nav-link {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
body.sidebar-collapsed #sidebar .sidebar-text,
|
||||
#sidebar.sidebar-collapsed .sidebar-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.sidebar-collapsed #sidebar .sidebar__inner,
|
||||
#sidebar.sidebar-collapsed .sidebar__inner {
|
||||
padding-inline: var(--space-2xs);
|
||||
}
|
||||
|
||||
body.sidebar-collapsed #sidebar .sidebar-panel,
|
||||
#sidebar.sidebar-collapsed .sidebar-panel {
|
||||
padding-inline: calc(var(--space-3xs) * 3);
|
||||
}
|
||||
|
||||
body.sidebar-collapsed #sidebar .sidebar-panel__header,
|
||||
#sidebar.sidebar-collapsed .sidebar-panel__header {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
body.sidebar-collapsed #sidebar .sidebar-collapse-toggle,
|
||||
#sidebar.sidebar-collapsed .sidebar-collapse-toggle {
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
#sidebar .sidebar-toggle-icon--rotated {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
body.sidebar-collapsed #sidebar .sidebar-toggle-icon--rotated,
|
||||
#sidebar.sidebar-collapsed .sidebar-toggle-icon--rotated {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
body.sidebar-collapsed #sidebar .sidebar-dropup-trigger,
|
||||
#sidebar.sidebar-collapsed .sidebar-dropup-trigger {
|
||||
justify-content: center;
|
||||
width: var(--sidebar-control-size);
|
||||
height: var(--sidebar-control-size);
|
||||
padding: 0;
|
||||
margin-inline: auto;
|
||||
border-radius: var(--radius-full);
|
||||
}
|
||||
|
||||
body.sidebar-collapsed #sidebar .sidebar-dropup-trigger .sidebar-text,
|
||||
#sidebar.sidebar-collapsed .sidebar-dropup-trigger .sidebar-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.sidebar-collapsed #sidebar .sidebar-dropup-trigger__chevron {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.sidebar-collapsed #sidebar .sidebar-dropup-trigger__glyph,
|
||||
#sidebar.sidebar-collapsed .sidebar-dropup-trigger__glyph {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body.sidebar-collapsed #sidebar .sidebar-nav-link:hover,
|
||||
#sidebar.sidebar-collapsed .sidebar-nav-link:hover,
|
||||
body.sidebar-collapsed #sidebar .sidebar-nav-link:focus-visible,
|
||||
#sidebar.sidebar-collapsed .sidebar-nav-link:focus-visible {
|
||||
--sidebar-nav-translate-x: 0;
|
||||
}
|
||||
|
||||
@media (min-width: theme('screens.md')) {
|
||||
@@ -2991,19 +3050,6 @@
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
#sidebar.sidebar-open {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#sidebarOverlay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#app {
|
||||
box-sizing: border-box;
|
||||
transition: margin-left 200ms ease, width 200ms ease, max-width 200ms ease;
|
||||
}
|
||||
|
||||
#app[data-sidebar-state="collapsed"] {
|
||||
margin-left: calc(
|
||||
var(--sidebar-width-collapsed) + var(--sidebar-content-gap)
|
||||
@@ -3028,98 +3074,6 @@
|
||||
);
|
||||
}
|
||||
|
||||
body.sidebar-collapsed,
|
||||
#sidebar.sidebar-collapsed,
|
||||
#app.sidebar-collapsed {
|
||||
--sidebar-width: var(--sidebar-width-collapsed);
|
||||
}
|
||||
|
||||
body.sidebar-expanded,
|
||||
#sidebar.sidebar-expanded,
|
||||
#app.sidebar-expanded {
|
||||
--sidebar-width: var(--sidebar-width-expanded);
|
||||
}
|
||||
|
||||
body.sidebar-collapsed #sidebar .sidebar-nav-link,
|
||||
#sidebar.sidebar-collapsed .sidebar-nav-link {
|
||||
justify-content: center;
|
||||
width: var(--sidebar-control-size);
|
||||
padding: 0;
|
||||
margin-inline: auto;
|
||||
border-radius: var(--radius-full);
|
||||
--sidebar-nav-translate-x: 0;
|
||||
--sidebar-nav-link-highlight-scale: 1;
|
||||
}
|
||||
|
||||
body.sidebar-expanded #sidebar .sidebar-nav-link,
|
||||
#sidebar.sidebar-expanded .sidebar-nav-link {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
body.sidebar-collapsed #sidebar .sidebar-text,
|
||||
#sidebar.sidebar-collapsed .sidebar-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.sidebar-collapsed #sidebar .sidebar__inner,
|
||||
#sidebar.sidebar-collapsed .sidebar__inner {
|
||||
padding-inline: var(--space-2xs);
|
||||
}
|
||||
|
||||
body.sidebar-collapsed #sidebar .sidebar-panel,
|
||||
#sidebar.sidebar-collapsed .sidebar-panel {
|
||||
padding-inline: calc(var(--space-3xs) * 3);
|
||||
}
|
||||
|
||||
body.sidebar-collapsed #sidebar .sidebar-panel__header,
|
||||
#sidebar.sidebar-collapsed .sidebar-panel__header {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
body.sidebar-collapsed #sidebar .sidebar-collapse-toggle,
|
||||
#sidebar.sidebar-collapsed .sidebar-collapse-toggle {
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
#sidebar .sidebar-toggle-icon--rotated {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
body.sidebar-collapsed #sidebar .sidebar-toggle-icon--rotated,
|
||||
#sidebar.sidebar-collapsed .sidebar-toggle-icon--rotated {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
body.sidebar-collapsed #sidebar .sidebar-dropup-trigger,
|
||||
#sidebar.sidebar-collapsed .sidebar-dropup-trigger {
|
||||
justify-content: center;
|
||||
width: var(--sidebar-control-size);
|
||||
height: var(--sidebar-control-size);
|
||||
padding: 0;
|
||||
margin-inline: auto;
|
||||
border-radius: var(--radius-full);
|
||||
}
|
||||
|
||||
body.sidebar-collapsed #sidebar .sidebar-dropup-trigger .sidebar-text,
|
||||
#sidebar.sidebar-collapsed .sidebar-dropup-trigger .sidebar-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.sidebar-collapsed #sidebar .sidebar-dropup-trigger__chevron {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.sidebar-collapsed #sidebar .sidebar-dropup-trigger__glyph,
|
||||
#sidebar.sidebar-collapsed .sidebar-dropup-trigger__glyph {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body.sidebar-collapsed #sidebar .sidebar-nav-link:hover,
|
||||
#sidebar.sidebar-collapsed .sidebar-nav-link:hover,
|
||||
body.sidebar-collapsed #sidebar .sidebar-nav-link:focus-visible,
|
||||
#sidebar.sidebar-collapsed .sidebar-nav-link:focus-visible {
|
||||
--sidebar-nav-translate-x: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes card-motion-enter {
|
||||
@@ -3265,7 +3219,6 @@
|
||||
#app,
|
||||
#playerModal .player-modal__content,
|
||||
#sidebar,
|
||||
#sidebarOverlay,
|
||||
.sidebar-collapse-toggle,
|
||||
.sidebar-collapse-toggle__icon,
|
||||
.sidebar-dropup-panel,
|
||||
|
||||
+2
-30
@@ -124,17 +124,10 @@
|
||||
<!-- components/sidebar.html gets injected here -->
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="sidebarOverlay"
|
||||
class="md:hidden ds-overlay-backdrop z-overlay-nav"
|
||||
aria-hidden="true"
|
||||
></div>
|
||||
|
||||
<!--
|
||||
MAIN CONTENT:
|
||||
Desktop spacing now follows the --sidebar-width custom property so the layout stays in
|
||||
sync with the collapsible rail. On mobile we float the sidebar over the content and dim
|
||||
the background overlay.
|
||||
Layout spacing follows the --sidebar-width custom property on every viewport so the
|
||||
collapsible rail always shifts the application shell instead of floating above it.
|
||||
-->
|
||||
<!--
|
||||
`fade-in` is scrubbed by js/index.js after the first animation so that
|
||||
@@ -149,27 +142,6 @@
|
||||
>
|
||||
<!-- Header -->
|
||||
<header class="ds-header mb-8 w-full">
|
||||
<!-- Mobile hamburger button (hidden on md+) -->
|
||||
<!-- New button -->
|
||||
<!--
|
||||
Mobile menu button: uses `fade-in` to match the rest of the chrome.
|
||||
The JS animation cleanup removes the helper classes once the entrance
|
||||
finishes to prevent flashes on future sidebar toggles.
|
||||
-->
|
||||
<button
|
||||
id="mobileMenuBtn"
|
||||
class="focus-ring fade-in z-overlay-nav ml-2 mr-4 flex h-10 w-10 items-center justify-center rounded-full bg-transparent hover:bg-transparent md:hidden"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
aria-controls="sidebar"
|
||||
aria-label="Toggle navigation menu"
|
||||
>
|
||||
<img
|
||||
src="assets/svg/mobile-sidebar-menu-icon.svg"
|
||||
alt="Mobile Sidebar Menu Icon"
|
||||
class="h-6 w-6"
|
||||
/>
|
||||
</button>
|
||||
<!-- Logo -->
|
||||
<!-- Logo fades in once on initial load. -->
|
||||
<a
|
||||
|
||||
+5
-100
@@ -223,12 +223,7 @@ async function bootstrapInterface() {
|
||||
userLogger.warn("Sidebar collapse toggle not found; skipping density controls.");
|
||||
}
|
||||
|
||||
const mobileMenuBtn = document.getElementById("mobileMenuBtn");
|
||||
const sidebarOverlay = document.getElementById("sidebarOverlay");
|
||||
|
||||
const SIDEBAR_COLLAPSED_STORAGE_KEY = "sidebarCollapsed";
|
||||
const SIDEBAR_WIDTH_EXPANDED = "16rem";
|
||||
const SIDEBAR_WIDTH_COLLAPSED = "4rem";
|
||||
const DEFAULT_SIDEBAR_COLLAPSED = true;
|
||||
let isSidebarCollapsed = DEFAULT_SIDEBAR_COLLAPSED;
|
||||
let isFooterDropupExpanded = false;
|
||||
@@ -297,67 +292,14 @@ async function bootstrapInterface() {
|
||||
}
|
||||
};
|
||||
|
||||
const syncSidebarDensityToViewport = (isDesktopViewport) => {
|
||||
if (!collapseToggle) {
|
||||
applySidebarDensity(false);
|
||||
return;
|
||||
}
|
||||
isSidebarCollapsed = collapseToggle
|
||||
? readStoredSidebarCollapsed()
|
||||
: DEFAULT_SIDEBAR_COLLAPSED;
|
||||
|
||||
if (isDesktopViewport) {
|
||||
isSidebarCollapsed = readStoredSidebarCollapsed();
|
||||
applySidebarDensity(isSidebarCollapsed);
|
||||
return;
|
||||
}
|
||||
|
||||
applySidebarDensity(false);
|
||||
};
|
||||
|
||||
if (collapseToggle) {
|
||||
isSidebarCollapsed = readStoredSidebarCollapsed();
|
||||
}
|
||||
|
||||
const setSidebarState = (isOpen) => {
|
||||
if (sidebar) {
|
||||
sidebar.classList.toggle("sidebar-open", isOpen);
|
||||
}
|
||||
document.body.classList.toggle("sidebar-open", isOpen);
|
||||
if (mobileMenuBtn) {
|
||||
mobileMenuBtn.setAttribute("aria-expanded", isOpen ? "true" : "false");
|
||||
}
|
||||
};
|
||||
|
||||
const closeSidebar = () => setSidebarState(false);
|
||||
const isMobileViewport = () => {
|
||||
if (typeof window.matchMedia === "function") {
|
||||
return window.matchMedia("(max-width: 767px)").matches;
|
||||
}
|
||||
return window.innerWidth < 768;
|
||||
};
|
||||
|
||||
const toggleSidebar = () => {
|
||||
if (!sidebar) return;
|
||||
const isMobile = isMobileViewport();
|
||||
if (!isMobile) return;
|
||||
const shouldOpen = !sidebar.classList.contains("sidebar-open");
|
||||
setSidebarState(shouldOpen);
|
||||
};
|
||||
|
||||
let desktopQuery = null;
|
||||
const isDesktopViewport = () => {
|
||||
if (desktopQuery) {
|
||||
return desktopQuery.matches;
|
||||
}
|
||||
return window.innerWidth >= 768;
|
||||
};
|
||||
applySidebarDensity(isSidebarCollapsed);
|
||||
|
||||
if (collapseToggle) {
|
||||
collapseToggle.addEventListener("click", (event) => {
|
||||
const desktop = isDesktopViewport();
|
||||
if (!desktop) {
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
const nextCollapsed = !isSidebarCollapsed;
|
||||
isSidebarCollapsed = nextCollapsed;
|
||||
@@ -366,43 +308,6 @@ async function bootstrapInterface() {
|
||||
});
|
||||
}
|
||||
|
||||
if (mobileMenuBtn && sidebar) {
|
||||
mobileMenuBtn.addEventListener("click", toggleSidebar);
|
||||
}
|
||||
|
||||
if (sidebarOverlay) {
|
||||
sidebarOverlay.addEventListener("click", closeSidebar);
|
||||
}
|
||||
|
||||
document.addEventListener("keydown", (event) => {
|
||||
if (event.key === "Escape" && sidebar && sidebar.classList.contains("sidebar-open")) {
|
||||
closeSidebar();
|
||||
}
|
||||
});
|
||||
|
||||
if (typeof window.matchMedia === "function") {
|
||||
desktopQuery = window.matchMedia("(min-width: 768px)");
|
||||
syncSidebarDensityToViewport(desktopQuery.matches);
|
||||
|
||||
const onDesktopChange = (event) => {
|
||||
if (event.matches) {
|
||||
closeSidebar();
|
||||
syncSidebarDensityToViewport(true);
|
||||
return;
|
||||
}
|
||||
|
||||
syncSidebarDensityToViewport(false);
|
||||
};
|
||||
|
||||
if (typeof desktopQuery.addEventListener === "function") {
|
||||
desktopQuery.addEventListener("change", onDesktopChange);
|
||||
} else if (typeof desktopQuery.addListener === "function") {
|
||||
desktopQuery.addListener(onDesktopChange);
|
||||
}
|
||||
} else {
|
||||
syncSidebarDensityToViewport(window.innerWidth >= 768);
|
||||
}
|
||||
|
||||
const footerDropdownButton = document.getElementById("footerDropdownButton");
|
||||
const footerLinksContainer = document.getElementById("footerLinksContainer");
|
||||
const footerDropdownLabel = document.getElementById("footerDropdownText");
|
||||
@@ -467,7 +372,7 @@ async function bootstrapInterface() {
|
||||
try {
|
||||
const sidebarModule = await import("./sidebar.js");
|
||||
if (typeof sidebarModule.setupSidebarNavigation === "function") {
|
||||
sidebarModule.setupSidebarNavigation({ closeSidebar });
|
||||
sidebarModule.setupSidebarNavigation();
|
||||
}
|
||||
} catch (error) {
|
||||
userLogger.error("Failed to set up sidebar navigation:", error);
|
||||
|
||||
+1
-19
@@ -1,7 +1,7 @@
|
||||
// sidebar.js
|
||||
import { setHashView } from "./index.js";
|
||||
|
||||
export function setupSidebarNavigation({ closeSidebar } = {}) {
|
||||
export function setupSidebarNavigation() {
|
||||
const sidebarLinks = document.querySelectorAll('#sidebar a[href^="#view="]');
|
||||
sidebarLinks.forEach((link) => {
|
||||
link.addEventListener("click", (e) => {
|
||||
@@ -14,24 +14,6 @@ export function setupSidebarNavigation({ closeSidebar } = {}) {
|
||||
|
||||
const viewName = match[1]; // "about", "ipns", etc.
|
||||
setHashView(viewName); // This changes the hash and loads the view.
|
||||
|
||||
// --- NEW: if on mobile, close the sidebar automatically. ---
|
||||
const isMobile =
|
||||
typeof window.matchMedia === "function"
|
||||
? window.matchMedia("(max-width: 767px)").matches
|
||||
: window.innerWidth < 768;
|
||||
if (isMobile) {
|
||||
if (typeof closeSidebar === "function") {
|
||||
closeSidebar();
|
||||
return;
|
||||
}
|
||||
|
||||
const sidebar = document.getElementById("sidebar");
|
||||
if (sidebar) {
|
||||
sidebar.classList.remove("sidebar-open");
|
||||
}
|
||||
document.body.classList.remove("sidebar-open");
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -39,48 +39,114 @@ test.describe("overlay layering tokens", () => {
|
||||
);
|
||||
}
|
||||
|
||||
test("mobile nav overlay uses nav layer", async ({ page }) => {
|
||||
test("mobile sidebar shares desktop rail behavior", async ({ page }) => {
|
||||
await page.setViewportSize({ width: 390, height: 844 });
|
||||
await page.goto("/index.html", { waitUntil: "networkidle" });
|
||||
|
||||
await dismissDisclaimerModal(page);
|
||||
|
||||
await page.waitForSelector("#mobileMenuBtn");
|
||||
await page.click("#mobileMenuBtn");
|
||||
await page.waitForFunction(() => {
|
||||
const overlay = document.getElementById("sidebarOverlay");
|
||||
if (!overlay) {
|
||||
return false;
|
||||
}
|
||||
const styles = window.getComputedStyle(overlay);
|
||||
return styles.opacity === "1" && styles.pointerEvents === "auto";
|
||||
});
|
||||
await page.waitForFunction(() =>
|
||||
document.body.classList.contains("sidebar-open")
|
||||
);
|
||||
await expect(page.locator("#mobileMenuBtn")).toHaveCount(0);
|
||||
|
||||
const overlayState = await page.evaluate(() => {
|
||||
const overlay = document.getElementById("sidebarOverlay");
|
||||
if (!overlay) {
|
||||
throw new Error("Missing sidebar overlay");
|
||||
const collapseToggle = page.locator("#sidebarCollapseToggle");
|
||||
await expect(collapseToggle).toBeVisible();
|
||||
|
||||
const initialLayout = await page.evaluate(() => {
|
||||
const sidebar = document.getElementById("sidebar");
|
||||
const app = document.getElementById("app");
|
||||
if (!sidebar || !app) {
|
||||
throw new Error("Missing sidebar layout nodes");
|
||||
}
|
||||
const styles = window.getComputedStyle(overlay);
|
||||
const navLayer = window
|
||||
.getComputedStyle(document.documentElement)
|
||||
.getPropertyValue("--z-overlay-nav")
|
||||
.trim();
|
||||
|
||||
const computeMargin = (widthVar) => {
|
||||
const probe = document.createElement("div");
|
||||
probe.style.position = "absolute";
|
||||
probe.style.visibility = "hidden";
|
||||
probe.style.width = `calc(var(${widthVar}) + var(--sidebar-content-gap))`;
|
||||
document.body.appendChild(probe);
|
||||
const width = parseFloat(window.getComputedStyle(probe).width);
|
||||
probe.remove();
|
||||
return width;
|
||||
};
|
||||
|
||||
const marginLeft = parseFloat(window.getComputedStyle(app).marginLeft);
|
||||
const state = sidebar.classList.contains("sidebar-expanded")
|
||||
? "expanded"
|
||||
: sidebar.classList.contains("sidebar-collapsed")
|
||||
? "collapsed"
|
||||
: "unknown";
|
||||
|
||||
return {
|
||||
opacity: styles.opacity,
|
||||
pointerEvents: styles.pointerEvents,
|
||||
zIndex: styles.zIndex,
|
||||
navLayer,
|
||||
state,
|
||||
marginLeft,
|
||||
collapsedMargin: computeMargin("--sidebar-width-collapsed"),
|
||||
expandedMargin: computeMargin("--sidebar-width-expanded"),
|
||||
overlayExists: Boolean(document.getElementById("sidebarOverlay")),
|
||||
};
|
||||
});
|
||||
|
||||
expect(overlayState.opacity).toBe("1");
|
||||
expect(overlayState.pointerEvents).toBe("auto");
|
||||
expect(overlayState.zIndex).toBe(overlayState.navLayer);
|
||||
expect(initialLayout.overlayExists).toBe(false);
|
||||
expect(initialLayout.state).toBe("collapsed");
|
||||
expect(Math.abs(initialLayout.marginLeft - initialLayout.collapsedMargin)).toBeLessThan(0.5);
|
||||
|
||||
await collapseToggle.click();
|
||||
|
||||
await page.waitForFunction(() =>
|
||||
document.getElementById("sidebar")?.classList.contains("sidebar-expanded")
|
||||
);
|
||||
|
||||
const expandedLayout = await page.evaluate(() => {
|
||||
const sidebar = document.getElementById("sidebar");
|
||||
const app = document.getElementById("app");
|
||||
if (!sidebar || !app) {
|
||||
throw new Error("Missing sidebar layout nodes");
|
||||
}
|
||||
|
||||
const computeMargin = (widthVar) => {
|
||||
const probe = document.createElement("div");
|
||||
probe.style.position = "absolute";
|
||||
probe.style.visibility = "hidden";
|
||||
probe.style.width = `calc(var(${widthVar}) + var(--sidebar-content-gap))`;
|
||||
document.body.appendChild(probe);
|
||||
const width = parseFloat(window.getComputedStyle(probe).width);
|
||||
probe.remove();
|
||||
return width;
|
||||
};
|
||||
|
||||
const marginLeft = parseFloat(window.getComputedStyle(app).marginLeft);
|
||||
const state = sidebar.classList.contains("sidebar-expanded")
|
||||
? "expanded"
|
||||
: sidebar.classList.contains("sidebar-collapsed")
|
||||
? "collapsed"
|
||||
: "unknown";
|
||||
|
||||
return {
|
||||
state,
|
||||
marginLeft,
|
||||
expectedMargin: computeMargin("--sidebar-width-expanded"),
|
||||
};
|
||||
});
|
||||
|
||||
expect(expandedLayout.state).toBe("expanded");
|
||||
expect(Math.abs(expandedLayout.marginLeft - expandedLayout.expectedMargin)).toBeLessThan(0.5);
|
||||
|
||||
const footerButton = page.locator("#footerDropdownButton");
|
||||
await expect(footerButton).toBeVisible();
|
||||
await footerButton.click();
|
||||
await expect(footerButton).toHaveAttribute("aria-expanded", "true");
|
||||
|
||||
const dropupState = await page.evaluate(() => {
|
||||
const footerLinks = document.getElementById("footerLinksContainer");
|
||||
if (!footerLinks) {
|
||||
throw new Error("Missing footer links container");
|
||||
}
|
||||
return {
|
||||
state: footerLinks.getAttribute("data-state"),
|
||||
ariaHidden: footerLinks.getAttribute("aria-hidden"),
|
||||
};
|
||||
});
|
||||
|
||||
expect(dropupState.state).toBe("expanded");
|
||||
expect(dropupState.ariaHidden).toBe("false");
|
||||
});
|
||||
|
||||
test("toast stack honors overlay toast layer", async ({ page }) => {
|
||||
|
||||
Reference in new issue
Block a user