made some of the initial navbar, still needs some work

SHPE-UTDallas · Nov 10, 2020 · 18c70c9 · 18c70c9
1 parent 9a30f04
commit 18c70c9
Showing 1 changed file with 81 additions and 14 deletions.
diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -15,20 +15,87 @@ const Layout = ({ children, title = 'This is the default title' }: Props) => (
       <meta name="viewport" content="initial-scale=1.0, width=device-width" />
     </Head>
     <header>
-      <nav>
-        <Link href="/">
-          <a>Home</a>
-        </Link>{' '}
-        |{' '}
-        <Link href="/about">
-          <a>About</a>
-        </Link>{' '}
-        |{' '}
-        <Link href="/users">
-          <a>Users List</a>
-        </Link>{' '}
-        | <a href="/api/users">Users API</a>
-      </nav>
+    <nav className="navbar" role="navigation" aria-label="main navigation">
+  <div className="navbar-brand">
+    <a className="navbar-item" href="https://bulma.io">
+      <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28"/>
+    </a>
+
+    {
+    //TODO ADD HAMBURGER HERE 
+    }
+  </div>
+
+  <div id="navbar" className="navbar-menu">
+    <div className="navbar-start">
+      <a className="navbar-item" href="/">
+        Home
+      </a>
+
+      <a className="navbar-item" href="/about">
+        About
+      </a>
+
+      <div className="navbar-item has-dropdown is-hoverable">
+        <a className="navbar-link">
+          Events
+        </a>
+
+        <div className="navbar-dropdown">
+          <a className="navbar-item">
+            Calendar
+          </a>
+          <hr className="navbar-divider"/>
+          <a className="navbar-item">
+            General Meetings
+          </a>
+          <a className="navbar-item">
+            Conferences
+          </a>
+        </div>
+      </div>
+
+      <a className="navbar-item">
+        Membership
+      </a>
+
+      <div className="navbar-item has-dropdown is-hoverable">
+        <a className="navbar-link">
+          Get Involved
+        </a>
+
+        <div className="navbar-dropdown">
+          <a className="navbar-item">
+            Mentor Program
+          </a>
+          <a className="navbar-item">
+            SHPE Jr.
+          </a>
+          <a className="navbar-item">
+            Technology Team
+          </a>
+        </div>
+      </div>
+
+      <a className="navbar-item" href="/users">
+        Users List
+      </a>
+    </div>
+
+    <div className="navbar-end">
+      <div className="navbar-item">
+        <div className="buttons">
+          <a className="button is-primary">
+            <strong>Sign up</strong>
+          </a>
+          <a className="button is-light">
+            Log in
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</nav>
     </header>
     {children}
     <footer>