Attempting to add a modular navigation bar

2019-12-03 05:23:34 -05:00
parent 0c59c98d75
commit 029971608a
4 changed files with 34 additions and 1 deletions
--- a/etc/nginx/conf.d/cs4430.conf
+++ b/etc/nginx/conf.d/cs4430.conf
@@ -3,7 +3,7 @@ server {
    listen [::]:80;

    root /var/www/;
-    index index.html
+    index index.html;
    server_name _;

    access_log /var/log/nginx/access.log;
@@ -11,6 +11,7 @@ server {

    location / {
         try_files $uri $uri/ /index.html =404;
+         ssi on;
    }

    location ~ \.php$ {
--- a/var/www/messages.php
+++ b/var/www/messages.php
@@ -8,6 +8,7 @@
    <head>
        <title>FriendBook Messages</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+        <link rel="stylesheet" type="text/css" href="styling.css">
    </head>
    <body>
        <style>
@@ -16,6 +17,7 @@
                color: white;
            }
        </style>
+        <!--#include virtual="topNavBar.html" -->
        <?php
            try{
                echo '<pre>';
--- a/var/www/styling.css
+++ b/var/www/styling.css
@@ -0,0 +1,24 @@
+/* Add a black background color to the top navigation */
+.topnav {
+    background-color: #333;
+    overflow: hidden;
+}
+/* Style the links inside the navigation bar */
+.topnav a {
+    float: left;
+    color: #f2f2f2;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+    font-size: 17px;
+}
+/* Change the color of links on hover */
+.topnav a:hover {
+    background-color: #ddd;
+    color: black;
+}
+/* Add a color to the active/current link */
+.topnav a.active {
+    background-color: #4CAF50;
+    color: white;
+}
--- a/var/www/topNavBar.html
+++ b/var/www/topNavBar.html
@@ -0,0 +1,6 @@
+<div class="topnav">
+    <a class="active" href="#home">Home</a>
+    <a href="#news">News</a>
+    <a href="#contact">Contact</a>
+    <a href="#about">About</a>
+</div>