Add option to only apply a margin when Gitako is open to the header

Instead of applying the left margin to the entire page when Gitako is open, I’d rather it was applied only to the header. Moving the with-gitako-spacing class down to the .js-header-wrapper class solves this rather simply.

This should be a toggle-able option that is disabled by default. This feature would mainly be intended for larger monitors that have enough screen real estate that opening a panel on the side doesn’t impact anything.

The following styles can also achieve the same effect:

.with-gitako-spacing {
    margin-left: 0;
}

.with-gitako-spcaing .js-header-wrapper {
    margin-left: var(--gitako-width);
}

[SpedNSFW]

I think the issue comes down to screen sizes. For larger sizes, moving the entire page content over is very annoying. It’s unnecessary and moves the content so it’s no longer center.

I have included an image below of what it looks like for me. Note I am using a dark stylesheet that does not change the page layout in anyway.

At 1080p with a width of 300px, the gitako panel fits in perfectly. For even larger displays like my 1440p monitor, it just makes sense.

So perhaps changing the stylesheet to something like this would work:

@media (min-width: 1920px) {
    .with-gitako-spacing {
        margin-left: 0;
    }
    .with-gitako-spacing .js-header-wrapper {
        margin-left: var(--gitako-width);
    }
}

[EnixCoda]

@mukkachaitanya In the very early versions of Gitako, this feature was supported. But removed due to maintenance cost.