TC
/
WebStick


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PostEngine Pro</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" >
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
    <style>
        body{
            background-color: rgb(243, 243, 243);
            border-top: 1px solid #70aeff;
        }

        .ui.vertical.menu{
            width: calc(15em - 3px) !important;
        }

        .postengine_context{
            padding-left: calc(15em + 1px) !important;
        }
    </style>
</head>
<body>
    <div class="ui container">

    </div>
    <div id="postengine_side_menu" class="ui left fixed inverted vertical menu">
        <div class="item" style="pointer-events: none;">
          <img class="ui fluid image" src="./img/post-engine.svg">
        </div>
        <div class="item">
          <div class="header">Posts</div>
          <div class="menu">
            <a class="item active" xtab="postengine_all_post">All Posts</a>
            <a class="item" xtab="postengine_new_post">Add New</a>
            <a class="item" xtab="postengine_list_catergories">Categories</a>
          </div>
        </div>
        <div class="item">
          <div class="header">Media</div>
          <div class="menu">
            <a class="item" xtab="postengine_media_library">Library</a>
            <a class="item" xtab="postengine_media_add_new">Add New</a>
          </div>
        </div>
        <div class="item">
          <div class="header">Pages</div>
          <div class="menu">
            <a class="item" xtab="postengine_pages_all">All Pages</a>
            <a class="item" xtab="postengine_pages_add_new">Add New</a>
          </div>
        </div>
        <div class="item">
          <div class="header">Settings</div>
          <div class="menu">
            <a class="item" xtab="postengine_settings_general">General</a>
            <a class="item" xtab="postengine_settings_permalinks">Permalinks</a>
          </div>
        </div>
    </div>
    <!-- Function Tabs -->
    <div id="postengine_all_post" class="postengine_context"></div>
    <div id="postengine_new_post" class="postengine_context" style="display:none;"></div>
    <div id="postengine_list_catergories" class="postengine_context" style="display:none;"></div>
    <div id="postengine_media_library" class="postengine_context" style="display:none;"></div>
    <div id="postengine_media_add_new" class="postengine_context" style="display:none;"></div>
    <div id="postengine_pages_all" class="postengine_context" style="display:none;"></div>
    <div id="postengine_pages_add_new" class="postengine_context" style="display:none;"></div>
    <div id="postengine_settings_general" class="postengine_context" style="display:none;"></div>
    <div id="postengine_settings_permalinks" class="postengine_context" style="display:none;"></div>

    <script>
        // Add event listener to menu items with target attribute
        $("#postengine_side_menu .item[xtab]").on("click", function() {
            var targetId = $(this).attr("xtab");
            $(".postengine_context").hide();
            $("#postengine_side_menu .item.active").removeClass("active");
            $(this).addClass("active");
            $("#" + targetId).show();
        });

        //Load all the elements
        $("#postengine_all_post").load("posteng/all.html");
    </script>
</body>
</html>