126 remove the sticky side bar on mobile (#137)

* Remove sticky sidebar on mobile Also remove the extra links * Add flex-wrap on new award totals
byronwall · Oct 31, 2023 · 36a02c8 · 36a02c8
1 parent f32fb92
commit 36a02c8
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 18 deletions.
diff --git a/src/app/awards/AwardsForProfile.tsx b/src/app/awards/AwardsForProfile.tsx
@@ -44,7 +44,7 @@ export function AwardsForProfile() {
 
   return (
     <div className="flex flex-col items-center gap-4">
-      <div className="flex gap-4">
+      <div className="flex flex-wrap gap-4">
         <Card>
           <CardHeader>
             <CardTitle>Words</CardTitle>

diff --git a/src/app/plan/[planNameSlugged]/layout.tsx b/src/app/plan/[planNameSlugged]/layout.tsx
@@ -38,7 +38,7 @@ export default function RootLayout({
   return (
     <div className="grid-sidebar w-full">
       <div
-        className="sticky top-0 flex flex-col gap-2 overflow-y-auto text-left"
+        className=" top-0 flex flex-col gap-2 overflow-y-auto text-left sm:sticky"
         style={{
           maxHeight: "calc(100vh - 4rem)",
         }}
@@ -54,23 +54,25 @@ export default function RootLayout({
           </span>
         </Link>
 
-        {links.map(({ href, label, icon }) => {
-          const Icon = Icons[icon ?? "arrowRight"];
+        <div className="hidden sm:block">
+          {links.map(({ href, label, icon }) => {
+            const Icon = Icons[icon ?? "arrowRight"];
 
-          return (
-            <Link href={href} key={href}>
-              <span
-                className={cn(
-                  path === href ? "bg-gray-200" : "transparent",
-                  "hover:text-accent-foreground group flex items-center rounded-md px-3 py-2 text-sm font-medium hover:bg-gray-100"
-                )}
-              >
-                <Icon className="mr-2 h-4 w-4 shrink-0" />
-                <span>{label}</span>
-              </span>
-            </Link>
-          );
-        })}
+            return (
+              <Link href={href} key={href}>
+                <span
+                  className={cn(
+                    path === href ? "bg-gray-200" : "transparent",
+                    "hover:text-accent-foreground group flex items-center rounded-md px-3 py-2 text-sm font-medium hover:bg-gray-100"
+                  )}
+                >
+                  <Icon className="mr-2 h-4 w-4 shrink-0" />
+                  <span>{label}</span>
+                </span>
+              </Link>
+            );
+          })}
+        </div>
       </div>
       <div className="flex-1">{children}</div>
     </div>