Nav Component and Hero Icons installed

client/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@heroicons/react": "^2.0.18",
     "axios": "^1.6.2",
     "normalize.css": "^8.0.1",
     "react": "^18.2.0",

client/src/assets/styles/components/Nav.scss

@@ -0,0 +1,34 @@
+.Nav {
+  padding: var(--side-spacing);
+
+  .container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row-reverse;
+  }
+
+  &__logo a {
+    display: flex;
+    flex-direction: row-reverse;
+    gap: 5px;
+    align-items: center;
+
+    h2 {
+      font-size: 1.875rem;
+      font-style: normal;
+      font-weight: 800;
+      margin: 0;
+    }
+  }
+
+  &__icons {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+  }
+
+  &__icon {
+    width: 24px;
+  }
+}

client/src/assets/styles/global/_layout.scss

@@ -0,0 +1,36 @@
+// _layout.scss
+// Classes or the layout of the app
+
+section,
+.section {
+  padding: var(--section-spacing) 0;
+}
+
+.container {
+  max-width: 700px;
+  margin: 0 auto;
+  padding: 0 var(--side-spacing);
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -var(--side-spacing);
+  gap: var(--side-spacing);
+
+  .col-1 {
+    flex: 0 1 calc(25% - var(--side-spacing) * 2);
+  }
+
+  .col-2 {
+    flex: 0 1 calc(50% - var(--side-spacing) * 2);
+  }
+
+  .col-3 {
+    flex: 0 1 calc(75% - var(--side-spacing) * 2);
+  }
+
+  .col-4 {
+    flex: 0 1 calc(100% - var(--side-spacing) * 2);
+  }
+}

client/src/assets/styles/global/global.scss

@@ -1,5 +1,6 @@
 @import "normalize.css";
 @import "typography";
+@import "layout";
 
 *,
 *::before,

client/src/components/common/nav.jsx

@@ -0,0 +1,43 @@
+import { Link } from "react-router-dom";
+import PropTypes from "prop-types";
+
+// icons
+import { UserCircleIcon } from "@heroicons/react/24/outline";
+import { BellIcon } from "@heroicons/react/24/outline";
+// logo
+import logo from "../../assets/images/logo.svg";
+// styles
+import "../../assets/styles/components/Nav.scss";
+
+export default function Nav(props) {
+  const { showIcons } = props;
+
+  return (
+    <nav className="Nav">
+      <div className="container">
+        <div className="Nav__logo">
+          <Link to="/">
+            <img src={logo} alt="logo" />
+            <h2 className="logo-text">كشافة</h2>
+          </Link>
+        </div>
+        {showIcons && (
+          <div className="Nav__icons">
+            {/* TODO: add route later */}
+            <Link to="/">
+              <UserCircleIcon className="Nav__icon" />
+            </Link>
+            {/* TODO: add route later */}
+            <Link to="/">
+              <BellIcon className="Nav__icon" />
+            </Link>
+          </div>
+        )}
+      </div>
+    </nav>
+  );
+}
+
+Nav.propTypes = {
+  showIcons: PropTypes.bool.isRequired,
+};

client/src/components/landingpage/LandingPage.jsx

@@ -0,0 +1,9 @@
+import Nav from "../common/nav";
+
+export default function LandingPage() {
+  return (
+    <>
+      <Nav showIcons={true} />
+    </>
+  );
+}

client/src/components/testing/testLayout.jsx

@@ -0,0 +1,41 @@
+export default function TestLayout() {
+  return (
+    <>
+      <div className="container">Test Layout</div>
+      <section style={{ textAlign: "center" }}>
+        <div className="container">
+          <div className="row">
+            <div className="col-2" style={{ background: "red" }}>
+              Test Layout
+            </div>
+            <div className="col-2" style={{ background: "magenta" }}>
+              Test Layout
+            </div>
+          </div>
+          <div className="row">
+            <div className="col-3" style={{ background: "blue" }}>
+              Test Layout
+            </div>
+            <div className="col-3" style={{ background: "yellow" }}>
+              Test Layout
+            </div>
+            <div className="col-3" style={{ background: "red" }}>
+              Test Layout
+            </div>
+          </div>
+
+          <div className="row">
+            <div className="col-4">Test Layout</div>
+            <div className="col-4">Test Layout</div>
+            <div className="col-4">Test Layout</div>
+          </div>
+          <div className="row">
+            <div className="col-2">Test Layout</div>
+            <div className="col-2">Test Layout</div>
+            <div className="col-4">Test Layout</div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}

client/src/routes.jsx

@@ -7,19 +7,22 @@ import {
 } from "react-router-dom";
 
 // Import modules/pages under this line
+import LandingPage from "./components/landingpage/LandingPage";
 
 // Import Testing Routes here
 import TestTypo from "./components/testing/testTypo";
+import TestLayout from "./components/testing/testLayout";
 
 function Routes() {
   return (
     <Router>
       <Switch>
-        <Route exact path="/" element={<h1>Landing</h1>} />
+        <Route exact path="/" element={<LandingPage />} />
 
         {/* Testing Routes */}
         {/* FIXME: Delete test routes Later */}
-        <Route path="/testTypo" element={<TestTypo />} />
+        <Route path="/test/typo" element={<TestTypo />} />
+        <Route path="/test/layout" element={<TestLayout />} />
 
         {/* Not Found */}
         <Route path="*" element={<h1>Not Found</h1>} />

client/src/theme.scss

@@ -107,4 +107,10 @@
   //----------------------------//
   --font-primary: "Noto Kufi Arabic", sans-serif;
   --font-base-size: 16px;
+
+  //----------------------------//
+  // Spacing
+  //----------------------------//
+  --side-spacing: 1.25rem;
+  --section-spacing: 2.5rem;
 }