Adjusted side nav (#1524)

* Changed nav and side to be sticky * Centered calendar * Adjusted top padding * Added firefox scrollbar styling * Adjusted scroll colors to fit theme * Somehow this broke?? 😭 * Fix lint * Adjust calendar padding --------- Co-authored-by: hfcRed <[email protected]> Co-authored-by: Kalle <[email protected]>
Sendouc · Oct 21, 2023 · 3bfa182 · 3bfa182
1 parent 580274a
commit 3bfa182
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 37 deletions.
diff --git a/app/components/Main.tsx b/app/components/Main.tsx
@@ -1,9 +1,10 @@
-import { useCatch } from "@remix-run/react";
+import { useCatch, useLocation } from "@remix-run/react";
 import clsx from "clsx";
 import type * as React from "react";
 import { useMatches } from "react-router";
 import { useUser } from "~/modules/auth";
 import type { RootLoaderData } from "~/root";
+import { SideNav } from "app/components/layout/SideNav";
 
 export const Main = ({
   children,
@@ -25,28 +26,34 @@ export const Main = ({
   const user = useUser();
   const showLeaderboard = data?.publisherId && !user?.patronTier && !caught;
 
+  const location = useLocation();
+  const isFrontPage = location.pathname === "/";
+
   return (
-    <main
-      className={
-        classNameOverwrite
-          ? clsx(classNameOverwrite, {
-              "half-width": halfWidth,
-              "pt-8-forced": showLeaderboard,
-            })
-          : clsx(
-              "layout__main",
-              "main",
-              {
+    <div className="layout__main-container">
+      {!isFrontPage ? <SideNav /> : null}
+      <main
+        className={
+          classNameOverwrite
+            ? clsx(classNameOverwrite, {
                 "half-width": halfWidth,
-                bigger,
                 "pt-8-forced": showLeaderboard,
-              },
-              className,
-            )
-      }
-      style={style}
-    >
-      {children}
-    </main>
+              })
+            : clsx(
+                "layout__main",
+                "main",
+                {
+                  "half-width": halfWidth,
+                  bigger,
+                  "pt-8-forced": showLeaderboard,
+                },
+                className,
+              )
+        }
+        style={style}
+      >
+        {children}
+      </main>
+    </div>
   );
 };
diff --git a/app/components/layout/SideNav.tsx b/app/components/layout/SideNav.tsx
@@ -12,7 +12,7 @@ export function SideNav() {
       {navItems.map((item) => {
         return (
           <Link
-            to={item.url}
+            to={`/${item.url}`}
             key={item.name}
             prefetch={item.prefetch ? "render" : undefined}
           >

diff --git a/app/components/layout/index.tsx b/app/components/layout/index.tsx
@@ -5,7 +5,6 @@ import type { Breadcrumb, SendouRouteHandle } from "~/utils/remix";
 import { Footer } from "./Footer";
 import { useTranslation } from "~/hooks/useTranslation";
 import { Image } from "../Image";
-import { SideNav } from "./SideNav";
 import { UserItem } from "./UserItem";
 import { LanguageChanger } from "./LanguageChanger";
 import { ThemeChanger } from "./ThemeChanger";
@@ -110,7 +109,6 @@ export const Layout = React.memo(function Layout({
           {!isErrored ? <UserItem /> : null}
         </div>
       </header>
-      {!isFrontPage ? <SideNav /> : null}
       {showLeaderboard ? <MyRampUnit /> : null}
       {children}
       <Footer patrons={data?.patrons} />

diff --git a/app/routes/calendar/index.tsx b/app/routes/calendar/index.tsx
@@ -167,7 +167,7 @@ export default function CalendarPage() {
     : data.events;
 
   return (
-    <Main classNameOverwrite="stack lg layout__main">
+    <Main classNameOverwrite="stack lg main layout__main">
       <WeekLinks />
       <EventsToReport />
       <div className="stack md">

diff --git a/app/styles/calendar.css b/app/styles/calendar.css
@@ -104,8 +104,9 @@
 .calendar__event {
   display: flex;
   flex-direction: column;
-  padding-top: var(--s-4);
+  padding-top: var(--s-3);
   font-size: var(--fonts-lg);
+  padding-inline: var(--s-4);
 }
 
 .calendar__event + .calendar__event {

diff --git a/app/styles/layout.css b/app/styles/layout.css
@@ -1,7 +1,8 @@
 .layout__container {
   display: flex;
-  height: 100%;
   flex-direction: column;
+  width: 100%;
+  min-height: 100vh;
 }
 
 .layout__breadcrumb-container {
@@ -36,9 +37,7 @@
 }
 
 .layout__header {
-  position: fixed;
   z-index: 501;
-  top: 0;
   display: flex;
   width: 100%;
   align-items: center;
@@ -50,6 +49,8 @@
   font-weight: bold;
   padding-block: var(--s-2);
   padding-inline: var(--s-4);
+  position: sticky;
+  top: 0;
 }
 
 .layout__avatar {
@@ -107,9 +108,14 @@
   margin: 0 auto;
 }
 
+.layout__main-container {
+  display: flex;
+  flex-direction: row;
+}
+
 .layout__main {
   padding-block-end: var(--s-32);
-  padding-block-start: var(--s-16);
+  padding-block-start: var(--s-4);
 }
 
 .layout__log-in-button {
@@ -244,18 +250,60 @@
 }
 
 .layout__side-nav {
-  --top-size: calc(var(--item-size) + 2 * var(--s-2));
-
-  position: fixed;
-  top: var(--top-size);
+  background: black;
   display: flex;
-  height: calc(100vh - var(--top-size));
   flex-direction: column;
-  justify-content: flex-start;
   gap: var(--s-6);
-  overflow-y: auto;
   padding-block: var(--s-3);
   padding-inline: var(--s-4);
+  width: fit-content;
+  -webkit-backdrop-filter: var(--backdrop-filter);
+  backdrop-filter: var(--backdrop-filter);
+  background-color: transparent;
+  overflow-y: auto;
+  overflow-x: hidden;
+  direction: rtl;
+  position: sticky;
+
+  /*
+  Top pixel count needs to be the same as nav height
+  Max height is calculated using the viewport height minus the nav height
+  This is unfortunately needed to avoid the sidebar from overflowing the viewport or navbar
+  Without this, the sidebar would be cut off at the bottom or top or clip into it
+  Will return if a better solution is found that doesnt require a hard coded value
+  */
+  top: 47px;
+  max-height: calc(100vh - 47px);
+  scrollbar-color: rgb(83 65 91) transparent;
+  scrollbar-width: thin;
+  scrollbar-gutter: stable;
+}
+
+/*
+Works on literally every browser except Firefox 
+Firefox scrollbar styling is above in .layout__side-nav
+*/
+.layout__side-nav::-webkit-scrollbar {
+  width: 4px;
+}
+
+.layout__side-nav::-webkit-scrollbar-track {
+  background: black;
+  background-color: transparent;
+}
+
+.layout__side-nav::-webkit-scrollbar-corner {
+  background: black;
+  background-color: transparent;
+}
+
+.layout__side-nav::-webkit-scrollbar-thumb {
+  background-color: rgb(83 65 91);
+  border-radius: 4px;
+}
+
+.layout__side-nav::-webkit-scrollbar-thumb:hover {
+  background-color: rgb(62 49 68);
 }
 
 .layout__side-nav-image-container {