jube-fork/Jube.App/wwwroot/kendo/examples/appbar/position.html

<!DOCTYPE html>
<html>
<head>
    <title>Position</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div id="example">
    <div class="configurator">
        <div class="header">Configurator</div>
        <div class="box-col">
            <h4>Position Mode</h4>
            <input type="radio" id="sticky" name="positionMode" value="sticky" checked="checked">
            <label for="sticky">Sticky</label><br>
            <input type="radio" id="static" name="positionMode" value="static">
            <label for="static">Static</label>
        </div>
        <div class="box-col">
            <h4>Position</h4>
            <input type="radio" id="top" name="position" value="top" checked="checked">
            <label for="top">Top</label><br>
            <input type="radio" id="bottom" name="position" value="bottom" >
            <label for="bottom">Bottom</label>
        </div>
        <div class="box-col">
            <h4>Theme Color</h4>
            <input type="radio" id="light" name="themeColor" value="light">
            <label for="light">Light (default)</label><br>
            <input type="radio" id="dark" name="themeColor" value="dark" checked="checked">
            <label for="dark">Dark</label><br>
        </div>
    </div>
    <div class="appbar-container">
        <div id="appbar"></div>
        <div class="page-content">
            <p>
                Personal branding is the conscious and intentional effort to create and influence public perception of an individual by positioning
                them as an authority in their industry, elevating their credibility, and differentiating themselves from the competition,
                to ultimately advance their career, increase their circle of influence, and have a larger impact.
            </p>
            <p>
                The process of personal branding involves finding your uniqueness, building a reputation on the things you want to be known for,
                and then allowing yourself to be known for them. Ultimately, the goal is to create something that conveys a message and that can be monetized.
            </p>
            <p>
                Whereas some self-help practices focus on self-improvement, personal branding defines success as a form of self-packaging. The term is thought
                to have originated from an article written by Tom Peters in 1997. In Be Your Own Brand, first published in 1999, marketers David McNally
                and Karl Speak wrote: "Your brand is a perception or emotion, maintained by somebody other than you, that describes the total
                experience of having a relationship with you."
            </p>
            <p>
                Individuals sometimes associate personal names or pseudonyms with their businesses. Notably, 45th President of the United States and
                real estate mogul Donald Trump uses his last name on properties and other enterprises. Celebrities may also leverage their social
                status to support organizations for financial or social gain. For example, Kim Kardashian endorses brands and products through
                her media influence.
            </p>
            <p>
                The relationship between brands and consumers is dynamic and must be constantly refined. This continuous process demonstrates the
                ambivalence of consumerism. Bop Design estimates that 80% of consumers are more likely to evaluate solutions from the brands they follow
                on a social network.
            </p>
            <p>
                A personal brand is a widely-recognized and largely-uniform perception or impression of an individual based on their experience,
                expertise, competencies, actions and/or achievements within a community, industry, or the marketplace at large.
            </p>
        </div>
    </div>

    <script id="search-template" type="text/x-kendo-tmpl">
        <span class="k-textbox k-display-flex">
            <input autocomplete="off" placeholder="Search..." title="Search..." class="k-input">
            <span class="k-input-icon">
                <span class="k-icon k-i-search"></span>
            </span>
        </span>
    </script>
    <script>
        $(function () {
            $(".box-col").on("change", "input", function (e) {
                var option = $(this).attr("name");
                var value = $(this).val();
                var options = {};
                var appbar = $("#appbar").getKendoAppBar();

                options[option] = value;

                appbar.setOptions(options);

                if (appbar.options.position == "top") {
                    appbar.element.prependTo($(".appbar-container"));
                } else {
                    appbar.element.appendTo($(".appbar-container"));
                }
            });
        });
        $("#appbar").kendoAppBar({
            positionMode: "sticky",
            position: "top",
            themeColor: "dark",
            items: [
                {
                    template: `<div class="k-avatar k-avatar-circle k-avatar-image k-avatar-md">
                              <img src="../content/web/Kendoka-32.png"></div>`,
                    type: "contentItem"
                },
                { width: 8, type: "spacer" },
                { template: '<h1 class="links">Follow me</h1>', type: "contentItem" },
                { width: 8, type: "spacer" },
                {
                    className: 'social-section',
                    template: `<span class="k-icon k-i-facebook" />
                               <span class="k-icon k-i-twitter" />
                               <span class="k-icon k-i-pinterest" />
                               <span class="k-icon k-i-google-plus" />
                               <span class="k-icon k-i-linkedin" />`,
                    type: "contentItem"
                },
                { type: "spacer" },
                {
                    template: kendo.template($("#search-template").html()),
                    type: "contentItem"
                }
            ]
        });
    </script>

</div>
<style>
    .spacer-container {
        background-color: #f3f3f3;
    }

    .appbar-container {
        height: 400px;
        overflow: auto;
    }

    #example div.configurator {
        margin: 0;
    }

    #demo-runner {
        padding: 0;
    }

    .title {
        font-size: 18px;
        margin: 0;
    }

    .social-section .k-icon {
        margin: 0 4px;
    }

    .links {
        font-size: 18px;
        margin: 0;
    }

    .k-display-flex {
        display: flex;
        width: 250px;
    }

    .page-content {
        background: white;
        padding: 25px 10px;
        margin-top: 1px;
    }

    .page-content p {
        font-size: 18px;
    }
</style>


    
</body>
</html>