Solved: PHP session status change the content of another frame

I have my index page a frameset as follow:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>

</HEAD>
<FRAMESET cols="10%, 90%">
  <FRAMESET rows="10%, "90%">
      <FRAME name="status" id="status" src="no-status.html" scrolling="no" noresize="noresize" frameborder="0">
      <FRAME  name="menu" id="menu" src="no-menu.html"  scrolling="no" noresize="noresize" frameborder="0">
  </FRAMESET>
  <FRAMESET rows="20%, "80%">
      <FRAME name="logo" id="logo" src="logo.php"  scrolling="no" noresize="noresize" frameborder="0">
      <FRAME  name="main" id="main" src="login.php"  scrolling="yes" noresize="noresize" frameborder="0">
  </FRAMESET>
  <NOFRAMES>
      Sorry, your browser does not handle frames!
  </NOFRAMES>
</FRAMESET>
</HTML>

Open in new window

In the "main" frame I run a login php page which logs the user in.
I understood from the php documentation that once a user is logging in and execute session_start() a user session is created which can keep on going.
Now in the other frames I want to change the content of these frames once the user is logged in, I am able to do this by keeping the the username once he logged in a special table in the postgres db and create different pages for the other frames once the user is logged in, but that is a bit too much data transfer to keep reloading new pages for every user who logs in, plus with much pages to be created graphics won't be rendered identically.
I want instead to create one page for every frame which has everything these are only shown once the user is logged in, for example, I have the page below, where it includes a banner and a menu, and I want to show the menu only if the user is logged, how can I do this?
Here is the page:

<?php

?>
<html>
    <head>
        <link rel="stylesheet" href="css/jquery.ui.all.css">
        <link rel="stylesheet" href="css/ribbon.css">
        <link rel="stylesheet" href="css/demos.css">
        <style>
           #toolbar {
                        padding: 4px;
                        background: #FFFFFF;
                        display: inline-block;
                }
                /* support: IE7 */
            *+html #toolbar {
                        display: inline;
                }
            .ui-menu {
                      width: 150px;
                      background: #FFFFFF;
                     }
        </style>
        <meta charset="utf-8">
                <script src="js/jquery-1.10.1.min.js"></script>
                <script src="js/jquery-ui-1.10.3.custom.min.js"></script>
                <script>
                 $(function() {
                  $( "#logout" ).button({
                   text: false,
                   icons: {
                     primary: "ui-icon-key"
                     }
                    });
                   $( "#settings" ).button({
                   text: false,
                   icons: {
                     primary: "ui-icon-gear",
                     secondary: "ui-icon-triangle-1-s"
                     }
                     })
                     .click(function() {
                      var menu = $( this ).parent().next().show().position({
                      my: "left top",
                      at: "left bottom",
                      of: this
                      });
                      $( document ).on( "click", function() {
                      menu.hide();
                      });
                      return false;
                      })
                      .parent()
                        .buttonset()
                          .next()
                           .hide()
                           .menu();
                      $("menu").mouseout( function(){
                        $("menu").hide();
                      });
                 });
                </script>



 </head>
 <body bgcolor="white">
<div id="header">
<div class="ribbon"><div class="ribbon-stitches-top"></div>
<strong class="ribbon-content">Welcome</strong>
<div class="ribbon-stitches-bottom"></div></div>
<div id="menu"  style="text-align: right">
<div id="toolbar" class="ui-widget-header ui-corner-all">
<button id="logout">Logout</button>
<button id="settings">Settings</button>
</div>
  <ul id="menu" >
    <li><a href="#">Open...</a></li>
    <li><a href="#">Save</a></li>
    <li><a href="#">Delete</a></li>
  </ul>
</div>
</div>
 </body>
</html>

Open in new window

I want also to make sure that these pages if they are requested directly from outside the frame without a user is logged he will see only the banner (even if I have more users already logged and they are seeing the full page within the frame) in other words I want to protect this page based on a user has logged or not, how can I do so?
I believe I wrote too much which made it very complicated sorry for that :-(