Latest Commit

src/App.js

@@ -4,26 +4,42 @@ import "./css/App.css";
 import Content from "./components/Content.js";
 import Navbar from "./components/Navbar.js";
 import ContentHeader from "./components/ContentHeader.js";
-import Attach from './images/attach.png';
-import Bold from './images/bold.png';
-import Italic from './images/italic.png';
-import StrikeThrough from './images/strikethrough.png';
-import Link from './images/link.png';
-import OrderList from './images/orderlist.png';
-import List from './images/list.png';
-import Type from './images/type.png';
-import At from './images/at.png';
-import Emoji from './images/smile.png';
-import Status from './components/Status.js'
+import Attach from "./images/attach.png";
+import Bold from "./images/bold.png";
+import Italic from "./images/italic.png";
+import StrikeThrough from "./images/strikethrough.png";
+import Link from "./images/link.png";
+import OrderList from "./images/orderlist.png";
+import List from "./images/list.png";
+import Type from "./images/type.png";
+import At from "./images/at.png";
+import Emoji from "./images/smile.png";
+import Status from "./components/Status.js";
+import optionsButton from "./images/options.png";
 
 class App extends Component {
+  state = {
+    showComponent: true
+  };
+  displayNavbar = () => {
+    if (this.state.showComponent) {
+      this.setState({
+        showComponent: false
+      });
+    } else {
+      this.setState({
+        showComponent: true
+      });
+    }
+  };
+
   render() {
     return (
       <div className="container">
         <nav className="navContainer">
-          <Navbar>
+        <input className="optionsButton" type="image" src={optionsButton} alt="Options" onClick={this.displayNavbar} />
+          {this.state.showComponent ? <Navbar /> : null}
             <Status/>
-          </Navbar>
         </nav>
         <br />
         <div className="content-container">

src/components/Content.js

@@ -62,16 +62,17 @@ class Content extends Component {
                     </div>
                     <br />
                     <div className="imageRows">
-                        <img src={Attach} alt="Attach" />
-                        <img src={Bold} alt="Bold" />
-                        <img src={Italic} alt="Italic" />
-                        <img src={StrikeThrough} alt="Strike" />
-                        <img src={Link} alt="Link" />
-                        <img src={OrderList} alt="Order List" />
-                        <img src={List} alt="List" />
-                        <img src={Type} alt="Type" />
-                        <img src={At} alt="At" />
-                        <img src={Emoji} alt="Emoji" />
+                        <button><img src={Attach} alt="Attach" /></button>
+                        <button><img src={Bold} alt="Bold" /></button>
+                        <button><img src={Italic} alt="Italic" /></button>
+                        <button><img src={StrikeThrough} alt="Strike" /></button>
+                        <button><img src={Link} alt="Link" /></button>
+                        <button><img src={OrderList} alt="Order List" /></button>
+                        <button><img src={List} alt="List" /></button>
+                        <button><img src={Type} alt="Type" /></button>
+                        <button><img src={At} alt="At" /></button>
+                        <button><img src={Emoji} alt="Emoji" /></button>
+
                     </div>
                 </div>
             </div>

src/components/ContentHeader.js

@@ -16,18 +16,18 @@ function ContentHeader() {
       <div className="headerSection">
         <h1>Header</h1>
         <div className="infoImages">
-          <img src={Star} alt="Star" />
-          <img src={User} alt="User" />
-          <img src={Pin} alt="Pin" />
+          <button><img src={Star} alt="Star" /></button>
+          <button><img src={User} alt="User" /></button>
+          <button><img src={Pin} alt="Pin" /></button>
         </div>
       </div>
       <div className="headerImages">
-        <img src={Phone} alt="Phone" />
-        <img src={Information} alt="Info" />
-        <img src={Settings} alt="Settings" />
-        <img src={At} alt="At" />
-        <img src={Star} alt="Star" />
-        <img src={Dots} alt="Dots" />
+        <button><img src={Phone} alt="Phone" /></button>
+        <button><img src={Information} alt="Info" /></button>
+        <button><img src={Settings} alt="Settings" /></button>
+        <button><img src={At} alt="At" /></button>
+        <button> <img src={Star} alt="Star" /></button>
+        <button><img src={Dots} alt="Dots" /></button>
       </div>
     </div>
   );

src/components/Navbar.js

@@ -3,8 +3,9 @@ import Status from "./Status";
 import JumpTo from "./JumpTo";
 import { Link, BrowserRouter } from "react-router-dom";
 import "../css/Navbar.css";
-import Circle from '../images/circle.png';
-import StatusPic from '../images/status.png';
+import Circle from "../images/circle.png";
+import StatusPic from "../images/status.png";
+import SlackPic from "../images/slackimage.png";
 
 export default class Navbar extends Component {
   state = {
@@ -14,28 +15,44 @@ export default class Navbar extends Component {
   render() {
     return (
       <div className="navBar">
-        <Status userName={this.state.username} />
+        <div className="slack">
+          <img src={SlackPic} alt="Slack Logo" />
+          <Status userName={this.state.username} />
+        </div>
         <JumpTo />
         <nav>
           <div className="directory">
-              <h4>Channels</h4>
-              <BrowserRouter>
-                  {" "}
-                  <Link className="links" to="./DevelopmentChannel">#Development</Link>{" "}
-                  {" "}
-                  <Link className="links" to="./RandomChannel">#Random</Link>{" "}
-                  {" "}
-                  <Link className="links" to="./GeneralChannel">#General</Link>{" "}
-              </BrowserRouter>
-              <h4>Direct messages</h4>
-              <BrowserRouter>
-                  {" "}
-                  <Link className="links" to="./DmSarah"><img src={StatusPic} alt="Status"/> Sarah Weeks</Link>{" "}
-                  {" "}
-                  <Link className="links" to="./DmWill"><img src={StatusPic} alt="Status"/> Will Robinson</Link>{" "}
-                  {" "}
-                  <Link className="links" to="./DmDanny"><img src={StatusPic} alt="Status"/> Danny Sutcliffe</Link>{" "}
-              </BrowserRouter>
+            <h4>Channels</h4>
+            <div className="directoryList">
+            <BrowserRouter>
+              {" "}
+              <Link className="links" to="./DevelopmentChannel">
+                #Development
+              </Link>{" "}
+              <Link className="links" to="./RandomChannel">
+                #Random
+              </Link>{" "}
+              <Link className="links" to="./GeneralChannel">
+                #General
+              </Link>{" "}
+            </BrowserRouter>
+            </div>
+            <h4>Direct messages</h4>
+            <div className="directoryList">
+            <BrowserRouter>
+              {" "}
+              <Link className="links" to="./DmSarah">
+                <img src={StatusPic} alt="Status" /> Sarah Weeks
+              </Link>{" "}
+              <Link className="links" to="./DmWill">
+                <img src={StatusPic} alt="Status" /> Will Robinson
+              </Link>{" "}
+              <Link className="links" to="./DmDanny">
+                <img src={StatusPic} alt="Status" /> Danny Sutcliffe
+              </Link>{" "}
+            </BrowserRouter>
+            </div>
+
           </div>
         </nav>
       </div>

src/css/Content.css

@@ -30,7 +30,6 @@
     display: flex;
     flex-direction: column;
     justify-items: center;
-    /* align-content: flex-end; */
     padding: 20px;
     margin: 10px;
     border: 2px solid grey;
@@ -48,7 +47,7 @@
     display: flex;
     justify-content: space-around;
     align-items: center;
-    width: 80%;
+    width: 100%;
 }
 
 img{
@@ -57,8 +56,29 @@ img{
     transition: background-color;
 }
 
-img :hover{
-    background-color: lightgrey;
+.inputButton{
+    width: 90px;
+    height: 50px;
+    box-shadow: darkgray;
+}
+
+.inputButton :hover{
+    background-color: darkgray;
+}
+
+button{
+    display: flex;
+    width: 8%;
+    height: 40px;
+    border: none;
+    background-color: whitesmoke;
+}
+
+button :hover{
+    background-color:grey;
+    opacity: 0.7;
+    height: 25px;
+    width: 25px;
 }
 
 .username{
@@ -73,6 +93,7 @@ img :hover{
 @media all and (max-width:1000px) {
     .content-container{
         display: flex;
+        /* width: 80%; */
     }
 }
 

src/css/ContentHeader.css

@@ -17,6 +17,7 @@
     background-color: whitesmoke;
     border: grey 0.5px solid;
     margin-top: 1px;
+    width: 100%;
 }
 
 .infoImages {
@@ -33,9 +34,14 @@
     width: 30%;
 }
 
+button{
+    height: 30px;
+    width: 30px;
+}
+
 @media all and (max-width: 1000px) {
     .contentHeader{
-        width: 80%;
+        /* width: 80%; */
     }
     h1{
         font-size: 20px;

src/css/Navbar.css

@@ -17,24 +17,50 @@
   padding: 12px;
 }
 
-.directory {
+.directory, .directoryList {
   display: flex;
   flex-direction: column;
 }
 
+.directoryList :hover{
+    color: darkgray;
+}
+
 .links {
   text-decoration: none;
   color: whitesmoke;
 }
 
+.slack{
+    display: flex;
+    align-items: baseline;
+}
+
+.slack > img{
+    height: 90px;
+    width: 90px;
+}
+
 img {
   width: 20px;
   height: 17px;
 }
 
+.optionsButton{
+    display: none;
+}
+
 @media all and (max-width: 1000px) {
   .navBar {
     font-size: 9px;
+    height: 110vh;
+  }
+  .optionsButton{
+      display: none;
+  }
+  .slack > img{
+      width: 40px;
+      height: 40px;
   }
 }
 
@@ -46,4 +72,8 @@ img {
         width: 14px;
         height: 13px;
     }
+    .optionsButton{
+        display: initial;
+        width: 20px;
+    }
 }