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 96a6c13e6c.

* Adjust padding slightly

---------

Co-authored-by: Kalle <38327916+Sendouc@users.noreply.github.com>

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

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

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);
 }