Skip to content

Commit 4d720a1

Browse files
nginx-jacknginx-jack
committed
Sidebar: Basic implementation and styling
1 parent 6e5f5c6 commit 4d720a1

File tree

5 files changed

+135
-357
lines changed

5 files changed

+135
-357
lines changed

‎assets/css/v2/style.css‎

Lines changed: 54 additions & 276 deletions
Original file line numberDiff line numberDiff line change
@@ -85,11 +85,11 @@
8585
--code-copy-icon-height: 1rem;
8686
--code-copy-icon-width: 1rem;
8787
--breadcrumb-max-height: 54px;
88-
--sidebar-margin: 24px;
88+
--sidebar-margin: 1.5rem;
8989
--sidebar-line-box-side-length: 8px;
9090
--sidebar-line-box-top: 6px;
9191
--sidebar-line-box-left: 12px;
92-
--sidebar-width: 24rem;
92+
--sidebar-width: 22rem;
9393
--sidebar-line-width: 11.5px;
9494
--side-gutter-width: 20rem;
9595
--table-top-bottom-spacing: 1rem;
@@ -453,8 +453,10 @@ nav {
453453
.sidebar-layout {
454454
display: flex;
455455
flex-direction: column;
456-
position: relative;
457456
z-index: 2;
457+
border-right: 1px solid var(--color-divider);
458+
min-height: 100vh;
459+
overflow-y: auto;
458460
}
459461

460462
#searchbox {
@@ -710,36 +712,8 @@ body:not(:has(.main-layout)) header atomic-search-interface {
710712
}
711713
}
712714

713-
/* MARK: Sidebar
715+
/* MARK: Product Selector
714716
*/
715-
.sidebar {
716-
display: flex;
717-
flex-direction: column;
718-
width: 24rem;
719-
max-height: 100vh;
720-
position: sticky;
721-
top: 0;
722-
margin-top: -1rem;
723-
padding-top: 1rem;
724-
}
725-
726-
.sidebar .product-selector-button {
727-
display: flex;
728-
align-items: center;
729-
justify-content: space-between;
730-
background-color: oklch(var(--color-brand));
731-
color: var(--color-brand-100);
732-
border: none;
733-
font-size: 1.25rem;
734-
width: 100%;
735-
padding: 0.5rem 0.5rem 0.5rem 1rem; /* 1rem to vertically align with searchbar text */
736-
cursor: pointer;
737-
}
738-
739-
.sidebar .product-selector-button .selector-icon {
740-
height: 24px;
741-
width: 24px;
742-
}
743717

744718
.product-selector {
745719
display: none;
@@ -782,275 +756,79 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
782756
font-size: 1rem;
783757
}
784758

785-
/* Sidebar scroller */
786-
.sidebar .scrollbar-container {
787-
width: 100%;
788-
max-height: 100vh;
789-
overflow: scroll;
790-
scrollbar-gutter: stable;
791-
scrollbar-width: none;
792-
}
793-
794-
.sidebar .scrollbar-container:hover {
795-
overflow: auto;
796-
}
759+
/* MARK: Sidebar
760+
*/
797761

798-
.sidebar .sidebar-navigation {
799-
margin-left: var(--sidebar-margin);
762+
/* Reset/Renormalize lists to remove default browser styling */
763+
.sidebar__container,
764+
.sidebar__container button,
765+
.sidebar__container ul,
766+
.sidebar__container li {
767+
margin: 0;
768+
padding: 0;
769+
list-style: none;
770+
font-weight: 400;
771+
font-size: 1rem;
800772
}
801773

802-
/* removes the built in ul padding/margin */
803-
.sidebar .sidebar-navigation ul {
804-
margin-left: 0;
805-
padding-left: 0;
806-
list-style-type: none;
774+
.sidebar__container button {
775+
padding: 0.25rem 0.75rem;
807776
}
808777

809-
.sidebar ul :not(.sidebar-navigation) ul {
810-
padding-left: 16px;
778+
.sidebar__content {
779+
padding: 0.5rem 0 0.4rem 0;
811780
}
812781

813-
.sidebar .sidebar-navigation li {
814-
margin-bottom: 16px;
782+
.sidebar__ul {
783+
padding-left: 0;
815784
}
816785

817-
.sidebar .sidebar-navigation a {
818-
text-decoration: none;
819-
color: black;
786+
.sidebar__children {
787+
padding-left: 1rem;
820788
}
821789

822-
.sidebar .sidebar-navigation .collapsible-header {
790+
.sidebar__toggle {
823791
cursor: pointer;
824-
}
825-
826-
.sidebar .sidebar-navigation .collapsible-content {
827-
display: none;
828-
position: relative;
829-
}
830-
831-
.sidebar .sidebar-navigation .parent-box.opened,
832-
.sidebar .sidebar-navigation .box.opened {
833-
display: none;
834-
}
835-
836-
.toggle-checkbox:checked ~ .collapsible-header .parent-box.expand,
837-
.toggle-checkbox:checked ~ .collapsible-header .box.expand {
838-
display: none;
839-
}
840-
841-
.toggle-checkbox:checked ~ .collapsible-content {
842-
display: block;
843-
}
844-
845-
.toggle-checkbox:checked ~ .collapsible-header .parent-box.opened {
846-
display: inline-block;
847-
}
848-
849-
.toggle-checkbox:checked ~ .collapsible-header .box.opened {
850-
display: block;
851-
}
852-
853-
/* Every other Sidebar Partial Vertical Line */
854-
.toggle-checkbox:checked ~ .collapsible-content::before {
855-
content: "";
856-
position: absolute;
857-
border-left: black 1px solid;
858-
left: -8.5px;
859-
top: -22.5px;
860-
height: calc(100% + 13.5px);
861-
}
862-
863-
/* Every other Sidebar Partial Horizontal Lines */
864-
.toggle-checkbox:checked ~ .collapsible-content li {
865-
position: relative;
866-
}
867-
868-
.collapsible-content .box::after {
869-
content: "";
870-
position: absolute;
871-
border-top: black 1px solid;
872-
left: -11.5px;
873-
width: var(--sidebar-line-width);
874-
top: 50%;
875-
}
876-
877-
.collapsible-content .opened::after {
878-
content: "";
879-
position: absolute;
880-
border-top: black 1px solid;
881-
left: -12.5px;
882-
width: var(--sidebar-line-width);
883-
top: 50%;
884-
}
885-
886-
.collapsible-content .box-link::after {
887-
content: "";
888-
position: absolute;
889-
border-top: black 1px solid;
890-
left: -11.5px;
891-
width: var(--sidebar-line-width);
892-
top: 50%;
893-
}
894-
895-
.selected {
896-
font-weight: 800;
897-
}
898-
899-
.sidebar .sidebar-navigation li:first-child {
900-
margin-top: 16px;
901-
}
902-
903-
.sidebar .sidebar-navigation ul li .parent-box-link {
904-
content: "";
905-
background-color: black;
906-
position: absolute;
907-
width: 1px;
908-
height: var(--sidebar-line-box-side-length);
909-
margin-top: var(--sidebar-line-box-top);
910-
left: calc(0px - var(--sidebar-line-box-left));
911-
}
912-
913-
.sidebar .sidebar-navigation ul li .box-link {
914-
content: "";
915-
background-color: black;
916-
position: absolute;
917-
width: 1px;
918-
height: var(--sidebar-line-box-side-length);
919-
margin-top: var(--sidebar-line-box-top);
920-
left: var(--sidebar-line-box-left);
921-
}
922-
923-
.sidebar .sidebar-navigation ul li .parent-box {
924-
content: "";
925-
display: inline-block;
926-
width: var(--sidebar-line-box-side-length);
927-
height: var(--sidebar-line-box-side-length);
928-
vertical-align: middle;
929-
margin-left: -12px;
930-
margin-top: -4px;
931-
}
932-
933-
.sidebar .sidebar-navigation ul li .box {
934-
content: "";
935-
position: absolute;
936-
width: var(--sidebar-line-box-side-length);
937-
height: var(--sidebar-line-box-side-length);
938-
margin-top: var(--sidebar-line-box-top);
939-
left: var(--sidebar-line-box-left);
940-
}
941-
942-
.sidebar .sidebar-navigation ul li .expand {
943-
background-color: black;
944-
}
945-
946-
.sidebar .sidebar-navigation ul li .opened {
947-
border: black 1px solid;
948-
}
949-
950-
.sidebar .sidebar-navigation ul li .current {
951-
background-color: oklch(var(--color-brand));
952-
}
953-
954-
.sidebar .sidebar-navigation ul li .partial-box {
955-
margin-left: -24px;
956-
}
957-
958-
.sidebar .sidebar-navigation ul li .partial {
959-
margin-top: 0;
960-
top: 5px;
961-
left: -13px;
962-
}
963-
964-
/* First Sidebar Nav Vertical Line */
965-
.sidebar .sidebar-navigation .parent-collapsible-content {
966-
position: relative;
967-
}
968-
969-
.sidebar .sidebar-navigation .parent-collapsible-content:first-child::before {
970-
content: "";
971-
position: absolute;
972-
border-left: black 1px solid;
973-
left: -24px;
974-
top: 10px;
975-
height: calc(100% - 9px - 10px);
976-
}
977-
978-
.sidebar
979-
.sidebar-navigation
980-
.parent-collapsible-content
981-
li:not(:only-child)
982-
a
983-
+ :not(:has(#TableOfContents))
984-
li::before {
792+
background: none;
985793
border: none;
794+
width: 100%;
795+
text-align: left;
796+
padding: 0.25rem 0.75rem;
797+
border-radius: 5px;
986798
}
987799

988-
/* First Sidebar Nav Horizontal Lines */
989-
.sidebar
990-
.sidebar-navigation
991-
.parent-collapsible-content
992-
li:not(:only-child)
993-
.parent-box::before {
994-
content: "";
800+
.sidebar__link {
995801
display: block;
996-
border-top: black 1px solid;
997-
margin-left: -12px;
998-
margin-top: 50%;
999-
width: var(--sidebar-line-width);
802+
padding: 0.25rem 0.75rem;
803+
margin: 2px 0.5rem 2px 0;
804+
border-radius: 5px;
805+
color: oklch(0 0 0 / 0.75);
806+
text-decoration: none;
1000807
}
1001808

1002-
.parent-collapsible-content .parent-box-link::after {
1003-
content: "";
1004-
position: absolute;
1005-
border-top: black 1px solid;
1006-
left: -11.5px;
1007-
width: var(--sidebar-line-width);
1008-
top: 50%;
809+
.sidebar__link--current {
810+
color: oklch(var(--color-brand) / 1);
811+
background-color: oklch(var(--color-brand) / 0.1);
812+
font-weight: 600;
1009813
}
1010814

1011-
.row {
1012-
display: flex;
1013-
flex-wrap: nowrap;
1014-
align-items: flex-start;
1015-
}
815+
.sidebar__toc {
816+
#TableOfContents {
817+
padding: 0.25rem 0.75rem;
818+
margin: 2px 0.5rem 2px 0;
819+
border-radius: 5px;
820+
color: oklch(0 0 0 / 0.75);
1016821

1017-
/* Details/Summary */
1018-
details summary {
1019-
color: oklch(var(--color-brand));
1020-
transition: text-decoration-color 0.15s ease-in-out;
1021-
text-decoration: underline;
1022-
text-decoration-color: oklch(var(--color-brand) / 0.3);
822+
&:empty {
823+
display: none;
824+
}
1023825

1024-
& ~ * {
1025-
margin-top: 1rem;
826+
li {
827+
padding: 0.25rem 0.75rem;
828+
}
1026829
}
1027830
}
1028831

1029-
details summary:hover {
1030-
text-decoration-color: oklch(var(--color-brand) / 0.8);
1031-
}
1032-
1033-
details:hover {
1034-
cursor: pointer;
1035-
}
1036-
1037-
/* Table of Contents */
1038-
#TableOfContents {
1039-
/* Close all TOC on sidebar */
1040-
display: none;
1041-
}
1042-
1043-
.current ~ nav,
1044-
.collapsible-content li ul li:has(.current) > nav {
1045-
/* Open TOC for current page */
1046-
display: block !important;
1047-
}
1048-
1049-
#TableOfContents li:not(:empty) {
1050-
position: relative;
1051-
list-style: square;
1052-
}
1053-
1054832
/* MARK: Content
1055833
*/
1056834
main {

0 commit comments

Comments
 (0)