From fe5d4a9f0383ecd99581f7c795a3cf0c76a3bb30 Mon Sep 17 00:00:00 2001
From: Zen <99558412+zenpk@users.noreply.github.com>
Date: Thu, 15 Jun 2023 04:32:24 +0800
Subject: [PATCH] Fix the Sidenav hidden issue (#1386)

* Fix the sidebar links hidden issue

* another solution, detect overflow with client-side javascript

* Optimize the code

* Revert to use solution 1

This reverts commit 96a6c13e6c30bce5f9197912b56a2f76871276e1.

* Adjust padding slightly

---------

Co-authored-by: Kalle <38327916+Sendouc@users.noreply.github.com>
---
 app/components/layout/SideNav.tsx |  2 +-
 app/components/layout/index.tsx   |  3 +--
 app/styles/layout.css             | 12 +++++++++---
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/app/components/layout/SideNav.tsx b/app/components/layout/SideNav.tsx
index 02d48f1ca..a74a177d6 100644
--- a/app/components/layout/SideNav.tsx
+++ b/app/components/layout/SideNav.tsx
@@ -8,7 +8,7 @@ export function SideNav() {
   const { t } = useTranslation(["common"]);
 
   return (
-    <nav className="layout__side-nav">
+    <nav className="layout__side-nav layout__item_size">
       {navItems.map((item) => {
         return (
           <Link
diff --git a/app/components/layout/index.tsx b/app/components/layout/index.tsx
index 1e8224fbb..28a5a1763 100644
--- a/app/components/layout/index.tsx
+++ b/app/components/layout/index.tsx
@@ -54,10 +54,9 @@ export const Layout = React.memo(function Layout({
     data.publisherId &&
     !data?.user?.patronTier &&
     !location.pathname.includes("plans");
-
   return (
     <div className="layout__container">
-      <header className="layout__header">
+      <header className="layout__header layout__item_size">
         <div className="layout__breadcrumb-container">
           <Link to="/" className="layout__breadcrumb logo">
             sendou.ink
diff --git a/app/styles/layout.css b/app/styles/layout.css
index 228ab9353..49aa00407 100644
--- a/app/styles/layout.css
+++ b/app/styles/layout.css
@@ -31,9 +31,11 @@
   font-size: 20px;
 }
 
-.layout__header {
+.layout__item_size {
   --item-size: 1.9rem;
+}
 
+.layout__header {
   position: fixed;
   z-index: 501;
   top: 0;
@@ -234,13 +236,17 @@
 }
 
 .layout__side-nav {
+  --top-size: calc(var(--item-size) + 2 * var(--s-2));
+
   position: fixed;
+  top: var(--top-size);
   display: flex;
-  height: 100vh;
+  height: calc(100vh - var(--top-size));
   flex-direction: column;
-  justify-content: center;
+  justify-content: flex-start;
   gap: var(--s-6);
   overflow-y: auto;
+  padding-block: var(--s-3);
   padding-inline: var(--s-4);
 }