fix header height
This commit is contained in:
parent
cd84395308
commit
5efd8b3713
@ -11,7 +11,7 @@
|
||||
width: 100%;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
max-height: calc(100vh - 83px);
|
||||
max-height: calc(100vh - var(--header-height));
|
||||
overflow: auto;
|
||||
> *:not(:last-child) {
|
||||
margin-bottom: 24px;
|
||||
|
@ -6,7 +6,7 @@
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
height: 75px;
|
||||
height: var(--header-height);
|
||||
padding: 0px var(--spacing-lg, 24px);
|
||||
|
||||
border-bottom: 1px solid var(--menu-border, #d7dce0);
|
||||
|
@ -23,6 +23,8 @@ type IProps = {
|
||||
isUserConnected: boolean;
|
||||
};
|
||||
|
||||
const headerHeight = 75;
|
||||
|
||||
export default function Header(props: IProps) {
|
||||
const { isUserConnected } = props;
|
||||
|
||||
@ -44,6 +46,7 @@ export default function Header(props: IProps) {
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
document.documentElement.style.setProperty("--header-height", `${headerHeight}px`);
|
||||
loadSubscription();
|
||||
}, [loadSubscription]);
|
||||
|
||||
|
@ -14,7 +14,7 @@
|
||||
.content {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
height: calc(100vh - 83px);
|
||||
height: calc(100vh - var(--header-height));
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
@ -66,7 +66,7 @@
|
||||
justify-content: center;
|
||||
min-width: 56px;
|
||||
max-width: 56px;
|
||||
height: calc(100vh - 83px);
|
||||
height: calc(100vh - var(--header-height));
|
||||
border-right: 1px var(--color-neutral-200) solid;
|
||||
|
||||
@media (min-width: $screen-m) {
|
||||
|
@ -14,7 +14,7 @@
|
||||
.content {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
height: calc(100vh - 83px);
|
||||
height: calc(100vh - var(--header-height));
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
@ -66,7 +66,7 @@
|
||||
justify-content: center;
|
||||
min-width: 56px;
|
||||
max-width: 56px;
|
||||
height: calc(100vh - 83px);
|
||||
height: calc(100vh - var(--header-height));
|
||||
border-right: 1px var(--color-neutral-200) solid;
|
||||
|
||||
@media (min-width: $screen-m) {
|
||||
|
@ -14,7 +14,7 @@
|
||||
.content {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
height: calc(100vh - 83px);
|
||||
height: calc(100vh - var(--header-height));
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
@ -66,7 +66,7 @@
|
||||
justify-content: center;
|
||||
min-width: 56px;
|
||||
max-width: 56px;
|
||||
height: calc(100vh - 83px);
|
||||
height: calc(100vh - var(--header-height));
|
||||
border-right: 1px var(--color-neutral-200) solid;
|
||||
|
||||
@media (min-width: $screen-m) {
|
||||
|
@ -5,7 +5,7 @@
|
||||
.content {
|
||||
display: flex;
|
||||
.sides {
|
||||
min-height: calc(100vh - 83px);
|
||||
min-height: calc(100vh - var(--header-height));
|
||||
width: 50%;
|
||||
@media (max-width: $screen-m) {
|
||||
width: 100%;
|
||||
@ -31,7 +31,7 @@
|
||||
width: 50vw;
|
||||
top: 83px;
|
||||
right: 0;
|
||||
height: calc(100vh - 83px);
|
||||
height: calc(100vh - var(--header-height));
|
||||
@media (max-width: $screen-m) {
|
||||
display: none;
|
||||
}
|
||||
|
@ -15,7 +15,7 @@
|
||||
.content {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
height: calc(100vh - 83px);
|
||||
height: calc(100vh - var(--header-height));
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
@ -67,7 +67,7 @@
|
||||
justify-content: center;
|
||||
min-width: 56px;
|
||||
max-width: 56px;
|
||||
height: calc(100vh - 83px);
|
||||
height: calc(100vh - var(--header-height));
|
||||
border-right: 1px var(--color-neutral-200) solid;
|
||||
|
||||
@media (min-width: $screen-m) {
|
||||
|
@ -14,7 +14,7 @@
|
||||
.content {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
height: calc(100vh - 83px);
|
||||
height: calc(100vh - var(--header-height));
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
@ -66,7 +66,7 @@
|
||||
justify-content: center;
|
||||
min-width: 56px;
|
||||
max-width: 56px;
|
||||
height: calc(100vh - 83px);
|
||||
height: calc(100vh - var(--header-height));
|
||||
border-right: 1px var(--color-neutral-200) solid;
|
||||
|
||||
@media (min-width: $screen-m) {
|
||||
|
@ -14,7 +14,7 @@
|
||||
.content {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
height: calc(100vh - 83px);
|
||||
height: calc(100vh - var(--header-height));
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
@ -66,7 +66,7 @@
|
||||
justify-content: center;
|
||||
min-width: 56px;
|
||||
max-width: 56px;
|
||||
height: calc(100vh - 83px);
|
||||
height: calc(100vh - var(--header-height));
|
||||
border-right: 1px var(--color-neutral-200) solid;
|
||||
|
||||
@media (min-width: $screen-m) {
|
||||
|
@ -14,7 +14,7 @@
|
||||
.content {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
height: calc(100vh - 83px);
|
||||
height: calc(100vh - var(--header-height));
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
@ -66,7 +66,7 @@
|
||||
justify-content: center;
|
||||
min-width: 56px;
|
||||
max-width: 56px;
|
||||
height: calc(100vh - 83px);
|
||||
height: calc(100vh - var(--header-height));
|
||||
border-right: 1px var(--color-neutral-200 solid);
|
||||
|
||||
@media (min-width: $screen-m) {
|
||||
|
Loading…
x
Reference in New Issue
Block a user