From a1b34698e1517b720ec78ef5b6d2d68bb2cd6e86 Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Tue, 11 May 2021 12:39:45 +0300
Subject: [PATCH] Fix bug main content not centered

Closes #494

A bit hacky but seems to work. Play with negative margins
to get the content centered and set them to
0 before the menu overlaps with the content.
---
 components/layout/Nav.tsx |  1 +
 pages/styles.css          | 12 +++++++++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/components/layout/Nav.tsx b/components/layout/Nav.tsx
index 5dd8cb03e..4a8ec41f0 100644
--- a/components/layout/Nav.tsx
+++ b/components/layout/Nav.tsx
@@ -21,6 +21,7 @@ const Nav = () => {
   return (
     <Box
       width={expanded ? "175px" : "60px"}
+      marginRight={expanded ? "-175px" : "-60px"}
       as="nav"
       flexShrink={0}
       position="sticky"
diff --git a/pages/styles.css b/pages/styles.css
index dfe9d751a..feb4f6f2f 100644
--- a/pages/styles.css
+++ b/pages/styles.css
@@ -29,19 +29,25 @@ header {
   row-gap: 1.5rem;
   column-gap: 1.5rem;
   grid-template-rows: 37px 1fr 100px;
-  grid-template-columns: auto 1fr 175px;
+  grid-template-columns: auto 1fr;
   min-height: 100vh;
 }
 
+@media (max-width: 1365px) {
+  nav {
+    margin-right: 0 !important;
+  }
+}
+
 @media (max-width: 1200px) {
   #__next {
-    grid-template-columns: auto 1fr 0px;
+    grid-template-columns: auto 1fr;
   }
 }
 
 @media (max-width: 991px) {
   #__next {
-    grid-template-columns: 0px 1fr 0px;
+    grid-template-columns: 0px 1fr;
   }
 }