fix sidebar usability issues on smaller devices

BrookJeynes · Jul 11, 2024 · 179d278 · 179d278
1 parent 2acc659
commit 179d278
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 5 deletions.
diff --git a/src/components/IslandInfo.tsx b/src/components/IslandInfo.tsx
@@ -14,7 +14,7 @@ export default function IslandInfo() {
 
     return (
         <div>
-            <div className="flex justify-between mb-5 items-center">
+            <div className="flex flex-col md:flex-row gap-2 md:gap-0 justify-between mb-5 md:items-center">
                 <h2 className="text-lg font-bold">Island Info</h2>
                 <select
                     value={selected_island}

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -19,9 +19,9 @@ export default function Sidebar({
     const [show_sidebar, setShowSidebar] = useState(false);
 
     return (
-        <div className="absoluter">
+        <div className="absolute">
             <div
-                className={`transition-all duration-500 fixed top-0 left-0 h-full bg-gradient-to-br from-blue-950 to-indigo-950 text-white border-r-solid border-r-[1px] ${show_sidebar ? "translate-x-0" : "-translate-x-full"} w-96 z-50`}
+                className={`transition-all duration-500 fixed top-0 left-0 h-full bg-gradient-to-br from-blue-950 to-indigo-950 text-white border-r-solid border-r-[1px] ${show_sidebar ? "translate-x-0" : "-translate-x-full"} w-2/3 md:w-1/4 z-50 overflow-scroll`}
             >
                 <div className="flex flex-col gap-5 px-4">
                     <div className="flex flex-col gap-2">
@@ -57,7 +57,7 @@ export default function Sidebar({
 
             <button
                 onClick={() => setShowSidebar(!show_sidebar)}
-                className={`transition-all duration-500 fixed top-1/2 -translate-y-1/2 bg-gradient-to-l from-blue-950 to-indigo-950 text-white p-2 border-solid border-[1px] border-l-0 rounded-r-md ${show_sidebar ? "left-96" : "left-0"} z-50`}
+                className={`transition-all duration-500 fixed top-1/2 -translate-y-1/2 bg-gradient-to-l from-blue-950 to-indigo-950 text-white p-2 border-solid border-[1px] border-l-0 rounded-r-md ${show_sidebar ? "left-2/3 md:left-1/4" : "left-0"} z-50`}
             >
                 {show_sidebar ? (
                     <FaChevronLeft

diff --git a/src/components/UserPins.tsx b/src/components/UserPins.tsx
@@ -25,7 +25,7 @@ export function SidebarPins({
 
     return (
         <div>
-            <div className="flex justify-between mb-5 items-center">
+            <div className="flex flex-col md:flex-row gap-2 md:gap-0 justify-between mb-5 md:items-center">
                 <div className="flex items-center">
                     {selected_pin && <img
                         src={`icons/${selected_pin.icon}`}