fix mobile layouts

martincham · Oct 15, 2024 · 15e645c · 15e645c
1 parent c42aac3
commit 15e645c
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 26 deletions.
diff --git a/src/App.css b/src/App.css
@@ -1,7 +1,3 @@
-#root {
-    padding: 2rem;
-}
-
 @media (prefers-reduced-motion: no-preference) {
     a:nth-of-type(2) .logo {
         animation: logo-spin infinite 20s linear;

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,11 +1,12 @@
 import React, { useState } from "react";
 import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
 import "./App.css";
+/* Components */
 import { ThemeProvider } from "@/components/theme-provider";
 import { DarkSwitch } from "@/components/DarkSwitch.tsx";
 import { Button } from "@/components/ui/button.tsx";
-import Sidebar from "./components/Sidebar.tsx";
-
+import Sidebar from "@/components/Sidebar.tsx";
+/* Art */
 import Home from "@/Home.tsx";
 import Hubris from "@/pages/art/Hubris.tsx";
 import Penance from "@/pages/art/Penance.tsx";
@@ -14,11 +15,11 @@ import Tofu from "@/pages/art/Tofu.tsx";
 import ExitSign from "@/pages/art/ExitSign.tsx";
 import CeilingTile from "@/pages/art/CeilingTile.tsx";
 import IroningBoard from "@/pages/art/IroningBoard.tsx";
-
+/* Dev */
 import Nba from "@/pages/dev/NBA.tsx";
 import HubrisDev from "@/pages/dev/HubrisDev.tsx";
 import Websites from "@/pages/dev/Websites.tsx";
-
+/* About */
 import ArtistStatment from "@/pages/about/ArtistStatement.tsx";
 import AboutMe from "@/pages/about/AboutMe.tsx";
 import Resume from "@/pages/about/Resume.tsx";
@@ -35,17 +36,17 @@ const App: React.FC = () => {
     <>
       <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
         <Router>
-          <div>
-            <div>
+          <div className="md:p-8 p-2">
+            <div className="md:h-auto md:items-start md:justify-start  md:pt-0">
               {/* Header Bar */}
-              <div className="flex items-center justify-between">
+              <div className="flex items-center justify-between flex-col md:flex-row">
                 {/* Title */}
                 <Link to="/">
-                  <h1 className="text-4xl  hover:text-zinc-500 dark:color-green-600 font-light">
+                  <h1 className="md:text-4xl text-3xl hover:text-zinc-500 dark:color-green-600 font-light mt-12 md:mt-0">
                     Martin Chamberlin
                   </h1>
                 </Link>
-                <div className="flex justify-end space-x-2">
+                <div className="flex justify-end space-x-2 ml-auto">
                   {/* Mode Toggle */}
                   <div className="ml-auto z-50 flex items-center justify-center">
                     <DarkSwitch />
@@ -85,17 +86,17 @@ const App: React.FC = () => {
           <div className="flex z-30">
             {/* Sidebar Menu */}
             <div
-              className={`fixed md:relative md:translate-x-0 top-0 right-0 h-full w-64  transition-all duration-200 z-40 ${
+              className={`fixed md:relative md:translate-x-0 top-0 right-0 h-full w-52 md:w-72 transition-all duration-200 z-40 ${
                 isOpen
                   ? "translate-x-0 bg-gray-50 dark:bg-zinc-950 md:bg-transparent"
                   : "translate-x-full duration-0 opacity-0 md:opacity-100"
-              } md:flex md:flex-col`}
+              } md:flex md:flex-col overflow-y-auto`}
             >
               <div className="py-10 md:hidden"></div>
               <Sidebar toggleSidebar={toggleSidebar} isOpen={isOpen} />
             </div>
             {/* Content */}
-            <div className="flex w-full max-w-screen-lg mx-auto p-4">
+            <div className="flex w-full max-w-screen-lg mx-auto p-0 md:p-4">
               <Routes>
                 <Route path="/" element={<Home />} />
                 <Route path="/hubris" element={<Hubris />} />

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -43,7 +43,7 @@ interface SidebarProps {
 
 const Sidebar: React.FC<SidebarProps> = ({ toggleSidebar }) => {
   return (
-    <nav className="flex flex-col space-y-2">
+    <nav className="flex flex-col space-y-2 pt-24 md:pt-0 md:space-y-0 md:flex-row md:items-center md:justify-between md:px-4 md:py-4">
       <Accordion type="multiple" className="w-full">
         {/* Art Projects */}
         {sidebarItems.map((sidebarItem, index) => (

diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
@@ -26,7 +26,7 @@ const AccordionTrigger = React.forwardRef<
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
-        "flex flex-1 items-center justify-between scroll-py-36 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        "flex flex-1 items-center justify-between scroll-py-36 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180 border-1 border-secondary-foreground md:border-0",
         className,
       )}
       {...props}
@@ -44,7 +44,7 @@ const AccordionContent = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <AccordionPrimitive.Content
     ref={ref}
-    className="hover:bg-zinc-200 dark:hover:bg-zinc-800 rounded-md p-2 overflow-hidden w-full text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    className="hover:bg-zinc-200 dark:hover:bg-zinc-800 rounded-md md:p-2 p-1 overflow-hidden w-full text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
     {...props}
   >
     <div className={cn("pt-0", className)}>{children}</div>

diff --git a/src/pages/about/ArtistStatement.tsx b/src/pages/about/ArtistStatement.tsx
@@ -8,11 +8,9 @@ const ArtistStatment: React.FC = () => {
         <p>
           I’m interested in human-made objects, the peculiar ways that we
           arrange matter to meet our needs. My work is an exploration of the
-          functionality of the objects that we use in our lives, by asking “if I
-          remove the functionality of an everyday object, does it turn into an
-          art object?” I undermine the key purpose of a given object, through
-          material or functional transformation, resulting in something
-          dysfunctional and absurd.
+          functionality of the objects that we use in our lives. I undermine the
+          key purpose of a given object, through material or functional
+          transformation, resulting in something dysfunctional and absurd.
           <br /> <br />
           The ‘art object’ is generally regarded as the antithesis of the
           ‘functional object’; the ‘art object’ is to be looked at but not used.

diff --git a/src/pages/dev/NBA.tsx b/src/pages/dev/NBA.tsx
@@ -12,8 +12,8 @@ import { NbaChartPG } from "@/charts/NbaChartPG";
 
 const Nba: React.FC = () => {
   return (
-    <div className="mx-auto flex  flex-col items-center justify-center gap-6 p-4 sm:p-6 lg:p-8">
-      <div className="grid w-full gap-6 sm:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
+    <div className="mx-auto flex w-full flex-col items-center justify-center gap-6 p-4 sm:p-6 lg:p-8">
+      <div className="grid max-w- gap-6 sm:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 chart-wrapper">
         {/* NBA Chart Cards */}
         <Card className="lg:max-w-md" x-chunk="charts-01-chunk-0">
           <CardHeader>