feat: add text on main page

src/Components/Home/Placeholders.js

@@ -6,7 +6,7 @@ import { Skeleton } from 'primereact/skeleton'
 function Placeholder({ list }) {
   return (
     <>
-      <Skeleton shape="rectangle" height="3.2rem" className="mb-4" />
+      <Skeleton shape="rectangle" height="4.5rem" className="mb-4" />
       <div className="flex flex-wrap justify-content-center">
         {list.map((user, key) => {
           return (

src/Components/Navbar.css

@@ -2,6 +2,44 @@
   display: none !important;
 }
 
+.p-menubar-root-list {
+  display: flex;
+  justify-content: center;
+}
+
+.p-menubar {
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.p-menubar-end {
+  margin-left: 12rem !important;
+}
+
+@media screen and (max-width: 550px) {
+  .p-menubar-end {
+    margin-left: auto !important;
+  }
+}
+
+@media screen and (max-width: 360px) {
+  .p-menubar-start {
+    width: 60% !important;
+  }
+}
+
+.linkfree-icon {
+  background-image: url('../images/linkfree.ico');
+  width: 2rem;
+  height: 2rem;
+  background-size: 2rem 2rem;
+}
+
+.p-menuitem-text {
+  font-weight: 600;
+  font-size: 20px;
+}
+
 @media screen and (max-width: 380px) {
   .p-menubar-end {
     font-size: 12px;

src/Components/Navbar.js

@@ -12,6 +12,7 @@ import GetIcons from './Icons/GetIcons'
 
 function Navbar({ items, start, end }) {
   const [version, setVersion] = useState('')
+  const [loading, setLoading] = useState(true) // Added to prevent items shifting in the page before loading
 
   useEffect(() => {
     fetch('/app.json')
@@ -21,9 +22,10 @@ function Navbar({ items, start, end }) {
         console.log('Navbar useEffect', error)
         alert('An error occurred, please try again later.')
       })
+      .finally(() => setLoading(false))
   }, [])
 
-  if (!end) {
+  if (!end && !loading) {
     end = (
       <div className="flex justify-content-center align-items-center pr-2">
         <Link
@@ -40,14 +42,17 @@ function Navbar({ items, start, end }) {
     )
   }
 
-  return (
-    <Menubar
-      model={items}
-      start={start}
-      end={end}
-      className="mb-4 flex-wrap justify-content-center"
-    />
-  )
+  if (!items) {
+    items = [
+      {
+        label: 'LinkFree',
+        icon: 'linkfree-icon',
+        url: '/',
+      },
+    ]
+  }
+
+  return <Menubar model={items} start={start} end={end} className="mb-4" />
 }
 
 Navbar.propTypes = {

src/Components/UserProfile/User.js

@@ -31,12 +31,18 @@ function User({ singleUser }) {
     <>
       {!singleUser && (
         <Navbar
-          start={
-            <Link to="/" aria-label="Go back to Home">
-              <GetIcons iconName="arrowLeft" size={20} />
-            </Link>
-          }
-        />
+        start={
+          <Link
+            to="/"
+            aria-label="Go back to Home"
+            style={{
+              marginRight: '13rem', // Added to center the icon & label
+            }}
+          >
+            <GetIcons iconName="arrowLeft" size={20} />
+          </Link>
+        }
+      />
       )}
       <main>
         {showProgress && <ProgressBar mode="indeterminate" />}