From 9e13d450a234ae0e61c808056f8f68a1a578b419 Mon Sep 17 00:00:00 2001
From: Ludovic DECHAMBOUX <ludovic.dechamboux@businessdecision.com>
Date: Thu, 19 May 2022 17:07:51 +0200
Subject: [PATCH] add nav style

---
 .idea/.gitignore                             |  8 +++
 .idea/Forum-Frontend-Web.iml                 |  8 +++
 .idea/inspectionProfiles/Project_Default.xml |  6 ++
 .idea/modules.xml                            |  8 +++
 .idea/vcs.xml                                |  6 ++
 pages/index.js                               |  6 +-
 styles/Home.module.css                       |  1 +
 styles/globals.css                           | 66 ++++++++++++++++----
 8 files changed, 96 insertions(+), 13 deletions(-)
 create mode 100644 .idea/.gitignore
 create mode 100644 .idea/Forum-Frontend-Web.iml
 create mode 100644 .idea/inspectionProfiles/Project_Default.xml
 create mode 100644 .idea/modules.xml
 create mode 100644 .idea/vcs.xml

diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 0000000..73f69e0
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
+# Editor-based HTTP Client requests
+/httpRequests/
diff --git a/.idea/Forum-Frontend-Web.iml b/.idea/Forum-Frontend-Web.iml
new file mode 100644
index 0000000..c956989
--- /dev/null
+++ b/.idea/Forum-Frontend-Web.iml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
new file mode 100644
index 0000000..03d9549
--- /dev/null
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..17f0c5f
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/Forum-Frontend-Web.iml" filepath="$PROJECT_DIR$/.idea/Forum-Frontend-Web.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..94a25f7
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/pages/index.js b/pages/index.js
index d6d4537..d62b217 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -12,13 +12,15 @@ export default function Home() {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       {/* //navbar */}
-      <nav>
         <div className="logo">
-          <h1>Forum</h1>
+            <h1>Forum</h1>
         </div>
+      <nav>
+
         <Link href="#about"><a>About</a></Link>
         <Link href="#topposts"><a>Organizations</a></Link>
         <Link href="#contactUs"><a>Contact Us</a></Link>
+          <div className="animation start-home"></div>
       </nav>
 
       {/* main */}
diff --git a/styles/Home.module.css b/styles/Home.module.css
index e4fc1d3..9d06616 100644
--- a/styles/Home.module.css
+++ b/styles/Home.module.css
@@ -122,3 +122,4 @@
     flex-direction: column;
   }
 }
+
diff --git a/styles/globals.css b/styles/globals.css
index a057533..f641d71 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -15,18 +15,62 @@ a {
   box-sizing: border-box;
 }
 
-nav{
-  margin: 10px auto 80px;
-  padding: 10px 0;
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
+nav {
+  margin: 27px auto 0;
+  position: relative;
+  width: 600px;
+  height: 50px;
+  background-color: #34495e;
+  border-radius: 8px;
+  font-size: 0;
 }
-
-nav a{
-  margin-left: 2rem;
+nav a {
+  line-height: 50px;
+  height: 100%;
+  font-size: 15px;
+  display: inline-block;
+  position: relative;
+  z-index: 1;
+  text-decoration: none;
+  text-transform: uppercase;
+  text-align: center;
+  color: white;
+  cursor: pointer;
+}
+nav .animation {
+  position: absolute;
+  height: 100%;
+  top: 0;
+  z-index: 0;
+  transition: all 0.5s ease 0s;
+  border-radius: 8px;
+}
+a:nth-child(1) {
+  width: 200px;
+}
+a:nth-child(2) {
+  width: 200px;
+}
+a:nth-child(3) {
+  width: 200px;
 }
 
-nav .logo{
-  margin-right:auto;
+nav .start-home,
+a:nth-child(1):hover ~ .animation {
+  width: 200px;
+  left: 0;
+  background-color: #1abc9c;
+}
+nav .start-about,
+a:nth-child(2):hover ~ .animation {
+  width: 200px;
+  left: 200px;
+  background-color: #e74c3c;
 }
+nav .start-blog,
+a:nth-child(3):hover ~ .animation {
+  width: 200px;
+  left: 400px;
+  background-color: #3498db;
+}
+