Merge pull request #82 from jaketodoroki/jakes_branch

nav bar
demonorez · Feb 9, 2023 · c6b0299 · c6b0299
2 parents 2ac9183 + f27eea9
commit c6b0299
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 20 deletions.
diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx
@@ -8,13 +8,16 @@ const NavBar = ({ user, handleLogout }) => {
     <ul>
       <li><NavLink to="/login">LOG IN</NavLink></li>
       <li><NavLink to="/signup">SIGN UP</NavLink></li>
+      {/* <li><NavLink to={'/'}>HOME</NavLink></li> */}
     </ul>
   )
 
   const protectedLinks = (
 
       <ul>
+      {/* <li><NavLink to={'/'}>HOME</NavLink></li> */}
       <li><NavLink to="/profiles">Profiles</NavLink></li>
+
       <li><NavLink to="/meals">Meals</NavLink></li> 
       <li><NavLink to="/meals/new">New Meal</NavLink></li>
       <li><NavLink to="/blogs">Blogs</NavLink></li>

diff --git a/src/components/NavBar/NavBar.module.css b/src/components/NavBar/NavBar.module.css
@@ -1,41 +1,44 @@
 .container {
-  top: 0; 
-  z-index: 1;
+  /* top: 0;  */
+  /* z-index: 1; */
   width: 100%;
-  height: 10px;
+  /* height: 10px; */
   display: flex;
   position: fixed; 
   padding: 14px 21px;
   align-items: center;
   background: white;
   border-bottom: 1px solid rgb(200, 200, 200);
-}
-
-.container img {
-  width: 50px;
+  /* min-width: 0; */
 }
 
 .container ul {
-  margin: 0;
+  margin: auto;
   width: 100%;
+  flex-wrap: wrap;
   display: flex;
   list-style: none;
   font-weight: bold;
   align-items: center;
   justify-content: flex-end;
+  margin-right: 70px;
 }
 
+
 .container li {
+  flex-shrink: 100;
   margin-left: 35px;
-  padding: 30px;
+  padding: 3px;
   text-align: right;
+  min-width: fit-content;
 }
 
-@media only screen and (max-width: 414px) {
+@media only screen and (max-width: 800px) {
   .container ul {
-    padding-left: 0px;
+    padding-left: 10px;
   }
   .container li {
     font-size: 15px;
   }
 }
+
diff --git a/src/pages/Profiles/Profiles.module.css b/src/pages/Profiles/Profiles.module.css
@@ -1,26 +1,23 @@
 .container {
-  /* padding: px; */
+  padding: 21px;
   height: 100%;
-  display: flex;
+  display: grid;
   overflow: scroll;
   align-items: center;
   flex-direction: column;
   flex-wrap: wrap;
   background-color: var(--card-background);
   justify-content: space-around;
-}
-
-main {
+  grid-template-columns: repeat(1, 1fr);
 }
 
 .container article, .container > section {
-  width: 50%;
-  height: 100px;
+  width: 100%;
+  height: 20%;
   padding: 60px;
-
   display: flex;
   max-width: 700px;
-  /* flex-direction: column; */
+  flex-direction: column;
   flex-wrap: wrap;
 }