4-Fix-Profile-Logo-Adjusted-Window

eliis-front-end/src/components/navbar/Navbar/Profile/personal.css

@@ -21,19 +21,52 @@
 /* For text beside profile logo */
 .font-semibold {
     font-weight: 600;
-    border-left: 1px solid #ccc;
 }
 /* For text style */
 .text-2xl {
     font-size: 1.5rem;
     line-height: 2rem;
 }
-/* Should be for color of the second row */
-.text-secondary {
-    background-color: rgb(166, 194, 100);
+/* Positioning of name and company name */
+.custom-measurements-profile-logo {
+  width: 5.964rem;
+  height: 1.5rem;
+  margin-bottom: 1.3rem;
 }
+/* Should be for color of the second row */
+.text-sm.text-secondary {
+    --tw-text-opacity: 1;
+    color: rgb(166 194 100 / var(--tw-text-opacity)) !important;
+  }
 /* Styling for company name */
 .text-sm {
     font-size: 0.875rem;
     line-height: 1.25rem;
 }
+
+@media (min-width: 768px) {
+    .md\:grid-cols-\[2fr_1fr\] {
+      grid-template-columns: 2fr 1fr;
+    }
+  }
+
+  .grid {
+    display: grid;
+  }
+  .gap-2{
+    gap: 0.5rem;
+  }
+  .grid-rows-1 {
+    grid-template-columns: repeat(1, minmax(0,1fr));
+  }
+  .place-items-end {
+    place-items: end;
+  }
+  @media (min-width: 768px) {
+    .md\:flex {
+      display: flex;
+    }
+  }
+  .flex-col {
+    flex-direction:column;
+  }

eliis-front-end/src/components/navbar/Navbar/Profile/personal.js

@@ -3,28 +3,28 @@ import './personal.css';
 
 const Personal = () => {
   return (
-    <>
-      <div>
+    <div className='grid grid-cols-1 gap-2 md:grid-cols-[2fr_1fr] place-items-end'>
+      <div className='flex-col flex hidden custom-measurements-profile-logo'>
         <span className="font-semibold">Eliis Õpetaja</span>
         <span className="text-sm text-secondary">ELIIS Lasteaed</span>
       </div>
       <div className="rounded-full p-2 military-color text-2xl flex">
-      <svg
-        className="mdi-icon e3-img-overlay"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        {/* Background rectangle */}
-        <circle cx="12" cy="12" r="11" fill="#fff" stroke="#f79e80" strokeWidth=".1rem" />
+        <svg
+          className="mdi-icon e3-img-overlay"
+          width="24"
+          height="24"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          {/* Background rectangle */}
+          <circle cx="12" cy="12" r="11" fill="#fff" stroke="#f79e80" strokeWidth=".1rem" />
 
-        {/* Checkmark */}
-        <polyline points="7,9 12,14 17,9" stroke="#f79e80" strokeWidth="2" fill="none" />
-      </svg>
-      <span className="ml-2">EÕ</span>
+          {/* Checkmark */}
+          <polyline points="7,9 12,14 17,9" stroke="#f79e80" strokeWidth="2" fill="none" />
+        </svg>
+        <span className="ml-2">EÕ</span>
+      </div>
     </div>
-    </>
   );
 }
 

eliis-front-end/src/components/navbar/Navbar/navbarItems.css

@@ -0,0 +1,14 @@
+.border-right {
+    border-right: 10px solid #ccc;
+}
+
+.rounded-full {
+    border-radius: 9999px;
+}
+
+/* Styling for images inside button and button it self */
+.menu-icon-container {
+    width: 32px;
+    height: 32px;
+    background: linear-gradient(#f79e80,#e58565);
+}

eliis-front-end/src/components/navbar/Navbar/navbarItems.js

@@ -1,58 +1,41 @@
 import React from 'react';
 import Icon from '@mdi/react';
 import { NavLink } from 'react-router-dom';
-import { mdiBellCircle, mdiMessageText, mdiBullhorn, mdiCalendarBlank, mdiCloud } from '@mdi/js';
+import { mdiBell, mdiBullhorn, mdiMessageText, mdiCalendarOutline, mdiCloud } from '@mdi/js';
 import Col from 'react-bootstrap/Col';
+import './navbarItems.css';
+
+const IconButton = ({ to, path, badge, label, className }) => (
+  <NavLink to={to} className={`mx-2 position-relative ${className}`}>
+    <div style={{ width: '2.7rem', height: '2.7rem', borderRadius: '50%', background: 'linear-gradient(#f79e80, #e58565)', display: 'flex', justifyContent: 'center', alignItems: 'center', marginRight: '0.125rem' }}>
+      <Icon path={path} size={1.5} color="white" />
+    </div>
+    {badge > 0 && (
+      <span className="badge bg-success position-absolute top-0 start-100 translate-middle p-1">
+        {badge}
+      </span>
+    )}
+  </NavLink>
+);
 
 const NavItems = () => {
   const icons = [
-    { 
-      path: mdiBellCircle, 
-      label: 'Notifications', 
-      to: '/notifications',
-      badge: 5 // Add badge count for this icon
-    },
-    { 
-      path: mdiBullhorn, 
-      label: 'Announcements', 
-      to: '/announcements',
-    },
-    { 
-      path: mdiMessageText, 
-      label: 'Messages', 
-      to: '/messages',
-      badge: 23 // Add badge count for this icon
-    },
-    { 
-      path: mdiCalendarBlank, 
-      label: 'Calendar', 
-      to: '/calendar',
-      badge: 2 // Add badge count for this icon
-    },
-    { 
-      path: mdiCloud, 
-      label: 'Cloud', 
-      to: '/cloud',
-      badge: 0 // Add badge count for this icon
-    },
+    { path: mdiBell, label: 'Notifications', to: '/notifications', badge: 5 },
+    { path: mdiBullhorn, label: 'Announcements', to: '/announcements'},
+    { path: mdiMessageText, label: 'Messages', to: '/messages', badge: 23 },
+    { path: mdiCalendarOutline, label: 'Calendar', to: '/calendar', badge: 2 },
+    { path: mdiCloud, label: 'Cloud', to: '/cloud', badge: 0 },
   ];
 
   return (
     <Col xs={6} md={8}>
-      <div className="d-flex justify-content-end">
+      <div className="d-flex justify-content-end" style={{ borderRight: '0.063rem solid #ccc', marginRight: '0.625rem' }}>
         {icons.map((icon, index) => (
-          <NavLink key={index} to={icon.to} className="mx-2 position-relative">
-            <Icon path={icon.path} size={1.5} color="rgb(247 158 128)" />
-            {icon.badge > 0 && (
-              <span className="badge bg-success position-absolute top-0 start-100 translate-middle p-1">
-                {icon.badge}
-              </span>
-            )}
-          </NavLink>
+          <IconButton key={index} {...icon} />
         ))}
       </div>
     </Col>
   );
-}
+};
 
 export default NavItems;