Merge pull request #32 from Vladislp/8-Make-Side-Navigation-Bar-Adapt…

…ive-To-Mobile-Devices 8-Make-Side-Navigation-Bar-Adaptive-To-Mobile-Devices
Vladislp · Jan 3, 2024 · 528447a · 528447a
2 parents 7b5772f + bece7af
commit 528447a
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 11 deletions.
diff --git a/eliis-front-end/src/App.css b/eliis-front-end/src/App.css
@@ -9,6 +9,35 @@
   min-height: calc(100vh - 65px);
 }
 
+
+
+@media (max-width: 800px) {
+  .fc .fc-toolbar-title {
+    font-size: 1.2rem;
+  }
+}
+
+.navbar-toggler-icon span {
+  background-color: #f79e80;
+}
+
+/* Default styling for the header */
+.header {
+  display: none;
+}
+
+/* Styling for the mobile-heading within the media query */
+@media (max-width: 800px) {
+  .mobile-heading {
+    margin: 12px;
+  }
+
+  .header {
+    display: contents;
+    margin-top: 10px; /* Move the header down */
+  }
+}
+
 .Full {
   padding: 0.75rem;
   width: 100%;
@@ -155,10 +184,37 @@
 }
 /* Positioning of name and company name */
 .custom-measurements-profile-logo {
-width: 5.964rem;
-height: 1.5rem;
-margin-bottom: 1.3rem;
+  width: 5.964rem;
+  height: 1.5rem;
+  margin-bottom: 1.3rem;
+}
+
+@media (max-width: 800px) {
+  .custom-measurements-profile-logo {
+    display: none !important;
+  }
+}
+
+@media (max-width: 800px) {
+  .navbar-items {
+    display: none;
+  }
+}
+
+@media (max-width: 800px) {
+  .Sidebar-type {
+    display: none !important;
+  }
+}
+
+@media (max-width: 800px) {
+  .logo-move-up {
+    margin-right: 10rem;
+  }
 }
+
+
+
 /* Should be for color of the second row */
 .text-sm.text-secondary {
   --tw-text-opacity: 1;
@@ -188,6 +244,27 @@ margin-bottom: 1.3rem;
 .place-items-end {
   place-items: end;
 }
+
+@media (max-width: 800px) {
+  .place-items-end {
+    margin-left: 15rem;
+    margin-top: -2.3rem;
+  }
+}
+
+@media (max-width: 800px) {
+  .navbar-toggler {
+    margin-top: -2.3rem;
+    border:#e4e4e4;
+  }
+}
+
+@media (max-width: 800px) {
+  .mdi-icon {
+    margin-right: 4rem;
+  }
+}
+
 @media (min-width: 768px) {
   .md\:flex {
     display: flex;
@@ -295,11 +372,6 @@ margin-bottom: 1.3rem;
   align-items: center;
 }
 
-.text-3xl {
-  font-size: 1.875rem;
-  line-height: 2.25rem;
-}
-
 .font-bold {
   font-weight: 700;
 }
@@ -415,6 +487,14 @@ b { /* used for event dates/times */
   padding: 3em;
 }
 
+@media (max-width: 800px) {
+  .demo-app-main {
+    padding: 1px;
+  }
+}
+
+
+
 .fc { /* the calendar root */
   max-width: 1100px;
   margin: 0 auto;

diff --git a/eliis-front-end/src/App.js b/eliis-front-end/src/App.js
@@ -33,6 +33,9 @@ function App() {
           <Navigation />
         </header>
         <main>
+          <div className='header'>
+            <h1 className='mobile-heading'>Event Calendar</h1>
+          </div>
           <div className="content">
             <Sidebar />
             <Routes>

diff --git a/eliis-front-end/src/components/event-calender/Event-Calendar.js b/eliis-front-end/src/components/event-calender/Event-Calendar.js
@@ -17,7 +17,7 @@ const typeMenu = [
 
 const EventCalendarHeader = () => {
   return (
-    <div className="flex flex-col gap-2">
+    <div className="Sidebar-type flex flex-col gap-2">
       <h1 className='text-3xl'>Event Calendar</h1>
       <h3>Types</h3>
       {typeMenu.map((item, index) => (

diff --git a/eliis-front-end/src/components/navbar/Navbar/Profile/personal.js b/eliis-front-end/src/components/navbar/Navbar/Profile/personal.js
@@ -8,7 +8,7 @@ const Personal = () => {
         <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">
+      <div className="rounded-full p-2 military-color profile-logo text-2xl flex">
         <svg
           className="mdi-icon e3-img-overlay"
           width="24"

diff --git a/eliis-front-end/src/components/navbar/Navbar/navbarItems.js b/eliis-front-end/src/components/navbar/Navbar/navbarItems.js
@@ -6,7 +6,7 @@ import Col from 'react-bootstrap/Col';
 import '../../../App.css';
 
 const IconButton = ({ to, path, badge, label, className }) => (
-  <NavLink to={to} className={`mx-2 position-relative ${className}`} aria-label={label}>
+  <NavLink to={to} className={`navbar-items mx-2 position-relative ${className}`} aria-label={label}>
     <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>