Merge pull request #4684 from h3poteto/iss-4653/fold-side-menu

refs #4653 Fold sidebar when screen is narrow

renderer/app.css

@@ -8,11 +8,15 @@
   height: 1.2rem;
 }
 
+
+.timeline-wrapper {
+  width: calc(100% - 16rem);
+}
+
 .timeline {
   width: 100%;
 }
 
-
 .timeline-with-drawer {
   width: calc(100% - 384px);
 }
@@ -21,9 +25,30 @@
   width: 384px;
 }
 
+@media screen and (max-width: 1112px) {
+  .sidebar-menu {
+    display: none;
+  }
+
+  .my-profile {
+    visibility: hidden;
+  }
+
+  .sidebar {
+    width: 64px;
+  }
+
+  .timeline-wrapper {
+    width: calc(100% - 64px);
+  }
+
+  .sidebar-menu-item > span {
+    display: none;
+  }
+}
+
 @media screen and (max-width: 996px) {
   .timeline-with-drawer {
-    width: 0;
     display: none;
   }
 

renderer/components/layouts/timelines.tsx

@@ -2,6 +2,7 @@ import { Account, db } from '@/db'
 import { CustomFlowbiteTheme, Flowbite, Sidebar } from 'flowbite-react'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
+import { FaBell, FaGlobe, FaHouse, FaUsers } from 'react-icons/fa6'
 import { useIntl } from 'react-intl'
 
 type LayoutProps = {
@@ -15,7 +16,11 @@ const customTheme: CustomFlowbiteTheme = {
     },
     item: {
       base: 'flex items-center justify-center rounded-lg p-2 text-base font-normal text-blue-200 hover:bg-blue-900 dark:text-blue-200 dark:hover:bg-blue-900 cursor-pointer',
-      active: 'bg-blue-400 text-gray-800 hover:bg-blue-300'
+      active: 'bg-blue-400 text-gray-800 hover:bg-blue-300',
+      icon: {
+        base: 'h-5 w-5 flex-shrink-0 text-gray-500 transition duration-75 text-blue-200 group-hover:text-blue-900 dark:text-blue-200 dark:group-hover:text-blue-900',
+        active: 'text-gray-800'
+      }
     }
   }
 }
@@ -40,38 +45,48 @@ export default function Layout({ children }: LayoutProps) {
     {
       id: 'home',
       title: formatMessage({ id: 'timeline.home' }),
+      icon: FaHouse,
       path: `/accounts/${router.query.id}/home`
     },
     {
       id: 'notifications',
       title: formatMessage({ id: 'timeline.notifications' }),
+      icon: FaBell,
       path: `/accounts/${router.query.id}/notifications`
     },
     {
       id: 'local',
       title: formatMessage({ id: 'timeline.local' }),
+      icon: FaUsers,
       path: `/accounts/${router.query.id}/local`
     },
     {
       id: 'public',
       title: formatMessage({ id: 'timeline.public' }),
+      icon: FaGlobe,
       path: `/accounts/${router.query.id}/public`
     }
   ]
 
   return (
-    <section className="flex h-screen w-full">
+    <section className="flex h-screen w-full overflow-hidden">
       <Flowbite theme={{ theme: customTheme }}>
-        <Sidebar className="text-blue-200">
-          <div className="max-w-full pl-4 mt-2 mb-4">
+        <Sidebar className="text-blue-200 sidebar">
+          <div className="max-w-full pl-4 mt-2 mb-4 my-profile">
             <p>{account?.username}</p>
             <p>@{account?.domain}</p>
           </div>
           <Sidebar.Items>
             <Sidebar.ItemGroup>
               {pages.map(page => (
-                <Sidebar.Item key={page.id} active={router.asPath.includes(page.path)} onClick={() => router.push(page.path)}>
-                  {page.title}
+                <Sidebar.Item
+                  key={page.id}
+                  active={router.asPath.includes(page.path)}
+                  onClick={() => router.push(page.path)}
+                  icon={page.icon}
+                  className="sidebar-menu-item"
+                >
+                  <span className="sidebar-menu">{page.title}</span>
                 </Sidebar.Item>
               ))}
             </Sidebar.ItemGroup>

renderer/components/timelines/Notifications.tsx

@@ -100,7 +100,7 @@ export default function Notifications(props: Props) {
   }, [firstItemIndex, notifications, setNotifications, unreads])
 
   return (
-    <section className="h-full w-full">
+    <section className="h-full timeline-wrapper">
       <div className="w-full bg-blue-950 text-blue-100 p-2 flex justify-between">
         <div className="text-lg font-bold">
           <FormattedMessage id="timeline.notifications" />
@@ -119,6 +119,7 @@ export default function Notifications(props: Props) {
           }}
           firstItemIndex={firstItemIndex}
           atTopStateChange={prependUnreads}
+          className="timeline-scrollable"
           data={notifications}
           endReached={loadMore}
           itemContent={(_, notification) => (

renderer/components/timelines/Timeline.tsx

@@ -156,7 +156,7 @@ export default function Timeline(props: Props) {
   }
 
   return (
-    <div className="flex w-full">
+    <div className="flex timeline-wrapper">
       <section className={`h-full ${timelineClass()}`}>
         <div className="w-full bg-blue-950 text-blue-100 p-2 flex justify-between">
           <div className="text-lg font-bold">