.navbar {
padding: 0;
transition-property: width;
}
.logoButton {
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
height: fit-content;
padding: 8px 7px;
border-radius: var(--mantine-radius-sm);
transition: background-color 100ms ease;
&:hover {
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-8));
}
& > * {
display: block;
}
}
.menuTitle {
height: 40px;
margin: 0;
padding-left: 10px;
display: flex;
align-items: flex-end;
padding-bottom: 8px;
box-sizing: border-box;
font-size: var(--mantine-font-size-xs);
line-height: 1;
white-space: nowrap;
overflow: hidden;
color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-gray-6));
opacity: 0;
transition: opacity 150ms ease;
&[data-opened] {
opacity: 1;
}
}
.menuTitle:empty,
.menuTitle:blank {
display: none;
}
.link {
width: 100%;
height: 36px;
border-radius: var(--mantine-radius-sm);
font-weight: 450;
display: flex;
align-items: center;
justify-content: start;
padding: 0 var(--mantine-spacing-xs);
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
outline: none;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
&:hover {
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-8));
text-decoration: none;
}
& svg:global(.tabler-icon) {
color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
stroke-width: 2;
width: 18px;
height: 18px;
min-width: 18px;
max-width: 18px;
}
&[data-active] {
&,
&:hover {
background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-6));
color: light-dark(var(--mantine-primary-color-light-color), var(--mantine-primary-color-5));
& svg:global(.tabler-icon) {
color: light-dark(var(--mantine-primary-color-light-color), var(--mantine-primary-color-6));
}
}
}
}
.link:focus-visible {
outline: none;
}
.linkLabel {
margin-left: 8px;
white-space: nowrap;
opacity: 0;
transition: opacity 150ms ease;
&[data-opened] {
opacity: 1;
}
}
.addBookmarkLink {
margin-top: 40px;
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
& svg:global(.tabler-icon) {
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
}
}
.toggleButton {
width: 38px;
height: 36px;
border-radius: var(--mantine-radius-sm);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: background-color 100ms ease;
cursor: ew-resize;
& svg:global(.tabler-icon) {
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
stroke-width: 2;
width: 18px;
height: 18px;
min-width: 18px;
max-width: 18px;
}
&:hover {
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-8));
}
}
.divider {
border-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
}
