Update 2

src/App.js

@@ -87,7 +87,7 @@ class App extends React.Component {
                 <Redirect from='/home' to='/doctors' />
                 <Redirect from='/index.html' to='/doctors' /> */}
                 <Route exact path='/'>
-                  <HomePage/>
+                  <HomePage isLoggedIn={this.state.isLoggedIn}/>
                 </Route>
                 <Route path='/doctors'>
                   <DoctorsPage/>

src/components/AppointmentBlock.css

@@ -6,4 +6,12 @@
     height: 300px;
     display: flex;
     justify-content: center;
+}
+
+@media (max-width: 1050px) {
+    .AppointmentBlock {
+        margin: 0;
+        padding: 0;
+        height: fit-content;
+    }
 }

src/components/AppointmentForm.css

@@ -93,4 +93,40 @@
 .AppButton {
     max-width: 500px;
     min-width: 300px;
+}
+
+@media (max-width: 935px) {
+    .AppForm-UpperBlock {
+        flex-direction: column;
+    }
+
+    .AppForm-Container.Date, .AppForm-Container.Time {
+        margin-right: 0;
+    }
+}
+
+@media (max-width: 400px) {
+    .AppForm-TimeSlots {
+        flex-direction: column;
+        overflow-x: hidden;
+        overflow-y: auto;
+        height: 400px;
+    }
+
+    .AppForm-Container.Time {
+        width: 100%;
+        max-width: 300px;
+    }
+
+    .TimeSlotButton {
+        margin: 5px;
+        width: 100%;
+        max-width: 200px;
+        min-width: 50px;
+    }
+
+    .AppButton {
+        width: 100%;
+        min-width: 50px;
+    }
 }

src/components/DoctorPage.css

@@ -68,4 +68,22 @@
 .Doctor-Info-Rating {
     background-color: aliceblue;
     height: 30px;
+}
+
+@media (max-width: 1050px) {
+    .Doctor-Info {
+        flex-direction: column;
+    }
+
+    .Doctor-Info-Left {
+        align-self: center;
+    }
+
+    .Doctor-Info-Right {
+        padding: 20px 0;
+    }
+
+    .Doctor-Info-type {
+        flex-direction: column;
+    }
 }

src/components/DoctorShowcase.css

@@ -44,4 +44,27 @@
 .DoctorShowcase-Type {
     font-weight: bold;
     color: steelblue;
+    font-size: 16px;
+}
+
+@media (max-width: 1024px) {
+    .DoctorShowcase {
+        max-width: 200px;
+    }
+
+    .DoctorShowcase-Img {
+        height: 200px;
+    }
+
+    .DoctorShowcase-Name {
+        font-size: 16px;
+    }
+
+    .DoctorShowcase-Type {
+        font-size: 14px;
+    }
+
+    .DoctorShowcase-extraInfo {
+        font-size: 14px;
+    }
 }

src/components/HistoryTable.css

@@ -10,6 +10,7 @@
     flex-direction: column;
     align-items: center;
     margin: 20px auto;
+    width: 100%;
 }
 
 .HistoryTable td {

src/components/MainMenu.css

@@ -40,7 +40,11 @@
     flex: 1;
 }
 
-.Menu-buttons a, .Menu-buttons button {
+.Menu-buttons-Navs {
+    display: flex;
+}
+
+.MenuButton {
     display: flex;
     text-decoration: none;
     text-align: center;
@@ -55,15 +59,15 @@
     transition: all 0.1s ease-in-out;
 }
 
-.Menu-buttons a:hover {
+.MenuButton:hover {
     border-bottom: 4px solid rgba(70, 131, 180, 0.5);
 }
 
-.Menu-buttons a:active, .Menu-buttons a.active {
+.MenuButton:active, .MenuButton.active {
     border-bottom: 4px solid steelblue;
 }
 
-@media (max-width: 425px) {
+@media (max-width: 655px) {
     .Menu-logo {
         display: none;
     }
@@ -75,9 +79,21 @@
 }
 
 .Menu-DropdownButton {
+    display: flex;
+    text-decoration: none;
+    text-align: center;
+    align-items: center;
+    padding: 0 20px;
+    white-space: nowrap;
+    background-color: transparent;
+    border: none;
+    font-size: 20px;
+    color: steelblue;
+    cursor: pointer;
+    transition: all 0.1s ease-in-out;
+
     font-family: inherit;
     margin: 0;
-    transition: all 0.1s ease-in-out;
     height: 100%;
 }
 
@@ -96,13 +112,20 @@
 }
 
 .Menu-DropdownMenu a {
+    text-decoration: none;
+    text-align: center;
+    align-items: center;
+    white-space: nowrap;
+    background-color: transparent;
+    border: none;
+    font-size: 20px;
+    cursor: pointer;
+
     /* float: none; */
     padding: 10px 10px;
     color: white;
-    text-decoration: none;
     display: block;
     transition: all 0.2s ease-in-out;
-    border: none;
 }
 
 .Menu-DropdownMenu a:hover {
@@ -119,4 +142,118 @@
 .Menu-Dropdown:hover .Menu-DropdownMenu {
     opacity: 1;
     visibility: visible;
+}
+
+#OpenMenu {
+    display: none;
+    text-decoration: none;
+    text-align: center;
+    align-items: center;
+    padding: 0 20px;
+    white-space: nowrap;
+    background-color: transparent;
+    border: none;
+    font-size: 20px;
+    color: steelblue;
+    cursor: pointer;
+    transition: all 0.1s ease-in-out;
+
+    font-family: inherit;
+    margin: 0;
+    height: 100%;
+}
+
+
+@media (max-width: 1030px) {
+    #OpenMenu {
+        display: block;
+        font-size: 18px;
+        /* background-color: aliceblue;
+        border-radius: 50px;
+        margin: 10px; */
+    }
+
+    .Main-menu {
+        justify-content: space-between;
+    }
+
+    .Menu-buttons {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        margin: 0;
+        flex: 0;
+        z-index: 1;
+        transition: none;
+    }
+
+    .Menu-buttons:hover #OpenMenu {
+        background-color: steelblue;
+        color: white;
+    }
+
+    .Menu-buttons:hover .Menu-buttons-Navs {
+        opacity: 1;
+        visibility: visible;
+    }
+
+    .Menu-buttons-Navs {
+        opacity: 0;
+        visibility: hidden;
+        display: flex;
+        flex-direction: column;
+        position: absolute;
+        margin-top: 60px;
+        border: 1px solid steelblue;
+        background-color: white;
+        transition: none;
+    }
+
+    .MenuButton, .Menu-DropdownButton {
+        min-height: 60px;
+        width: 100%;
+    }
+
+    .MenuButton:hover {
+        border-left: 6px solid rgba(70, 131, 180, 0.5);
+        border-bottom: none;
+    }
+
+    .MenuButton:active, .MenuButton.active {
+        border-left: 6px solid steelblue;
+        border-bottom: none;
+    }
+
+    .Menu-Dropdown {
+        display: flex;
+        flex-direction: column;
+        transition: none;
+    }
+
+    .Menu-DropdownButton {
+        display: none;
+    }
+
+    .Menu-DropdownMenu {
+        opacity: 1;
+        visibility: inherit;
+        position: relative;
+        background-color: steelblue;
+        box-shadow: 0 3px 3px 1px steelblue;
+        border: 1px solid steelblue;
+        transition: none;
+    }
+}
+
+@media (max-width: 768px) {
+    .MenuButton, .Menu-DropdownButton {
+        padding-top: 10px;
+        padding-bottom: 10px;
+        min-height: 0;
+        font-size: 16px;
+    }
+
+    .Menu-DropdownMenu a {
+        font-size: 16px;
+    }
 }

src/components/MainMenu.js

@@ -42,15 +42,19 @@ class MainMenu extends React.Component {
                 <div className='Main-menu'>
                     <MenuLogo />
                     <nav className='Menu-buttons'>
-                        <NavLink exact to="/" activeClassName="active">Головна сторінка</NavLink>
-                        <NavLink to="/doctors" activeClassName="active">Список лікарів</NavLink>
-                        {profileButton}
-                        <NavLink to="/contacts" activeClassName="active">Контакти</NavLink>
+                        <button id='OpenMenu'>Меню</button>
+                        <div className='Menu-buttons-Navs'>
+                            <NavLink className='MenuButton' exact to="/" activeClassName="active">Головна сторінка</NavLink>
+                            <NavLink className='MenuButton' to="/doctors" activeClassName="active">Список лікарів</NavLink>
+                            {profileButton}
+                            <NavLink className='MenuButton' to="/contacts" activeClassName="active">Контакти</NavLink>
+                        </div>
                     </nav>
                     <SearchBar />
                     <LoginControl isLoggedIn={this.props.loginControl.isLoggedIn}
                      onLogOut={this.onLogOut} />
                 </div>
+                <SearchBar mobile={true} />
             </div>
         );
     }