🎨 style: adjust layout for mobile

packages/frontend/src/components/shared/Sidebar/Sidebar.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { Link, NavLink, useNavigate, useParams } from 'react-router-dom';
+import { NavLink, useNavigate, useParams } from 'react-router-dom';
 import { Organization } from 'gql-client';
 
 import { Option } from '@material-tailwind/react';
@@ -16,7 +16,7 @@ import {
   SettingsSlidersIcon,
 } from 'components/shared/CustomIcon';
 import { Tabs } from 'components/shared/Tabs';
-import { Heading } from 'components/shared/Heading';
+import { Logo } from 'components/Logo';
 
 export const Sidebar = () => {
   const { orgSlug } = useParams();
@@ -43,18 +43,8 @@ export const Sidebar = () => {
   }, [disconnect, navigate]);
 
   return (
-    <nav className="flex flex-col h-full px-6 py-8 gap-9">
-      {/* Logo */}
-      <Link to={`/${orgSlug}`}>
-        <div className="flex items-center gap-3 px-2">
-          <img
-            src="/logo.svg"
-            alt="Snowball Logo"
-            className="h-10 w-10 rounded-lg"
-          />
-          <Heading className="text-[24px] font-semibold">Snowball</Heading>
-        </div>
-      </Link>
+    <nav className="lg:flex hidden flex-col h-full px-6 py-8 gap-9">
+      <Logo orgSlug={orgSlug} />
       {/* Switch organization */}
       <div className="flex flex-1 flex-col gap-4">
         <AsyncSelect

packages/frontend/src/pages/org-slug/index.tsx

@@ -26,7 +26,7 @@ const Projects = () => {
   }, [orgSlug]);
 
   return (
-    <section className="px-6 py-6 flex flex-col gap-6">
+    <section className="px-4 md:px-6 py-6 flex flex-col gap-6">
       {/* Header */}
       <div className="flex items-center">
         <div className="grow">
@@ -44,7 +44,7 @@ const Projects = () => {
         </Link>
       </div>
       {/* List of projects */}
-      <div className="grid grid-cols-3 gap-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
         {projects.length > 0 &&
           projects.map((project, key) => {
             return <ProjectCard project={project} key={key} />;

packages/frontend/src/pages/org-slug/layout.tsx

@@ -1,7 +1,14 @@
+import { Logo } from 'components/Logo';
+import { Button } from 'components/shared/Button';
+import {
+  MenuIcon,
+  NotificationBellIcon,
+  SearchIcon,
+} from 'components/shared/CustomIcon';
 import { Sidebar } from 'components/shared/Sidebar';
 import { OctokitProvider } from 'context/OctokitContext';
 import React, { ComponentPropsWithoutRef } from 'react';
-import { Outlet } from 'react-router-dom';
+import { Outlet, useParams } from 'react-router-dom';
 import { cn } from 'utils/classnames';
 
 export interface DashboardLayoutProps
@@ -12,13 +19,33 @@ export const DashboardLayout = ({
   children,
   ...props
 }: DashboardLayoutProps) => {
+  const { orgSlug } = useParams();
+
   return (
     <section
       {...props}
-      className={cn('grid grid-cols-5 h-screen bg-snowball-50', className)}
+      className={cn(
+        'lg:grid flex flex-col lg:grid-cols-5 h-screen bg-snowball-50',
+        className,
+      )}
     >
       <Sidebar />
-      <div className="col-span-4 h-full px-3 py-3 overflow-y-hidden">
+      {/* Header on mobile */}
+      <div className="flex lg:hidden items-center px-4 py-4 justify-between">
+        <Logo orgSlug={orgSlug} />
+        <div className="flex items-center gap-0.5">
+          <Button iconOnly variant="ghost">
+            <NotificationBellIcon size={18} />
+          </Button>
+          <Button iconOnly variant="ghost">
+            <SearchIcon size={18} />
+          </Button>
+          <Button iconOnly variant="ghost">
+            <MenuIcon size={18} />
+          </Button>
+        </div>
+      </div>
+      <div className="lg:col-span-4 w-full h-full px-1 py-1 md:px-3 md:py-3 overflow-y-hidden">
         <div className="rounded-3xl bg-base-bg h-full shadow-card overflow-y-auto relative">
           <OctokitProvider>
             <Outlet />