Frontend-Bootcamp-2022 · github-classroom · Jul 3, 2022 · Jul 5, 2022 · Jul 5, 2022 · Jul 5, 2022
diff --git a/.github/.keep b/.github/.keep
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "react-dashboard",
+  "name": "groupe-navbarup",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -8,6 +8,8 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.4.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

diff --git a/public/index.html b/public/index.html
@@ -1,16 +1,44 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
 
-<head>
-  <meta charset="utf-8" />
-  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
 
-  <title>React Dashboard</title>
-</head>
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
 
-<body>
-  <div id="root"></div>
-</body>
-
-</html>
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,19 @@
+
+*{
+    text-decoration: none;
+    margin: 0; 
+    padding: 0;
+    font-family: 'Montserrat', sans-serif;
+}
+body{
+    height: 100%;
+    width: 100%;
+}
+.container{
+    display: flex;
+}
+main{
+    height: 1000px;
+    width: 100%;
+}
+
diff --git a/src/App.js b/src/App.js
@@ -1,7 +1,17 @@
+
+import Sidebar from "./components/Sidebar/Sidebar";
+import "./App.css"
+import Navbar from "./components/Navbar/Navbar";
 const App = () => {
   return (
-    <h1>React Dashboard</h1>
-  );
+    <div className="container">
+      <nav>
+        <Sidebar />
+      </nav>
+      <main>
+        <Navbar />
+      </main>
+    </div>
+  )
 }
-
 export default App;
diff --git a/src/Images/messageIcon.svg b/src/Images/messageIcon.svg
diff --git a/src/Images/notification.svg b/src/Images/notification.svg
diff --git a/src/Images/profileImage.png b/src/Images/profileImage.png
diff --git a/src/Images/search.svg b/src/Images/search.svg
diff --git a/src/Images/settingsIcon.svg b/src/Images/settingsIcon.svg
diff --git a/src/components/Button.css b/src/components/Button.css
@@ -0,0 +1,47 @@
+
+:root {
+    --primary: #3acbf7;
+
+}
+
+.btn {
+    padding: 8px 20px;
+    border-radius: 4px;
+    outline: none;
+    cursor: pointer;
+}
+
+.btn:hover{
+    padding: 8px 20px;
+    transition: all 0.3s ease-out;
+    background: #fff;
+    color: #6568f4;
+    transition: 250ms;
+}
+
+.btn--primary{
+    background-color: var(--primary);
+}
+
+.btn--outline{
+    background-color: transparent;
+    color: #fff;
+    padding: 8px 20px;
+    border-radius: 4px;
+    border: 1px solid var(--primary);
+    transition: all 0.3s ease-out;
+}
+
+.btn--medium{
+    padding: 8px 20px;
+    border-radius: 4px;
+    font-size: 18px;
+    color: #fff;
+}
+
+.btn--large{
+    padding: 12px 26px;
+    border-radius: 4px;
+    font-size: 20px;
+    color: #fff;
+}
diff --git a/src/components/Button.js b/src/components/Button.js
@@ -0,0 +1,33 @@
+
+import React from "react";
+import './Button.css'
+
+const STYLES = [
+    'btn--primary', 
+    'btn--outline'
+]
+
+const SİZES = [
+    'btn--medium',
+    'btn--large'
+]
+
+export const Button = ({
+    children,
+    type,
+    onClick,
+    buttonStyle,
+    ButtonSize,
+}) => {
+
+    const checkButtonStyle = STYLES.includes(buttonStyle) ? buttonStyle : STYLES[0]
+
+    const checkButtonSize = SİZES.includes(ButtonSize) ? ButtonSize : SİZES[0]
+
+    return (
+        <button className={"btn ${checkButtonStyle} ${checkButtonSize}"} onClick={onClick} 
+        type={type}>
+            {children}
+            </button>
+    )
+}
diff --git a/src/components/Navbar/MenuItems.js b/src/components/Navbar/MenuItems.js
@@ -0,0 +1,29 @@
+
+import messageIcon from "../../Images/messageIcon.svg"
+import notification from "../../Images/notification.svg"
+import settingsIcon from "../../Images/settingsIcon.svg"
+
+
+export const MenuItems = [
+    {
+
+        title: 'Home',
+        url: '#',
+        cName: 'nav-links',
+        iconPath: messageIcon
+    },
+    {
+        title: 'Services',
+        url: '#',
+        cName: 'nav-links',
+        iconPath: notification
+
+    },
+    {
+        title: 'Products',
+        url: '#',
+        cName: 'nav-links',
+        iconPath: settingsIcon
+
+    }
+]