Make sidebars responsive (#17010)

* make sidebar responsive

* adding separator after submenu on small screens

* make heading smaller on small screens

Author: selfcontained

components/dashboard/src/components/PageWithSubMenu.tsx

@@ -4,9 +4,12 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
+import classNames from "classnames";
+import { FC, useEffect, useRef } from "react";
 import { useLocation } from "react-router";
 import { Link } from "react-router-dom";
 import Header, { TabEntry } from "../components/Header";
+import { Separator } from "./Separator";
 
 export interface PageWithSubMenuProps {
     title: string;
@@ -20,30 +23,64 @@ export interface PageWithSubMenuProps {
 }
 
 export function PageWithSubMenu(p: PageWithSubMenuProps) {
-    const location = useLocation();
     return (
         <div className="w-full">
             <Header title={p.title} subtitle={p.subtitle} tabs={p.tabs} />
-            <div className="app-container flex pt-9">
+            <div className="app-container flex md:pt-9 flex-col md:flex-row">
+                {/* TODO: extract into SubMenu component and show scrolling indicators */}
                 <div>
-                    <ul className="flex flex-col text tracking-wide text-gray-500 pt-4 lg:pt-0 w-52 space-y-2">
+                    <ul
+                        className={classNames(
+                            // Handle flipping between row and column layout
+                            "flex flex-row md:flex-col items-center",
+                            "w-full md:w-52 overflow-auto md:overflow-visible",
+                            "pt-4 pb-4 md:pb-0",
+                            "space-x-2 md:space-x-0 md:space-y-2",
+                            "tracking-wide text-gray-500",
+                        )}
+                    >
                         {p.subMenu.map((e) => {
-                            let classes = "flex block py-2 px-4 rounded-md";
-                            if (e.link.some((l) => l === location.pathname)) {
-                                classes += " bg-gray-300 text-gray-800 dark:bg-gray-800 dark:text-gray-50";
-                            } else {
-                                classes += " hover:bg-gray-100 dark:hover:bg-gray-800";
-                            }
-                            return (
-                                <Link to={e.link[0]} key={e.title}>
-                                    <li className={classes}>{e.title}</li>
-                                </Link>
-                            );
+                            return <SubmenuItem title={e.title} link={e.link} key={e.title} />;
                         })}
                     </ul>
                 </div>
-                <div className="ml-16 lg:ml-32 w-full pt-1 mb-40">{p.children}</div>
+                <div className="md:ml-16 lg:ml-32 w-full pt-1 mb-40">
+                    <Separator className="md:hidden" />
+                    <div className="pt-4 md:pt-0">{p.children}</div>
+                </div>
             </div>
         </div>
     );
 }
+
+type SubmenuItemProps = {
+    title: string;
+    link: string[];
+};
+
+const SubmenuItem: FC<SubmenuItemProps> = ({ title, link }) => {
+    const location = useLocation();
+    const itemRef = useRef<HTMLLIElement>(null);
+
+    // TODO: can remove this once we use sub-routes and don't re-render the whole page for each sub-route
+    useEffect(() => {
+        if (itemRef.current && link.some((l) => l === location.pathname)) {
+            itemRef.current.scrollIntoView({ behavior: "auto", block: "nearest", inline: "start" });
+        }
+    }, [link, location.pathname]);
+
+    let classes = "flex block py-2 px-4 rounded-md whitespace-nowrap max-w-52";
+
+    if (link.some((l) => l === location.pathname)) {
+        classes += " bg-gray-300 text-gray-800 dark:bg-gray-800 dark:text-gray-50";
+    } else {
+        classes += " hover:bg-gray-100 dark:hover:bg-gray-800";
+    }
+    return (
+        <Link to={link[0]} key={title} className="md:w-full">
+            <li ref={itemRef} className={classes}>
+                {title}
+            </li>
+        </Link>
+    );
+};

components/dashboard/src/components/typography/headings.tsx

@@ -19,7 +19,7 @@ export const Heading1: FC<HeadingProps> = ({ color, tracking, className, childre
             className={classNames(
                 getHeadingColor(color),
                 getTracking(tracking),
-                "font-bold text-5xl leading-64",
+                "font-bold text-4xl md:text-5xl leading-64",
                 className,
             )}
         >